Component system in interactive 3D of web

My personal feelings about how it should be

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.

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, 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.

3D component hides from our eyes

Spaceship mesh (element)

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

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.

Why components are better

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:

• 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 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☺