Three.js 全局高度圖未顯示預期結果

Question

對不起，如果這是一個重復的問題，但我還沒有找到答案，我已經嘗試了幾個小時。 所以我是 three.js 的新手，我想使用我在網上找到的全球 4k 高度 map 創建地球的 model。 我發現這個開源腳本可以做到這一點。

    function createGeometryFromMap() {
    var depth = 512;
    var width = 512;

    var spacingX = 3;
    var spacingZ = 3;
    var heightOffset = 2;

    var canvas = document.createElement('canvas');
    canvas.width = 512;
    canvas.height = 512;
    var ctx = canvas.getContext('2d');

    var img = new Image();
    img.src = "assets/earth.jpg";
    img.onload = function () {
        // 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);
            }
        }

        // we create a rectangle between four vertices, and we do
        // that as two triangles.
        for (var z = 0; z < depth - 1; z++) {
            for (var x = 0; x < width - 1; x++) {
                // we need to point to the position in the array
                // a - - b
                // |  x  |
                // c - - d
                var a = x + z * width;
                var b = (x + 1) + (z * width);
                var c = x + ((z + 1) * width);
                var d = (x + 1) + ((z + 1) * width);

                var face1 = new THREE.Face3(a, b, d);
                var face2 = new THREE.Face3(d, c, a);

                face1.color = new THREE.Color(scale(getHighPoint(geom, face1)).hex());
                face2.color = new THREE.Color(scale(getHighPoint(geom, face2)).hex())

                geom.faces.push(face1);
                geom.faces.push(face2);
            }
        }

        geom.computeVertexNormals(true);
        geom.computeFaceNormals();
        geom.computeBoundingBox();

        var zMax = geom.boundingBox.max.z;
        var xMax = geom.boundingBox.max.x;

        var mesh = new THREE.Mesh(geom, new THREE.MeshLambertMaterial({
            vertexColors: THREE.FaceColors,
            color: 0x666666,
            shading: THREE.NoShading
        }));
        mesh.translateX(-xMax / 2);
        mesh.translateZ(-zMax / 2);
        scene.add(mesh);
        mesh.name = 'valley';
    };

}

function getHighPoint(geometry, face) {

    var v1 = geometry.vertices[face.a].y;
    var v2 = geometry.vertices[face.b].y;
    var v3 = geometry.vertices[face.c].y;

    return Math.max(v1, v2, v3);
}

當我嘗試下載隨附的大峽谷和夏威夷的演示高度圖時，它們似乎還不錯。 但是，當我嘗試將全局高度圖實現到其中時，結果並未顯示我需要的內容

這是大峽谷的地形：

這是我正在使用的全局高度圖：

這是我得到的 3d 世界地形的結果：

很明顯，有些事情是錯誤的，因為那不是世界。 抱歉，如果圖像太多，我想不出用任何其他方式來描述這個問題。

Answer 1

當您將 2D canvas 上下文告訴.drawImage()時，它將在 512px canvas 上繪制 4000px 圖像。 如果只使用 3 個img, dx, dy arguments， 這就是 MDN 文檔中定義的方式。

您可以：

• 使用dWidth, dHeight 。
• 使您的 canvas 更大以匹配您的地球圖像的寬度和高度尺寸。