Question

我为另一个基本问题道歉，这个问题基本上是另一个老线程的副本，但我是对three.js的新手，并且在这里通过反复试验来学习或多或少......

我找到了旧线程＆＃39;将three.js动画放入div中。他们成功地在div中放入了一个three.js动画，其中包含以下代码行：

container = document.getElementById( 'canvas' );
document.body.appendChild( container );
renderer = new THREE.WebGLRenderer();
renderer.setSize( 200, 200 );
container.appendChild( renderer.domElement );

以上脚本的JSFiddle（http://jsfiddle.net/fek9ddg5/1/）

我试图做同样的事情并将这些行添加到我的脚本中，但结果却是一个完全白色的屏幕。我设法将屏幕分为两部分，一部分是完全白色，另一部分是脚本。但是，它失败了，因为即使脚本在白色部分移动，脚本也会对鼠标做出反应。我做了一个codepen，我在注释符号中添加了我添加的脚本。

请在此处查看：http://codepen.io/anon/pen/qRdGWo

Answer 1

通常要将三个.j添加到页面中，我会使用它：

renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
// Add renderer to page
document.body.appendChild(renderer.domElement);

// Create camera.
camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.z = 400;

可以在this fiddle

中看到

但是，要将它添加到已经在ID＆＃39; canvas-container＆＃39;的页面上的div中。我会用..

renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio(window.devicePixelRatio);
// get the div that will hold the renderer
var container = document.getElementById('canvas-container');
var w = container.offsetWidth;
var h = container.offsetHeight;
renderer.setSize(w, h);
// add the renderer to the div
container.appendChild(renderer.domElement);

// Create camera.
camera = new THREE.PerspectiveCamera(70, w / h, 1, 1000);
camera.position.z = 400;

可以在this fiddle

中看到

基本上添加渲染器的位置取决于您调用的appendChild(renderer.domElement)上的dom元素。

将div.js放在div 2中

1 个答案: