4

在 Three.js（使用 JavaScript/WebGL）中，如何创建一个相机以固定高度、固定前进速度和相对于球体的固定方向围绕球体飞行，而用户只能向左和正确的？

想象一架飞机在一根看不见的绳子上飞到地球的中心，在地面附近飞行，并且总是看到球体的一部分：

在此处输入图像描述

（我目前有旋转球体的代码，因此它看起来像在飞行的相机 - 左右转向尚未实现 - 但我认为在我走得更远之前，移动相机/飞机可能更清洁，而不是球体团体。）

谢谢！

4

2 回答 2

5

你的意思是像我的Ludum Dare 23 游戏一样？我发现这比我预期的要复杂一些。不过，这并不难。

在这里，我假设您知道相机的经纬度以及它与球体中心的距离（称为radius），并希望为相机创建一个变换矩阵。

仅创建一次以下对象以避免在游戏循环中创建新对象：

var rotationY = new Matrix4();
var rotationX = new Matrix4();
var translation = new Matrix4();
var matrix = new Matrix4();

然后每次相机移动时，创建矩阵如下：

rotationY.setRotationY(longitude);
rotationX.setRotationX(-latitude);
translation.setTranslation(0, 0, radius);
matrix.multiply(rotationY, rotationX).multiplySelf(translation);

在此之后只需设置相机矩阵（假设相机是您的相机对象）：

// Clear the camera matrix.
// Strangely, Object3D doesn't have a way to just SET the matrix(?)
camera.matrix.identity();
camera.applyMatrix(matrix);
于 2012-06-14T09:55:32.287 回答
2

感谢马丁的回答！我现在用另一种方法让它运行良好，如下所示（Martin 的方法可能也很完美；也非常感谢 Lmg！）：

开始时将相机设置为球体顶部的一条直线（即高 y 值，略超出半径，在我的情况下为 200）；让它看起来低一点：

camera.position.set(0, 210, 0);
camera.lookAt( new THREE.Vector3(0, 190, -50) );

创建一个空组（Object3D）并将相机放入：

camGroup = new THREE.Object3D();
camGroup.add(camera);
scene.add(camGroup);

以相对于屏幕一半的百分比跟踪鼠标位置：

var halfWidth = window.innerWidth / 2, halfHeight = window.innerHeight / 2;
app.mouseX = event.pageX - halfWidth;
app.mouseY = event.pageY - halfHeight;
app.mouseXPercent = Math.ceil( (app.mouseX / halfWidth) * 100 );
app.mouseYPercent = Math.ceil( (app.mouseY / halfHeight) * 100 );

在动画循环中，将此百分比应用于旋转，同时自动向前移动：

camGroup.matrix.rotateY(-app.mouseXPercent * .00025);
camGroup.matrix.rotateX(-.0025);
camGroup.rotation.getRotationFromMatrix(camGroup.matrix);

requestAnimationFrame(animate);
renderer.render(scene, camera);
于 2012-06-14T16:53:38.313 回答