Trying to add alphaMap to all trees behind the character in my proof-of-concept and it's not working

[ericdrosas87]

Screenshot of the PoC
(These are either stock assets or otherwise found on the internet and will not be used in any game I create, they're just being used for self-study)

I'm doing some self-study and using Enable3D's experimental "flat" API, hope that doesn't complicate things. I'm trying to create an Octopath Traveler billboard style proof-of-concept and I'm running into an issue with trying to set the alphaMap for trees that are "behind" the character so they fade/opacity drops. So far, only one tree randomly faded after several reloads of the scene.

Here is where I add the randomly placed trees:

        async createTrees() {
          const texture = await this.load.texture('tree1');
          texture.magFilter = THREE.NearestFilter;
          texture.minFilter = THREE.LinearMipMapLinearFilter;

          for(let i = 0; i < 40; i++) {
            const tree = new FLAT.SpriteSheet(texture, { width: 68, height: 87 })
            tree.setScale(0.05);
            tree.position.set(this.getRandomPosition(-30, 30), 2.2, this.getRandomPosition(-30, 30));
            tree.name = "tree";
            this.scene.add(tree);
            //treeIDs.push(tree.id);
          }

        }

Ignore the commented out line, I first tried to track the IDs of all the trees and loop in the update() method to no avail.

And my code in the update() method:

          if(this.scene.getObjectByName("tree").position.z > this.hero.position.z && 
             this.scene.getObjectByName("tree").material.alphaMap == null) {
              this.scene.getObjectByName("tree").material.alphaMap = this.alphaTree;
          }

this.alphaTree is defined in the create() method and it's the alpha map of the tree asset.

Is there something I'm doing wrong? Will my code in the update() method not reference all trees? If not, how do I reference all trees and assign properties to individual ones that meet a certain criteria? Or is it something else I'm doing wrong?

Any help would be greatly appreciated!

[yandeu]

I have never used getObjectByName. I would add them to a new Map().

To add alpha, you could do:

tree.material.transparent = true
tree.material.opacity = 0.5

Do you render the trees in 2d or 3d space?

Can you please upload your tree and alphaTree?

[ericdrosas87]

Found the answer!

          let tHero = this.hero;
          this.scene.traverse(function(child) {
            if(child.name == "tree") {
              if(child.position.z > tHero.position.z) {
                child.material.transparent = true;
                child.material.opacity = .5
              }
            }
          });

So I the code kept breaking when I tried to manually store IDs of all the trees as I was adding them to the scene and manually looping over them. I found this.scene.traverse as a means of traversing over all objects in the scene that have the same name. Otherwise getObjectByName() as you might imagine returns the first instance of that object that it finds.

I appreciate you looking into it @yandeu, and for the tip on tree.material.opacity!

[yandeu]

Glad you found the solution.

Instead of child.position.z you should also be able to use child.setDepth().

[yandeu]

Also, I recommend always using a unique name. For example tree-1, tree-2 and so on.

If you use physics, a unique name is required.

[ericdrosas87]

Physics applied to the trees? Or physics in general?

[yandeu]

General, in enable3d