如何用三种材料替换框架中的模型材料？答案

【问题标题】：how to replace model material in aframe with three materials?如何用三种材料替换框架中的模型材料？
【发布时间】：2020-06-03 17:46:14
【问题描述】：

我希望用 three.js 材质替换 a-frame 中的标准 PBR 材质。

我在这里放了一个用于材料替换工作的代码笔，但它不适用于 obj 模型，如果知道如何在这里扩展代码以允许 obj，那就太棒了。

https://codepen.io/dadako/pen/ZEQEKRQ

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
    <script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
    <script>
      AFRAME.registerComponent('phong', {
	schema: {
	  color: { default: '#000' },
	},
	update: function() {
	  this.el.getObject3D('mesh').material.dispose();
	  this.el.getObject3D('mesh').material = new THREE.MeshPhongMaterial({
		color: this.data.color,
	  });
	},
  });

AFRAME.registerComponent('lambert', {
	schema: {
	  color: { default: '#000' },
	},
	update: function() {
	  this.el.getObject3D('mesh').material.dispose();
	  this.el.getObject3D('mesh').material = new THREE.MeshLambertMaterial({
		color: this.data.color,
	  });
	},
  });
    </script>
  </head>
  <body>
    <a-scene>
      
      <a-sphere position="-1 0.5 -3" rotation="0 45 0" phong="color: #4CC3D9"></a-sphere>
      <a-sphere position="0 1.25 -5" radius="1.25" lambert="color : #EF2D5E"></a-sphere>
      <a-sphere position="1 0.75 -3" radius="0.5" height="1.5" phong="color : #FFC65D"></a-sphere>
      <a-sphere position="0 0 -4" rotation="-90 0 0" width="4" height="4" lambert="color : #7BC8A4"></a-sphere>
      <a-sky material="shader : flat; color : #ECECEC"></a-sky>
    </a-scene>
  </body>
</html>

由于 https 跨域限制，我无法将 obj 放入这些示例中，但此处有另一个带有 obj 模型文件的示例 https://xr.dadako.com/famicase/shader-test.html

【问题讨论】：

标签： three.js aframe

【解决方案1】：

您需要遍历模型并将材质应用于每个网格子对象：

// assuming the 'model-loaded' event already fired
let mesh = this.el.getObject3D('mesh')
// assuming you want all nodes to have the same material        
var material = new THREE.MeshLambertMaterial({
  color: this.data.color,
});

mesh.traverse(function(node) {
  // change only the mesh nodes
  if(node.type != "Mesh") return;
  // apply material and clean up
  let tmp = node.material
  node.material = material
  tmp.dispose();
})

点赞here。

【讨论】：

谢谢！这非常有效。这是我使用它的代码： -模型>