我正在使用 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 ?
最佳答案
对于代码片段,很难知道是什么导致了错误,但您不能更改涉及纹理存在与否的 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
关于javascript - 如何使用 WebGL 在运行时更新立方体的 Material ?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11468558/