对于 future 的观众，我能够通过使用 mesh.material.map.image.src = texture;
原始问题:
作为我的 ThreeJS 项目的一部分，我需要更改网格上的纹理。不幸的是，我无法让三号更新到新纹理。
我已经尝试了以下 SO 问题中提到的所有事情，但到目前为止没有任何效果:
- three.js change texture on material
- How to update texture in ThreeJS with loaded image data?
- Three.js Update Texture image
- Changing texture and color on Three.js collada object
- 还有更多...
我要更改的纹理是 scene.children[0].children[1].material.map.sourceFile 结构如下所示:
- 场景场景
- 3DOBJECT 横幅
- MESH 标志
- MESHBASICMATERIAL flag_M
- 纹理 flag_MT
- MESHBASICMATERIAL flag_M
- MESH 标志
- 3DOBJECT 横幅
flag_MT 纹理是我要更新的纹理，这些是我尝试过的以下方法:
flag_M.needsUpdate = true;flag_MT.needsUpdate = true;flag_MT = THREE.ImageUtils.loadTexture(texture);texture 为 base64 数据字符串- 几乎重新制作整个对象并将其替换到场景中
谢谢。
编辑:代码的重要部分:
初始化()
flag_MT = THREE.ImageUtils.loadTexture(app.setFlagTexture());
flag_MT.magFilter = THREE.NearestFilter;
flag_MT.minFilter = THREE.NearestFilter;
flag_M = new THREE.MeshBasicMaterial({map: flag_MT});
flag_M.needsUpdate = true;
flag_T = { //easyVectory64 just provides a clean function for making vector maps
u: easyVector64(2, 62, 20, 1), //up face
d: easyVector64(22, 62, 20, 1), //down face
f: easyVector64(1, 23, 20, 40), //front face
b: easyVector64(22, 23, 20, 40), //back face
l: easyVector64(0, 23, 1, 40), //left face
r: easyVector64(41, 23, 1, 40)}; //right face
flag_G.faceVertexUvs[0] = []; //Map texture to mesh
flag_G.faceVertexUvs[0][0] = [flag_T["r"][0], flag_T["r"][1], flag_T["r"][3]];
flag_G.faceVertexUvs[0][1] = [flag_T["r"][1], flag_T["r"][2], flag_T["r"][3]];
flag_G.faceVertexUvs[0][2] = [flag_T["l"][0], flag_T["l"][1], flag_T["l"][3]];
flag_G.faceVertexUvs[0][3] = [flag_T["l"][1], flag_T["l"][2], flag_T["l"][3]];
flag_G.faceVertexUvs[0][4] = [flag_T["u"][0], flag_T["u"][1], flag_T["u"][3]];
flag_G.faceVertexUvs[0][5] = [flag_T["u"][1], flag_T["u"][2], flag_T["u"][3]];
flag_G.faceVertexUvs[0][6] = [flag_T["d"][0], flag_T["d"][1], flag_T["d"][3]];
flag_G.faceVertexUvs[0][7] = [flag_T["d"][1], flag_T["d"][2], flag_T["d"][3]];
flag_G.faceVertexUvs[0][8] = [flag_T["f"][0], flag_T["f"][1], flag_T["f"][3]];
flag_G.faceVertexUvs[0][9] = [flag_T["f"][1], flag_T["f"][2], flag_T["f"][3]];
flag_G.faceVertexUvs[0][10] = [flag_T["b"][0], flag_T["b"][1], flag_T["b"][3]];
flag_G.faceVertexUvs[0][11] = [flag_T["b"][1], flag_T["b"][2], flag_T["b"][3]];
flag_G.applyMatrix(new THREE.Matrix4().makeTranslation(0, -20, 0));
flag = new THREE.Mesh(flag_G, flag_M);
app.setFlagTexture()
//Bunch of code that pre-mixes several textures into a single texture
var texture = "data:image/png;base64,..."; //texture being a base64 png data string
flag_MT = THREE.ImageUtils.loadTexture(texture);
if(flag_M !== undefined){ //because flag_M is undefined on the first call
flag_M.needsUpdate = true;
}
return texture;
请您参考如下方法:
我在我的项目中遇到了类似的问题，您的第一次尝试应该成功了 flag_M.needsUpdate = true;
您可以使用 ImageUtils、flag_MT = THREE.ImageUtils.loadTexture(texture); 重新创建纹理，然后执行 flag_M.needsUpdate = true; 这应该可以工作。
但如果您过于频繁地更改纹理，这个解决方案确实不是最好的，您应该考虑自己更新纹理对象中的图像源，然后将 needsUpdate 标志设置为真。
例如在我的代码中我这样做了:
mesh.material.materials[0].map.image = { data: array, width: 20, height: 20 };
mesh.material.materials[0].map.needsUpdate = true;
mesh 是一个带有 FaceMaterial 的立方体。 array 是一个 Uint8Array 缓冲区，其中包含 RGB 格式的所有数据并完成了工作。 如果可以，出于性能目的，请避免删除和创建内容只是为了更改它。与仅更新纹理缓冲区相比，您的 GPU 和总线执行此操作的成本更高。
并且请发布您必须查看其中错误的代码，因为您的第一次尝试应该已经完成了您想要的。
