从数组THREE.js创建纹理

问题描述

我正在使用地形生成器，但看不出要怎么做颜色.我希望能够生成将占用整个PlaneGeometry的图像.我的问题是如何基于高度图创建一个可以覆盖整个PlaneGeometry(无包裹)的图像?我可以想到一种方法，但是我不确定它是否可以完全覆盖PlaneGeometry，并且效率很低.我会以二维视图在画布上绘制颜色.然后，我会将画布转换为纹理，这是最好/唯一的方法吗?

I'm working on a terrain generator, but I can't seen to figure out how to do the colors. I want to be able to generate an image that will take up my whole PlaneGeometry. My question is how can I create a single image that will cover the entire PlaneGeometry (with no wrapping) based off my height map? I can think of one way, but I'm not sure it would fully cover the PlaneGeometry and it would be very inefficient. I'd draw it in a two-dimensional view with colors on a canvas. I'd then convert the canvas to the texture Is that the best/only way?

更新:使用DataTexture，我遇到了一些错误.我绝对不知道哪里出了问题.这是我得到的错误:
WebGL:drawElements:绑定到纹理单元0的纹理不可渲染.它可能不是2的幂，并且具有不兼容的纹理过滤或不是纹理完整"的.或者未启用OES_float_linear或OES_half_float_linear扩展的纹理为具有线性过滤的Float或Half Float类型.
DataTexture和PlaneGeometry的大小均为512 ^ 2.我该怎么做才能解决此问题?

UPDATE: Using DataTexture, I got some errors. I have absolutely no idea where I went wrong. Here's the error I got:
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.
Both the DataTexture and the PlaneGeometry have a size of 512^2. What can I do to fix this?

以下是我使用的一些代码:

Here's some of the code I use:

我修复了它.这是我使用的工作代码.

I fixed it. Here's the working code I used.

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.

推荐答案

如果数据已经在Javascript代码中，则最佳方法是使用 DataTexture -请参见 https://threejs.org/docs/#api/textures/DataTexture 用于常规文档，或查看 THREE.ImageUtils.generateDataTexture()，以获得一种非常方便的制作方法. http://threejs.org/docs/#Reference/Extras/ImageUtils

The optimal way, if the data is already in your Javascript code, is to use a DataTexture -- see 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创建纹理的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！