如何在特定的div內顯示畫布場景？

Question

我喜歡在我的頁面上顯示現有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> 

Answer 1

與container刪除代碼行，然後添加創建渲染後：

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

你想渲染器連接到特定的DIV在HTML文件中，而不是身體像你正在做在你的代碼中。

這裏是一個的jsfiddle：http://jsfiddle.net/L0rdzbej/25/