javascript - 尝试通过 A-Frame 内的 Three.js 编辑 Material 的侧面属性会导致渲染不正确

Question

我发布了关于this problem on my blog的信息，因为我在这个问题上只能发布两个链接，而我仍然是 Stack Overflow 上的菜鸟。

自从第一次发布此问题以来，我已对其进行了更新以反射(reflect)我所取得的进展。

你可以看到我的attempted code in action here ，关键代码如下:

var side = this.data.side; //should be 2, the default value, all I want to be able to do is material.side = side; - change the side property of the material to
var object3D = this.el.object3D;

console.log("Starting traverse of object3D");
object3D.traverse( function( child ){
    console.log("Traversing...")
    console.log("The current child object is: ", child);
    console.log("The type of the child is", typeof child);
    if ( child instanceof THREE.Group ) {
      console.log("Found a THREE.Group!")
      child.traverse(function(childOfChild) {
        console.log("Traversing the traversing...")
        console.log("The current child of child object is: ", childOfChild);
        console.log("The type of the child is", typeof childOfChild); //how is the mesh object always one away from me?
        if ( childOfChild instanceof THREE.Mesh ) {
          console.log("Found a THREE.Mesh!")
        }
      }
      );
    }
  }
);
console.log("Finished traverse of object3D");

我想要做的是:

theMaterialOfTheObject3D.side = 2 又名 THREE.DoubleSide

但是我如何访问 Three.js 中的 Material ？我无法遍历，因为正如 @mrdoob 自己所说:

Geometries and Materials are not children.

Answer 1

我建议在组件内编写代码，这样您就不必担心时间问题。 https://aframe.io/docs/0.3.0/core/component.html

AFRAME.registerComponent('material-side-modifier', {
  dependencies: ['yourlandscapecomponent'],  // Or wait on an event.

  init: function () {
    // Modify material side here.
  }
}); 

<a-entity yourlandscapecomponent material-side-modifier>

如果您像这样在 HTML 中订购组件，您甚至可能不需要指定依赖项。