Load countless 3D objects in Three.js

Code Reading in Three.js Example

Today’s Example

Today’s Example

I have been practising to quickly read an example code in three.js repository. The example that I have scanned is to load numerous objects with infinite repetitive animation on a particular geometric object.

Logic

The logic to animate is broadly the following procedure.

1. Set up Scene, Camera, Mesh placed on a scene
2. load flower model.
3. set up flower objects using model
4. render
 * reset and replace the flower if it has been dead
 * update scale

In this article, I will pick up how the flower object is regenerated at constant.

Get Object from Object Name

There are many flowers when launching the example code. Where do they come from? Do we have to load the objects, respectively?

countless flower objects

We do not have to load thousands of models at a time but do it once. What we consider about the model is the name of the flower object. To be scaling it up in every frame, we have to manipulate each object consisted of a stem and a blossom. The names are already assigned in the ready-made model in Three.js repository. You can find them on Blender below.

Blender display

Blossom and Stem

Then we can create geometries using the names in Three.js. The key method is THREE.Object3D.getObjectByName. These names in the model are searchable through with the function at the side of Three.js.

var loader = new GLTFLoader();loader.load('./models/gltf/Flower/Flower.glb', function (gltf) {
 var _stemMesh = gltf.scene.getObjectByName('Stem');var _blossomMesh =   
 gltf.scene.getObjectByName('Blossom');
 stemGeometry = new THREE.InstancedBufferGeometry();
 blossomGeometry = new…