[英]three.js - How to set camera position?
我是 Three.js 和 webgl 编程的初学者。 所以我在three.js中创建了一个盒子并且它工作正常但问题是当我在z轴上设置相机位置(例如:camera.position.z = 2;)时盒子消失了。 谁能解释一下为什么会发生这种情况以及如何正确设置相机的位置?
尝试取消对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();
不确定您是否尝试使用正交相机或透视相机创建此场景,但您通常需要按类型指定相机(即 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();
试试
camera.position.set( <X> , <Y> , <Z> );
其中<X>
和<Z>
是二维坐标, <Y>
是高度
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.