尝试通过A-Frame内的three.js编辑材质的侧面属性会导致渲染错误

Question

I've posted about this problem on my blog , as I can only post two links in this question while I still am a noob on Stack Overflow.

Since first posting this question, I've updated it to reflect the progress I've made.

You can see my attempted code in action here , and the key code below:

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");

All I want to be able to do is:

theMaterialOfTheObject3D.side = 2 aka THREE.DoubleSide

But how can I access the material within Three.js? I can't traverse, because as @mrdoob himself says:

Geometries and Materials are not children.

Answer 1

I recommend writing code within components so you don't have to worry about timing. 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>

If you order the components in HTML like so, you might not even need to specify the dependencies .