显示在DIV中使用Three.js创建的“对象/画布”

Question

Here is the Code:

I want the "object" (which is being created at run time in Canvas using Three.js) inside a specific DIV, right now the object is being created but its being created at the end of page, just before the closing of </body> how to change the position so it should load inside " <div id="container"></div> " div.

Here is my code:

HTML:

<div id="container"></div>

JS

 // revolutions per second
 var angularSpeed = 0.2;
 var lastTime = 0;

 // this function is executed on each animation frame
 function animate() {
     // update
     var time = (new Date()).getTime();
     var timeDiff = time - lastTime;
     var angleChange = angularSpeed * timeDiff * 2 * Math.PI / 1000;
     cube.rotation.y += angleChange;
     lastTime = time;

     // render
     renderer.render(scene, camera);

     // request new frame
     requestAnimationFrame(function () {
         animate();
     });
 }

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

 // camera
 var camera = new THREE.PerspectiveCamera(120, window.innerWidth / window.innerHeight, 1, 1000);
 camera.position.z = 700;

 // scene
 var scene = new THREE.Scene();

 // cube (Lenght, Height, Width)
 var cube = new THREE.Mesh(new THREE.CubeGeometry(400, 200, 200), new THREE.MeshNormalMaterial());
 //cube.overdraw = false;
 scene.add(cube);

 // start animation
 animate();

FIDDLE for the same: http://jsfiddle.net/6a7u4/1/

Let me know if you need any other information.

Please suggest.

Answer 1

At a guess

document.body.appendChild(renderer.domElement);

should be

document.getElementById("container").appendChild(renderer.domElement);

Edit: In order to get this working as expected, I've also updated the size to grab its height/width from the container div also. The updated render coded looks as follows.

// renderer
var container = document.getElementById("container");
var renderer = new THREE.WebGLRenderer();
renderer.setSize(container.offsetWidth, container.offsetHeight);
container.appendChild(renderer.domElement);

Jsfiddle of result: http://jsfiddle.net/6a7u4/2/