div内にThree.jsはレンダリングされません

Question

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; 
} 

それが動作しない理由を私は見ることができません。また、スクリプトを外部ファイルとして取得しようとしています。 残念ながら動作しません。ここに堪能ではない...もっと知っているかもしれない。

Answer 1

あなたがいないのdiv、ページ本体にレンダラを追加している：

document.body.appendChild(...) 

ではなく、div要素にそれを追加します。

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

それはあなたのプログラムのコードを理解することが重要です。コピーして貼り付ける代わりに、各行を歩くことを検討してください。