将 three.js 放入 div 2

Question

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

我找到了旧线程“将three.js 动画放入div”，他们成功地将three.js 动画放入div 中，代码如下：

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

通常将三个.js 添加到页面中，我会使用这个：

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 为“canvas-container”的 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 元素。