在使用ThreeJs从高图创建地形时计算顶点

Question

我正在阅读来自ThreeJs Cookbook的"从highightmap创建地形"示例

这个例子加载大峡谷:http://lh5.ggpht.com/_-B0hFoGrn-w/SvHiYk39yAI/AAAAAAAABOQ/6IGZwifUYGA/GrandCanyon.png

创建3D地形:http://www.smartjava.org/tjscb/02-geometries-meshes/02.06-create-terrain-from-heightmap.html

有一些我看不懂的代码:

// draw on canvas
        ctx.drawImage(img, 0, 0);
        var pixel = ctx.getImageData(0, 0, width, depth);
        var geom = new THREE.Geometry;
        var output = [];
        for (var x = 0; x < depth; x++) {
            for (var z = 0; z < width; z++) {
                // get pixel
                // since we're grayscale, we only need one element
                var yValue = pixel.data[z * 4 + (depth * x * 4)] / heightOffset;                       
                var vertex = new THREE.Vector3(x * spacingX, yValue, z * spacingZ);
                geom.vertices.push(vertex);
            }
        }

为什么用该值计算yValue ?为什么我们不使用var yValue = pixel呢?Data [z * 4 + (depth * x)]之类的?

我们真的需要spacingX和spacingZ吗?

源代码在这里:https://github.com/josdirksen/threejs-cookbook/blob/master/02-geometries-meshes/02.06-create-terrain-from-heightmap.html

你能帮我一下吗?

非常感谢!

Answer 1

你不需要spacingX和spacingZ，不。您可以通过其他方式调整比例，例如将比例矩阵应用于整个THREE。填充顶点后的几何体。真的，由你决定。

对于yValue，索引是为了调整纹理数据的布局方式。有四个通道，通常是RGBA，但在这种情况下，我们只需要其中一个作为高度。