three.js-如何设置相机位置？

Question

我是three.js和webgl编程的初学者。所以我在three.js中创建了一个盒子，它的工作正常，但是问题是当我在z轴上设置相机位置时（例如：camera.position.z = 2;），盒子消失了。谁能解释我为什么会这样，如何正确设置相机的位置？

尝试camera.position.z = 2;在小提琴中取消注释

function init() {

    var scene = new THREE.Scene();

    var box = getBox(1, 1, 1);

    scene.add(box);

    var camera = new THREE.Camera(45, window.innerWidth/window.innerHeight, 1, 1000 );
    //camera.position.z = 2;

    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();

Answer 1

尝试

camera.position.set( <X> , <Y> , <Z> );

其中<X>和<Z>是二维坐标，<Y>是高度

Answer 2

不确定是否要使用正交摄影机或透视摄影机创建此场景，但是通常需要按类型指定摄影机（即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();