Javascript 如何在特定div中显示画布场景？

我喜欢在页面上显示现有div中的场景。画布总是附加在顶部。我尝试过使用

getElementById

，但它对我不起作用

我错过了什么？提前非常感谢

<div id="preview"></div>

<script>

    if ( ! Detector.webgl ) Detector.addGetWebGLMessage();

    var SCREEN_WIDTH = window.innerWidth;
    var SCREEN_HEIGHT = window.innerHeight;
    var FLOOR = -250;

    var container;

    var camera, scene, controls;
    var renderer;

    var mesh;

    var textureCube;
    var cameraCube, sceneCube;

    var loader;

    var mouseX = 0, mouseY = 0;

    var windowHalfX = window.innerWidth / 2;
    var windowHalfY = window.innerHeight / 2;

    init();
    animate();

    function init() {
      container = document.createElement( 'div' );
      document.body.appendChild( container );

      // CAMERA

      camera = new THREE.PerspectiveCamera( 25, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 10000 );
      camera.position.set( 185, 40, 170 );

      controls = new THREE.OrbitControls( camera );
      controls.maxPolarAngle = Math.PI / 2;
      controls.minDistance = 200;
      controls.maxDistance = 500;

      // SCENE

      scene = new THREE.Scene();

      // SKYBOX

      sceneCube = new THREE.Scene();
      cameraCube = new THREE.PerspectiveCamera( 25, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 10000 );
      sceneCube.add( cameraCube );

      var r = "textures/cube/pisa/";
      var urls = [ r + "px.png", r + "nx.png",
             r + "py.png", r + "ny.png",
             r + "pz.png", r + "nz.png" ];


      textureCube = THREE.ImageUtils.loadTextureCube( urls );

      var shader = THREE.ShaderLib[ "cube" ];
      shader.uniforms[ "tCube" ].value = textureCube;

      var material = new THREE.ShaderMaterial( {

        fragmentShader: shader.fragmentShader,
        vertexShader: shader.vertexShader,
        uniforms: shader.uniforms,
        depthWrite: false,
        side: THREE.BackSide

      } ),

      mesh = new THREE.Mesh( new THREE.BoxGeometry( 100, 100, 100 ), material );
      sceneCube.add( mesh );

      // LIGHTS

      var light = new THREE.PointLight( 0xffffff, 1 );
      light.position.set( 2, 5, 1 );
      light.position.multiplyScalar( 30 );
      scene.add( light );

      var light = new THREE.PointLight( 0xffffff, 0.75 );
      light.position.set( -12, 4.6, 2.4 );
      light.position.multiplyScalar( 30 );
      scene.add( light );

      scene.add( new THREE.AmbientLight( 0x050505 ) );

      // RENDERER

      renderer = new THREE.WebGLRenderer( { antialias: true } );
      renderer.setPixelRatio( window.devicePixelRatio );
      renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
      renderer.domElement.style.position = "relative";

      renderer.autoClear = false;

      container.appendChild( renderer.domElement );

      //

      renderer.gammaInput = true;
      renderer.gammaOutput = true;


      // EVENTS

      window.addEventListener( 'resize', onWindowResize, false );
      window.addEventListener( 'mousemove', onDocumentMouseMove, false );

      // LOADER

      var start = Date.now();

      // new way via CTMLoader and separate parts

      loaderCTM = new THREE.CTMLoader( true );
      document.body.appendChild( loaderCTM.statusDomElement );

      var position = new THREE.Vector3( -105, -78, -40 );
      var scale = new THREE.Vector3( 30, 30, 30 );

      loaderCTM.loadParts( "models/ctm/camaro/camaro.js", function( geometries, materials ) {

        hackMaterials( materials );

        for ( var i = 0; i < geometries.length; i ++ ) {

          var mesh = new THREE.Mesh( geometries[ i ], materials[ i ] );
          mesh.position.copy( position );
          mesh.scale.copy( scale );
          scene.add( mesh );

        }

        loaderCTM.statusDomElement.style.display = "none";

        var end = Date.now();

        console.log( "load time:", end - start, "ms" );

      }, { useWorker: true } );

    }

    //

    function hackMaterials( materials ) {

      for ( var i = 0; i < materials.length; i ++ ) {

        var m = materials[ i ];

        if ( m.name.indexOf( "Body" ) !== -1 ) {

          var mm = new THREE.MeshPhongMaterial( { map: m.map } );

          mm.envMap = textureCube;
          mm.combine = THREE.MixOperation;
          mm.reflectivity = 0.75;

          materials[ i ] = mm;

        } else if ( m.name.indexOf( "mirror" ) !== -1 ) {

          var mm = new THREE.MeshPhongMaterial( { map: m.map } );

          mm.envMap = textureCube;
          mm.combine = THREE.MultiplyOperation;

          materials[ i ] = mm;

        } else if ( m.name.indexOf( "glass" ) !== -1 ) {

          var mm = new THREE.MeshPhongMaterial( { map: m.map } );

          mm.envMap = textureCube;
          mm.color.copy( m.color );
          mm.combine = THREE.MixOperation;
          mm.reflectivity = 0.25;
          mm.opacity = m.opacity;
          mm.transparent = true;

          materials[ i ] = mm;

        } else if ( m.name.indexOf( "Material.001" ) !== -1 ) {

          var mm = new THREE.MeshPhongMaterial( { map: m.map } );

          mm.shininess = 30;
          mm.color.setHex( 0x404040 );
          mm.metal = true;

          materials[ i ] = mm;

        }

        materials[ i ].side = THREE.DoubleSide;

      }

    }

    //

    function createScene( geometry, materials, x, y, z, s ) {

      loader.statusDomElement.style.display = "none";

      geometry.center();

      hackMaterials( materials );

      var material = new THREE.MeshFaceMaterial( materials );

      mesh = new THREE.Mesh( geometry, material );
      mesh.position.set( x, y, z );
      mesh.scale.set( s, s, s );
      scene.add( mesh );

    }

    //

    function onWindowResize( event ) {

      SCREEN_WIDTH = window.innerWidth;
      SCREEN_HEIGHT = window.innerHeight;

      renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );

      camera.aspect = SCREEN_WIDTH / SCREEN_HEIGHT;
      camera.updateProjectionMatrix();

      cameraCube.aspect = SCREEN_WIDTH / SCREEN_HEIGHT;
      cameraCube.updateProjectionMatrix();

    }


    function onDocumentMouseMove(event) {

      mouseX = ( event.clientX - windowHalfX );
      mouseY = ( event.clientY - windowHalfY );

    }

    //

    function animate() {

      requestAnimationFrame( animate );

      render();

    }

    function render() {

      controls.update();

      cameraCube.rotation.copy( camera.rotation );

      renderer.clear();
      renderer.render( sceneCube, cameraCube );
      renderer.render( scene, camera );

    }

  </script>

