Infinite scene with Threejs and InstancedMesh
Hello, today I will explain how I created the 3D infinite scene of the website of the japanese artist Akino Kogomi:
The scene
First, we want to create a Threejs scene.
We set our THREE environnement. The scene, the camera and the renderer.
Responsive !
Next we create an InstancedMesh of 4 cubes. We will define a “section” of 200 units, each section will be the part that we want to repeat.
To place every instanced mesh we could use Matrix4() with its setPosition/scale… methods but I find it easier to manipulate and use the matrix of an Object3D. So we create a dummy object, update its positions and use the updateMatrix() method to get its updated matrix. After that, we use the setMatrixAt(instancedId, dummy.matrix) method of our instanced mesh to position all our instanced meshes.
From that point, we have our InstancedMesh placed in the scene, our environment ready, we can merge everything together and add some helpers for the next step.
When it’s all merged, we can see our scene with the InstancedMesh in it :
Perfect, we got everything ready to add the loop !
The infinite loop
To manage the loop we will add a new parameter to our setInstancedMeshPositions function that will provide the actual position of the camera. We just have to multiply this position by the size of the section (xSectionPosition).
Finally, we can move the camera on the x-axis and call our setInstancedMeshPositions with the position of the camera on a section width’s based. Every time the camera move to a new section, we will move all the InstancedMesh positions based on the position of the camera.
