如何使用WebGL在运行时更新立方体的材质？

Question

我正在使用three.js制作动画。 我想动态更新一个立方体网格的材质。 以下是示例：

// create cube geometry 
var material1 = [new THREE.MeshBasicMaterial({color:0xBEE2FF}),.....];
var geometry = new THREE.CubeGeometry(50, 50, 50,0,0,0,material1 );
var cube = new THREE.Mesh(geometry, new THREE.MeshFaceMaterial());

// ...

var material2 = [new THREE.MeshBasicMaterial({color:0xFFFFFF}), ...];
cube.geometry.materials = material2;

如果我使用CanvasRenderer，它可以正常工作。但是当我切换到WebGL Renderer时，它会抛出错误：Uncaught TypeError: Cannot read property 'map' of undefined。

如何在运行时使用WebGL更新立方体的材质？

- lptrung

Answer 1

代码片段中很难知道是什么导致了错误，但您无法更改涉及纹理存在与否的材料。尝试将所有材料保持相同的类型。此外，您可能需要将material.needsUpdate标志设置为true。

您可以在Three.js维基上找到有关如何使用WebGLRenderer更新内容的更多详细信息和示例。

https://github.com/mrdoob/three.js/wiki/Updates

此外，这里有一个与您似乎要尝试做的事情类似的fiddle：http://jsfiddle.net/2FZU7/51/

编辑：fiddle已更新为three.js r.58

- WestLangley

Answer 2

我认为问题在于你在立方体上设置了“materials”而不是“material”。

cube.material = material2;
material.map = texture;
material.needsUpdate = true;

- Brandon.Blanchard