three.js：在运行时从简单材质切换到多个材质

Question

three.js：在运行时从简单材质切换到多个材质

javascriptthree.js

4

r65

你好，

我需要在运行时从简单材质切换到多重材质。但是无法实现。也许我遗漏了一些明显的东西？

我的测试代码如下（jsfiddle: http://jsfiddle.net/plotnik/8RtTy/3/）。对象最初被分配一个简单材质，多重材质在render()调用后被分配以模拟运行时替换。

var geom = new THREE.CubeGeometry(1, 1, 1);

var materialSimple = new THREE.MeshLambertMaterial({color: 0x020202});

// 6-color 
var materialMulti = new THREE.MeshFaceMaterial([
    new THREE.MeshLambertMaterial( { color: 0xff0000 }),
    new THREE.MeshLambertMaterial( { color: 0xffff00 }),
    new THREE.MeshLambertMaterial( { color: 0xffffff }),
    new THREE.MeshLambertMaterial( { color: 0x00ffff }),
    new THREE.MeshLambertMaterial( { color: 0x0000ff }),
    new THREE.MeshLambertMaterial( { color: 0x000000 })
    ]);

var mesh = new THREE.Mesh(geom, materialSimple);

scene.add(mesh);

var render = function () {
    requestAnimationFrame(render);

    mesh.rotation.x += 0.01;
    mesh.rotation.y += 0.01;

    renderer.render(scene, camera);
};

render();

// switch to multi-material
mesh.material = materialMulti;
mesh.material.needsUpdate = true;

代码运行结果未达到我预期的效果。看起来仅仅是将materialMulti[0]（红色）赋值给整个网格。感谢您的帮助。

- plotnik

1

这种方法对你的使用情况是否令人满意？http://jsfiddle.net/8RtTy/4/ - WestLangley

我更新了这个fiddle，使得材料每4秒钟更换一次，提醒用户（我很难看到变化）。 - vabada

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- WestLangley · Accepted Answer

在WebGLRenderer中运行时切换材质可能会很棘手。您可以在Wiki文章使用WebGLRenderer更新物体中了解更多信息。

在您的情况下，您可以始终使用MeshFaceMaterial，并通过仅更改材料颜色来实现所需的效果。

编辑：MeshFaceMaterial已被弃用。现在，您可以直接将材料数组传递给Mesh构造函数，如下所示：

var mesh = new THREE.Mesh( geometry, materials_array );

three.js r.91