我在three.js和webgl编程方面相当初学。所以我在three.js中创建了一个盒子并且工作正常,但问题是当我在z轴上设置相机位置时(例如:camera.position.z = 2;)盒子就消失了。任何人都可以解释我为什么会这样,我怎样才能正确设置相机的位置?
尝试取消注释fiddle
中的{{1}}{{1}}
答案 0 :(得分:4)
不确定您是否尝试使用正交相机或透视相机创建此场景,但您通常需要按类型指定相机(即THREE.PerspectiveCamera(...))。 我还添加了一些额外的线以确保正确配置摄像机,即将“LookAt”点设置为(0,0,0),以及通过THREE.Vector3.set设置摄像机的实际位置( ...)方法。
以下是我对您的代码的调整:
function init() {
var scene = new THREE.Scene();
var box = getBox(1, 1, 1);
scene.add(box);
var camera = new THREE.PerspectiveCamera(70,
window.innerWidth/window.innerHeight, 0.1, 1000 ); // Specify camera type like this
camera.position.set(0,2.5,2.5); // Set position like this
camera.lookAt(new THREE.Vector3(0,0,0)); // Set look at coordinate like this
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.getElementById("webgl").appendChild(renderer.domElement);
renderer.render(scene, camera);
}
function getBox(w, h, d) {
var geometry = new THREE.BoxGeometry(w, h, d);
var material = new THREE.MeshBasicMaterial({
color : 0x00ff00
});
var mesh = new THREE.Mesh(geometry, material);
return mesh;
}
init();
答案 1 :(得分:0)
尝试
camera.position.set( <X> , <Y> , <Z> );
其中<X>
和<Z>
是2D坐标,<Y>
是高度