Question

我喜欢在页面上的现有div中显示一个场景。 Canvas总是附加在顶部。我尝试使用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>

Answer 1

使用container删除代码行，然后在创建渲染器后添加：

var previewDiv = document.getElementById("preview");    
previewDiv.appendChild (renderer.domElement);

您希望将渲染器附加到HTML文件中的特定div，而不是像在代码中那样将其附加到正文中。

这是一个jsfiddle：http://jsfiddle.net/L0rdzbej/25/

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

1 个答案: