Load countless 3D objects in Three.js
Code Reading in Three.js 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?
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.
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…