javascript-如何使用WebGL在运行时更新多维数据集的材质？

我正在使用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：无法读取未定义的属性“ map”

如何使用WebGL在运行时更新多维数据集的材质？

解决方法:

使用代码片段,很难知道导致错误的原因,但是您不能更改涉及纹理是否存在的材质.尝试保持所有相同类型的材料.另外,您可能需要将material.needsUpdate标志设置为true.

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

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

另外,这是一个小提琴,它所做的事情与您似乎想做的类似：http://jsfiddle.net/2FZU7/51/

编辑：小提琴更新为three.js r.58

标签：three-js,javascript
来源： https://codeday.me/bug/20191101/1981019.html