Pinus tree made only with Three.js and a texture

Hi Three.js followers,

Pinus tree made only with Three.js and a texture

Unsatisfied with trees texturized with png image on big leaves. With objects inside the tree, the big leaves appear.

Here is the result made only with Three.js tools.

PS: Shadows take some time to be computed.

the link without shadows:

the link with shadows:

Again, Thanks for the great Three.js Team!

José Roberto Lazzareschi



Trees are difficult. Nice work! can your approach be used as source of an instance mesh?


Thank You! :wink:
Sorry about the instance mesh.
I have no knowledge about it.

Merging of geometries is an option for better performance too :slight_smile:

I always look for clone() option, and do the rotations and positions by the hard way.
And use a small cube (and add the mesh to it ) to fix the position and rotating point of the mesh (hard way too).
I will look for examples of merging meshes.
Thank You! :smiley:

Kind of a fir tree of 20K of rounded boxes (InstancedMesh).



I waited a minute or two, but they still looked the same as right after the page loaded :thinking:

1 Like

You, sir, have a beautiful Pinus. Thank you for sharing the picture with us.


Thank You, very very much… :slightly_smiling_face:

Yes, the code is the same… A friend of mine asked me to create a version with shadows.
Shadows make a magical effect on the scene.

I applied merging in the formation of the leaves…
Thank You for the sugestion. :slightly_smiling_face:

1 Like

the shadow became pixrlated now

pointLight.shadow.mapSize were 1024,
passed to 2048!