如何设置相机位置

Question

我是三个.js和webgl编程的初学者。 所以我在三个方面创建了一个盒子.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

不确定

您是尝试使用正交摄影机还是透视摄影机创建此场景，但通常需要按类型(即 THREE.透视相机(...((。我还添加了几行额外的行以确保相机配置正确，即将"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();

Answer 2

尝试

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

其中<X>和<Z>是 2D 坐标，<Y>是高度