4

我正在使用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 在运行时更新立方体的材质？

4

2 回答 2

4

使用代码片段，很难知道导致错误的原因，但您无法更改涉及纹理存在与否的材质。尽量保持所有材料的类型相同。此外，您可能需要将material.needsUpdate标志设置为true.

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

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

此外，这是一个类似于您似乎正在尝试做的事情的小提琴：http: //jsfiddle.net/2FZU7/51/

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

于 2012-09-10T13:44:37.360 回答
2

我认为问题在于您在立方体上设置“材料”而不是“材料”。

cube.material = material2;
material.map = texture;
material.needsUpdate = true;
于 2017-01-26T23:39:15.897 回答