简体   繁体   English

从Array THREE.js创建纹理

[英]Create texture from Array THREE.js

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. 我希望能够生成一个占据整个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? 我的问题是如何根据我的高度图创建一个覆盖整个PlaneGeometry(没有包装)的单个图像? I can think of one way, but I'm not sure it would fully cover the PlaneGeometry and it would be very inefficient. 我可以想到一种方法,但我不确定它是否会完全覆盖PlaneGeometry,效率非常低。 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? 然后我将画布转换为纹理是最佳/唯一的方式吗?

UPDATE: Using DataTexture, I got some errors. 更新:使用DataTexture,我遇到了一些错误。 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. DataTexture和PlaneGeometry都具有512 ^ 2的大小。 What can I do to fix this? 我该怎么做才能解决这个问题?

Here's some of the code I use: 这是我使用的一些代码:

EDIT: 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.

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. 如果数据已经在您的Javascript代码中,那么最佳方法是使用DataTexture - 请参阅https://threejs.org/docs/#api/textures/DataTexture获取常规文档,或者查看THREE.ImageUtils.generateDataTexture()用于制作它们的相当方便的方法。 http://threejs.org/docs/#Reference/Extras/ImageUtils http://threejs.org/docs/#Reference/Extras/ImageUtils

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM