我正在努力为现有画布中渲染的基本three.js场景添加控件。 HTML代码有一个canvas元素,其id = viewport:
<canvas id="viewport" width="640" height="480"></canvas>
这是我的Javascript代码(不工作):
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(50, 640 / 480, 1, 1000);
camera.position.y = 150;
camera.position.z = 500;
camera.lookAt( scene.position );
var renderer = new THREE.WebGLRenderer({canvas: viewport, antialias:true});
renderer.setSize(640, 480);
renderer.setClearColor (0xd3d3d3, 1);
var controls = new THREE.OrbitControls(camera, viewport);
mesh = new THREE.Mesh(
new THREE.BoxGeometry(200, 200, 200, 1, 1, 1),
new THREE.MeshBasicMaterial({color : 0xff0000, wireframe: true})
);
scene.add(mesh);
function render() {
//mesh.rotation.y += 0.01;
renderer.render(scene, camera);
}
(function animate() {
requestAnimationFrame(animate);
controls.update();
render();
})();
正如您所看到的,我在这里连接到我现有的画布(并且它可以工作):
var renderer = new THREE.WebGLRenderer({canvas: viewport, antialias:true});
当我手动旋转网格(https://codepen.io/anon/pen/rGpqRX)时渲染完全正常但是当我尝试添加控件时它只渲染黑屏。为什么会这样?
答案 0 :(得分:0)
您还需要在orbitControls调用中传递renderer.domElement而不是画布本身:
var controls = new THREE.OrbitControls(camera, renderer.domElement);
Per the docs,。trueElement会自动创建,因此即使您实际使用canvas属性进行设置,也不会出现问题。
Working example based on your pen
编辑:当然,在项目中包含OrbitControls.js。始终仔细检查您需要的功能是否包含在核心三个中或添加到脚本中。