Over a million developers have joined DZone.

Component System in Interactive 3D of Web

DZone's Guide to

Component System in Interactive 3D of Web

Developer Alexander Buzin offers his personal opinion on what the component system in the interactive 3D of the web should be.

· Web Dev Zone ·
Free Resource

Jumpstart your Angular applications with Indigo.Design, a unified platform for visual design, UX prototyping, code generation, and app development.

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

Spaceship Component

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.

Take a look at an Indigo.Design sample application to learn more about how apps are created with design to code software.

web dev ,graphics ,3d animation

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}