Senior Three.js / A-frame developer
The first thing I liked when worked with ReactJS for the first time is a component system feature. They made components to be groups of DOM elements that interact with each other. This implementation much simplified my further development.
As in DOM, in 3D we have nested elements too. Let’s take Three.js library for example. There we have scene, meshes, lights, renderers, cameras. First of all, you need to create a scene, apply renderer and camera objects that will be used — but that is regarding rendering a 2D image from 3D world data.
To make that image contain some parts of your app you need to fill it with elements such as meshes and lights. When you add a mesh to the scene, mesh becomes a child of a scene and scene is your ‘s mesh parent. Just like in DOM tree.
Let’s take a spaceship mesh and a spaceship component to compare them and their features.
Spaceship mesh can be a spaceship model that has it’s geometry and material. It can’t do stuff specific for spaceship like fire with lasers (lasers require additional meshes) cause it should be described with a script that will work with your mesh transforms and data (geometry, material).
Spaceship component relies on spaceship mesh. It is included in this component and should be used by external script only in some extra cases. Spaceship component comes with its own API that differs from other components cause it is specifically for a spaceship.
It can own a .destroyEnemy() function that will make the mesh change it’s view and do some manipulations on it’s model. Also, it will interact with other meshes (possibly spaceship mesh 's children) such as lasers. They will be used by .destroyEnemy() function to simulate fire.
In both cases, you need to make a script that will handle mesh’s animation. But there are some advantages of doing it in a component way:
Trying to implement it for myself I developed a framework based on Three.js. You may check it on github or its website. My goal was to develop a component system for Three.js environment and I want to share my results with you.
Write your thoughts about “Components in 3D Web” under this article and recommend it if you like the idea☺
Create your free account to unlock your custom reading experience.