从数组 THREE.js 创建纹理

Question

我正在研究地形生成器，但我看不出如何处理颜色。我希望能够生成一张占据整个 PlaneGeometry 的图像。我的问题是如何根据我的高度图创建一个覆盖整个 PlaneGeometry（没有环绕）的单个图像？我可以想到一种方法，但我不确定它是否会完全覆盖 PlaneGeometry，而且效率会非常低。我会在 canvas 上用颜色在二维视图中绘制它。然后我将 canvas 转换为纹理这是 best/only 方式吗？

更新：使用 DataTexture，我遇到了一些错误。我完全不知道我哪里出错了。这是我得到的错误：
WebGL: drawElements: texture bound to texture unit 0 is not renderable. It maybe non-power-of-2 and have incompatible texture filtering or is not 'texture complete'. Or the texture is Float or Half Float type with linear filtering while OES_float_linear or OES_half_float_linear extension is not enabled.
DataTexture 和 PlaneGeometry 的大小都是 512^2。我该怎么做才能解决这个问题？

这是我使用的一些代码：

编辑：我修复了它。这是我使用的工作代码。

function genDataTexture(){
    //Set the size.
    var dataMap = new Uint8Array(1 << (Math.floor(Math.log(map.length * map[0].length * 4) / Math.log(2))));
        /* ... */
        //Set the r,g,b for each pixel, color determined above
            dataMap[count++] = color.r;
            dataMap[count++] = color.g;
            dataMap[count++] = color.b;
            dataMap[count++] = 255;
        }
    var texture = new THREE.DataTexture(dataMap, map.length, map[0].length, THREE.RGBAFormat);
    texture.needsUpdate = true;
    return texture;
}
/* ... */
//Create the material
var material = new THREE.MeshBasicMaterial({map: genDataTexture()});
//Here, I mesh it and add it to scene. I don't change anything after this.

Answer 1

如果数据已经在您的 Javascript 代码中，最佳方法是使用 DataTexture -- 请参阅 https://threejs.org/docs/#api/textures/DataTexture for the general docs, or look at THREE.ImageUtils.generateDataTexture() for a fairly-handy way to make them. http://threejs.org/docs/#Reference/Extras/ImageUtils

从数组 THREE.js 创建纹理

Create texture from Array THREE.js

javascript

canvas

terrain

three.js