如何用三种材料替换框架中的模型材料?

问题描述 投票:0回答:1

我正在尝试用Three.js材料替换标准框架中的标准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个回答
0
投票

您需要遍历模型并将材质应用于每个网格子级:

// 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

© www.soinside.com 2019 - 2024. All rights reserved.