The first thing that I liked when worked with ReactJS for the first time is the component system feature. They made components to be groups of DOM elements that interact with each other. This implementation much simplified my further development.
How I Imagine Components to Be In 3D
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 and 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 DOMtree.
Let’s take a spaceship mesh and a spaceship component to compare them and their features.
3D component hides from our eyes.
Spaceship Mesh (element)
Spaceship mesh can be a spaceship model that has its geometry and material. It can’t do stuff specifically for a spaceship, like fire with lasers (lasers require additional meshes), because it should be described with a script that will work with your mesh transforms and data (geometry, material).
The 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 its view and do some manipulations on its model. Also, it will interact with other meshes (possibly spaceship mesh 's children) such as lasers. They will be used by the .destroyEnemy() function to simulate fire.
Why Components Are Better
In both cases, you need to make a script that will handle the mesh’s animation. However, there are some advantages of doing it in a component way:
You may use the spaceship multiple times, so making a different script won’t be a beautiful decision in your code.
Components are more social. You can download someone’s component to save your time on doing same work again. Simply add a few lines of code following developer’s API.
Components are easier to integrate.
You can share your own components with others to save their time. They will say “thanks” to you.
Current State of Components in 3D Web
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 the Three.js environment and I want to share my results with you.