javascript - 如何使用 WebGL 在运行时更新立方体的 Material ？

Question

我正在使用 three.js 制作动画。我想动态更新立方体网格的 Material 。这是示例:

// 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 渲染器时，它会抛出错误:Uncaught TypeError: Cannot read property 'map' of undefined

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

Answer 1

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

您可以在 Three.js wiki 中找到有关如何使用 WebGLRenderer 进行更新的更多详细信息和示例。

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

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

编辑:为 three.js r.58 更新了 fiddle