javascript - 如何让相机跟随本示例中的地形高度 : http://threejs. org/examples/#webgl_terrain_dynamic

Question

我想知道如何在这三个js示例中制作相机:http://threejs.org/examples/#webgl_terrain_dynamic

跟随地形的高度。 因此，本地形移动时，相机会根据地形的山丘(高度)上下移动。

换句话说，知道地形的高度是由高度图构建的，我如何获得地形的高度？

我已经尝试使用 Raycaster，如下所示:

var raycaster = new THREE.Raycaster( camera.position, new THREE.Vector3(0, -1, 0) );
var intersects = raycaster.intersectObject( terrain, false );
var intersect_point = intersetcs[0].point;

但是无论相机位于何处，intersect_point 的 y 值始终等于 0。 事实上，本例中地形的高度是由高度图创建的。因此，作为平面的地形的几何形状不会被高度图改变并保持平坦，因此是光线转换器的结果。

您能帮我找到一种方法来获取给定位置的地形高度吗？

非常感谢您的帮助。

Answer 1

在示例本身中，计算相对于“高度图”纹理的相机位置，并读出高度信息(您可能想查看正在使用的着色器高度图以确定如何“读取它”，正如我不知道的那样)不记得细节了)。

这是我会使用的通用解决方案。

第 1 步:复制地形着色器(添加颜色的着色器，而不是创建物理地形的着色器)并对其进行修改，以便根据距相机的距离输出颜色，而不是输出地形颜色(例如 MeshDepthMaterial 或网格距离 Material )。您确实必须执行一些 float<-> color packing以确保您可以读取完整的 float 。我们将其称为“距离着色器”，因为它的目标是渲染物体距相机的距离。

第 2 步:添加一个垂直向下(相对于地形)的摄像机，您需要保持该摄像机的位置与实际摄像机同步。在渲染循环期间这应该相当容易做到(只需复制位置向量)。相机的视野可能非常小(如 1 度)。我们将其称为“高度相机”，因为它的目标是确定高度。

第 3 步:在渲染循环中。首先使用“距离着色器”和“高度相机”将地形渲染为纹理目标(可以很小，可能只有 1 像素 x 1 像素)。

第4步:从第3步中的纹理目标读取颜色信息，通过反转颜色将其从RGBA转换回 float packing 。现在你已经知道了高度。