在 three.js 中将 DataTexture 应用于以编程方式生成的网格答案

【问题标题】：Applying a DataTexture to a programmatically generated Mesh in three.js在 three.js 中将 DataTexture 应用于以编程方式生成的网格
【发布时间】：2013-03-04 11:21:22
【问题描述】：

实际问题：

我是否需要设置多个faceVertexUvs[0] 才能在网格上为材质设置纹理？我不确定如何摆脱glDrawElements 错误。我尝试过使用不同的材料，例如MeshPhongMaterial 和MeshLambertMaterial，但坦率地说，我不确定有什么区别。我还尝试在我的基础几何体上调用computeVertexNormals() 和computeTangents()。 firehose 方法在这里不起作用..

之前的描述

我在运行时使用以三角形镶嵌平面开始的几何体构建网格。我通过定期更新顶点的 z 坐标来使网格变形。这一切都很好，但是我在使用带有 DataTexture 的材质时遇到了问题。

我收到此错误：

glDrawElements: attempt to access out of range elements in attribute 0

我认为这条消息意味着它找不到我的几何图形的 UV 层，但这并不是因为没有尝试插入向量。这是我的代码，将面加载到我的几何中，称为model

for (j=0; j<vh-1; j++) {
for (i=0; i<vw-1; i++) {

    var a = j*vw+i;
    var b = (j+1)*vw+i;
    var c = (j*vw+i+1);
    var d = (j+1)*vw+i+1;

    model.faces.push( new THREE.Face3(a,b,c) );
    model.faces.push( new THREE.Face3(c,b,d) );

    model.faceVertexUvs[0].push( [ new THREE.Vector2(0,0),
                   new THREE.Vector2(1,1),
                   new THREE.Vector2(1,0) ] );
    model.faceVertexUvs[0].push( [ new THREE.Vector2(0,0),
                   new THREE.Vector2(1,1),
                   new THREE.Vector2(1,0) ] );

}
}

然后我将这个模型和材质一起添加到 faceMesh 中，然后将其添加到场景中：

var material = new THREE.MeshBasicMaterial();
var faceMesh = new THREE.Mesh(model, material);

在代码的后面，我向这个材质添加了一个纹理，这就是上述 gL 错误出现的时候（在 Chrome javascript 控制台中）

material.map = new THREE.DataTexture(new Uint8Array(bytes, rgbByteIdx), 
                     inputW, inputH, THREE.RGBFormat);

material.needsUpdate = true;

在构建几何图形时，除了faceVertexUVs 之外，我还尝试使用faceUVs。也许我需要为此使用 MeshBasicMaterial 以外的东西？

【问题讨论】：

标签： three.js

【解决方案1】：

经过多次尝试和错误，我想通了。

这里的问题是我最初设置我的MeshBasicMaterial 没有纹理。添加纹理并为此材质设置needsUpdate 标志后，它继续抛出gL 错误。

通过最初使用特定纹理创建我的材质（使用ImageUtils.generateDataTexture），稍后添加的纹理被系统接受，错误消失了，我成功地在网格上绘制了我的图片。

var texture = THREE.ImageUtils.generateDataTexture(inputW, inputH, initColor );
var material = new THREE.MeshBasicMaterial( { map : texture });
var faceMesh = new THREE.Mesh(model, material);

【讨论】：