Three.js不会在div中呈现

我使用three.js来渲染一个立方体。立方体出现，但它不会显示在div和它的风格。Three.js不会在div中呈现

HTML：

<div id="render"> 

<script> 
var camera; 
var scene; 
var renderer; 
var mesh; 
var geometry; 
var material1; 
var material2; 
var material3; 
var material4; 
var material5; 
var material6; 
var materials; 
var meshFaceMaterial; 



init(); 
animate(); 

function inicio(){ 
        Render.setSize(Ancho,Alto); 

        document.getElementById('render').appendChild(Render.domElement); 

        Camara.position.z=1500; 

        Escenario.add(Camara); 

        crear_plano(); 

        controls=new THREE.OrbitControls(Camara,Render.domElement); 
      } 

function init() { 


    scene = new THREE.Scene(); 
    camera = new THREE.PerspectiveCamera(30, window.innerWidth/window.innerHeight, 1, 1000); 

    var light = new THREE.DirectionalLight(0xffffff); 
    light.position.set(0, 1, 1).normalize(); 
    scene.add(light); 

    geometry = new THREE.CubeGeometry(10, 10, 10); 
    material1 = new THREE.MeshPhongMaterial({ map: THREE.ImageUtils.loadTexture('http://vignette1.wikia.nocookie.net/scifiminibuilders/images/8/88/Your_Picture_Here.png/revision/latest?cb=20130507015051') }); 
    material2 = new THREE.MeshPhongMaterial({ map: THREE.ImageUtils.loadTexture('http://vignette1.wikia.nocookie.net/scifiminibuilders/images/8/88/Your_Picture_Here.png/revision/latest?cb=20130507015051') }); 
    material3 = new THREE.MeshPhongMaterial({ map: THREE.ImageUtils.loadTexture('http://vignette1.wikia.nocookie.net/scifiminibuilders/images/8/88/Your_Picture_Here.png/revision/latest?cb=20130507015051') }); 
    material4 = new THREE.MeshPhongMaterial({ map: THREE.ImageUtils.loadTexture('http://vignette1.wikia.nocookie.net/scifiminibuilders/images/8/88/Your_Picture_Here.png/revision/latest?cb=20130507015051') }); 
    material5 = new THREE.MeshPhongMaterial({ map: THREE.ImageUtils.loadTexture('http://vignette1.wikia.nocookie.net/scifiminibuilders/images/8/88/Your_Picture_Here.png/revision/latest?cb=20130507015051') }); 
    material6 = new THREE.MeshPhongMaterial({ map: THREE.ImageUtils.loadTexture('http://vignette1.wikia.nocookie.net/scifiminibuilders/images/8/88/Your_Picture_Here.png/revision/latest?cb=20130507015051') }); 

    materials = [material1, material2, material3, material4, material5, material6]; 

    meshFaceMaterial = new THREE.MeshFaceMaterial(materials); 

    mesh = new THREE.Mesh(geometry, meshFaceMaterial); 
    mesh.position.z = -50; 
    scene.add(mesh); 

    renderer = new THREE.WebGLRenderer(); 
    renderer.setSize(window.innerWidth, window.innerHeight); 
    document.body.appendChild(renderer.domElement); 

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

    render(); 
} 

function animate() { 
    mesh.rotation.x += .015; 
    mesh.rotation.y += .015; 
    mesh.rotation.y += .015; 

    render(); 
    requestAnimationFrame(animate); 
} 

function render() { 
    renderer.render(scene, camera); 
} 

function onWindowResize() { 
    camera.aspect = window.innerWidth/window.innerHeight; 
    camera.updateProjectionMatrix(); 
    renderer.setSize(window.innerWidth, window.innerHeight); 
    render(); 
} 
</script> 
</div>

CSS：

#render { 
    width: 200px; 
    height: 200px; 
    border: 1px solid black; 
    padding: 0px; 
}

我不明白为什么它不工作。此外，我正在尝试将脚本作为外部文件。 document.addEventListener('DOMContentLoaded', function() { function _(variable) { console.log(variable); }不幸运。这里不够精通......也许你知道更多。

来源

2016-08-04 PLAYCUBE

要追加的渲染页面的身体，而不是DIV：

document.body.appendChild(...)

其追加到div来代替：

document.getElementById('render').appendChild(renderer.domElement);

了解你的程序代码是很重要的。考虑遍历每一行，而不是复制和粘贴。

来源

2016-08-04 00:42:44

Three.js不会在div中呈现

回答

相关问题