无法理解场景位置的重要性



我正在尝试编写一些示例代码的three.js,我有一个平面,我想要这个平面旋转。

这是我的相机:

var camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.1,  1000);
camera.position.set(50, 50, 60);
camera.lookAt(scene.position);

这是我的平面

var planeGeometry = new THREE.PlaneGeometry(70, 30, 1, 1);
var planeMaterial = new THREE.MeshBasicMaterial({ color: green });
var plane = new THREE.Mesh(planeGeometry, planeMaterial);
plane.rotation.x = -0.5 * Math.PI;
scene.add(plane);

我也有其他代码,但这是我的渲染和animationframe代码:

renderScene();
function cameraUpdate() {
camera.position.x = cameraRadius * Math.cos(step);
camera.position.z = cameraRadius * Math.sin(step);
camera.lookAt(scene.position);
}
function renderScene() {
//make update to position, rotation of objects in the scene
step += 0.05;
cameraUpdate();
requestAnimationFrame(renderScene);
renderer.render(scene, camera);
}

我的问题是,在相机更新功能,如果不放

camera.lookAt(scene.position);

的旋转变得非常奇怪,当我把这个相机更新,我得到旋转的平面在自己的轴,这是想要的!!

我的问题是

  1. 什么做场景。地位意味着
  2. 为什么我需要让相机看每一个动画帧?我不明白当相机旋转时它的值是如何改变的

提前感谢!!

如果你想让平面自己旋转,你应该在每一帧上使用plane.rotation.y += 0.1,或者类似的简单方法。你要做的是让相机绕着平面做圆周运动。把它想象成绕着咖啡桌走一圈。如果你的头一直向前看,当你走过桌子时就不会看到它。这是camera.lookAt()修复的。它使相机对准空间中的一个点。你可以在文档中读到。

scene.position在默认情况下是在(0, 0, 0),所以这只是告诉相机看场景中心的另一种方式。

最新更新