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

How to update material of cube on runtime using WebGL?

本文关键字：数据集 更新 何使用 WebGL 运行时      更新时间：2023-09-26

我正在使用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/

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

我认为问题在于您在多维数据集上设置的是"materials"，而不是"material"。

cube.material = material2;
material.map = texture;
material.needsUpdate = true;
相关文章：