如果（！Detector.webgl）Detector.addGetWebGLMessage（）；
var SCREEN_WIDTH=window.innerWidth；
var SCREEN_HEIGHT=window.innerHeight；
风险值下限=-250；
var容器；
摄像机、场景、控件；
var渲染器；
var网格；
质感变异；
var cameraCube，sceneCube；
var装载机；
var mouseX=0，mouseY=0；
var windowHalfX=window.innerWidth/2；
var windowHalfY=window.innerHeight/2；
init（）；
制作动画（）；
函数init（）{
container=document.createElement（'div'）；
文件.正文.附件（容器）；
//摄像机
摄像机=新的三个透视摄像机（25，屏幕宽度/屏幕高度，10000）；
摄像机。位置。设置（185，40170）；
控制装置=新的三个控制装置（摄像机）；
controls.maxPolarAngle=Math.PI/2；
controls.minDistance=200；
控件。最大距离=500；
//场面
场景=新的三个。场景（）；
//天空盒
sceneCube=new THREE.Scene（）；
cameraCube=新的三透视照相机（25，屏幕宽度/屏幕高度，11000）；
sceneCube.add（cameraCube）；
var r=“纹理/cube/pisa/”；
var url=[r+“px.png”，r+“nx.png”，
r+“py.png”，r+“ny.png”，
r+“pz.png”，r+“nz.png”]；
textureCube=THREE.ImageUtils.loadTextureCube（URL）；
var shader=THREE.ShaderLib[“立方体”]；
shader.uniforms[“tCube”].value=textureCube；
var material=新的三个着色器材质（{
fragmentShader:shader.fragmentShader，
vertexShader:shader.vertexShader，
制服，制服，
depthWrite:false，
侧面：三。背面
} ),
网格=新的3.mesh（新的3.BoxGeometry（100100100），材质）；
添加（网格）；
//灯光
var灯=新的三点灯（0xffffff，1）；
光。位置。设置（2，5，1）；
光。位置。多重刻度（30）；
场景。添加（灯光）；
var灯=新的三点灯（0xffffff，0.75）；
光。位置。设置（-12,4.6,2.4）；
光。位置。多重刻度（30）；
场景。添加（灯光）；
添加（新的三个环境光（0x050505））；
//渲染器
renderer=new THREE.WebGLRenderer（{antialas:true}）；
renderer.setPixelRatio（window.devicePixelRatio）；
设置大小（屏幕宽度、屏幕高度）；
renderer.doElement.style.position=“relative”；
renderer.autoClear=false；
container.appendChild（renderer.doElement）；
//
renderer.gammaInput=true；
renderer.gammaOutput=true；
//事件
addEventListener（'resize'，onWindowResize，false）；
window.addEventListener（'mousemove'，onDocumentMouseMove，false）；
//装载机
var start=Date.now（）；
//通过CTM装载机和独立部件的新方式
loaderCTM=新的三个.CTMLoader（真）；
document.body.appendChild（loaderCTM.StatusDoElement）；
变量位置=新的三个向量3（-105，-78，-40）；
var量表=新的三个向量3（30,30,30）；
loaderCTM.loadParts（“models/ctm/camaro/camaro.js”，函数（几何、材料）{
材料（材料）；
对于（变量i=0；ivar previewDiv = document.getElementById("preview");    
previewDiv.appendChild (renderer.domElement);