Question

以下是代码：

我想在特定的DIV中使用“对象”（在Canvas中使用Three.js在运行时创建），现在正在创建对象，但是它正在页面的末尾创建，就在关闭之前</body>如何更改位置，以便在“<div id="container"></div>”div内加载。

这是我的代码：

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：http://jsfiddle.net/6a7u4/1/

如果您需要任何其他信息，请与我们联系。

请建议。

Answer 1

猜测

document.body.appendChild(renderer.domElement);

应该是

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

编辑：为了让这个按预期工作，我还更新了尺寸以从容器div中获取其高度/宽度。更新后的渲染编码如下所示。

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

结果的Jsfiddle：http://jsfiddle.net/6a7u4/2/

显示在DIV中使用Three.js创建的“object / canvas”

1 个答案: