Aframe 环境光不适用于 gltf model

Question

我用 glft 尝试了一个简单的 aframe 演示

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Test</title>
    <script src="../../../dist/aframe-master.js"></script>
    <script src="js/aframe-extras.loaders.min.js"></script>
  </head>
  <body>
    <a-scene  >
     <a-entity light="type: ambient; intensity: 0.2"></a-entity>        
<a-entity     
        gltf-model="assets/cow02.glb"
        scale="100 100 100"
         rotation='0 0 0'
         animation="property: rotation; to: 0 360 0; loop: true; dur: 20000"
        position="-2 1 -5"
      > 
      </a-entity>     
    </a-scene>
  </body>
</html>

现在的问题是这个<a-entity light="type: ambient; intensity: 0.2"></a-entity>不起作用，我的意思是添加这个光后没有任何变化。

Answer 1

我不确定gltf-loader如何决定使用什么材料，但您的模型材料似乎很简单，可以解释为MeshBasicMaterial 。 根据文档 - 它不受任何灯光的影响。

可能如果您设置金属度、粗糙度、添加普通 map - 加载器将使用MeshStandardMaterial （或具有这些属性的任何其他材料 - 受光照影响）。

如果要使用 three.js 更改材质，可以编写如下组件：

// wait until the model is loaded
this.el.addEventListener("model-loaded", e => {
  // grab the mesh 
  let model = this.el.getObject3D("mesh");
  // find the node with the basic material     
  model.traverse(function(node) {
    // ignore bones and other nodes without any material 
    if (!node.material) return;

    // keep the reference to the old material - we want to dispose it later
    var tmp = node.material
    // substitute the material     
    node.material = new THREE.MeshStandardMaterial({
       skinning: true, // the original material is using skinning
       map: node.material.map // we want the original texture
    });
    // update and clean up
    node.material.needsUpdate = true;
    tmp.dispose()
  }
})
  

在这个故障中检查一下。