My personal feelings about how it should be The first thing I liked when worked with for the first time is a component system feature. They made components to be groups of elements that interact with each other. This implementation much simplified my further development. ReactJS DOM How I imagine components to be in 3D As in , in we have nested elements too. Let’s take for example. There we have . First of all, you need to create a scene, apply renderer and camera objects that will be used — but that is regarding rendering a image from world data. DOM 3D Three.js library scene, meshes, lights, renderers, cameras 2D 3D To make that image contain some parts of your app you need to fill it with elements such as . 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 tree. meshes and lights DOM 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 . like fire with lasers cause it should be described with a script that will work with your mesh transforms and data . geometry and material It can’t do stuff specific for spaceship (lasers require additional meshes) (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. that differs from other components cause it is . Spaceship component comes with its own API specifically for a spaceship It can own a 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 such as lasers. They will be used by function to simulate fire. .destroyEnemy() (possibly spaceship mesh 's children) .destroyEnemy() 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 so making a different script won’t be a beautiful decision in your code. use the spaceship multiple times, . 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 more social Components are easier to integrate. You can with others to save their time. They will say “Thanks” to you☺ share your own components Current state of components in 3D Web Trying to implement it for myself . My goal was to develop a component system for environment and I want to share my results with you. I developed a framework based on Three.js. You may check it on github or its website Three.js Write your thoughts about “Components in 3D Web” under this article and it if you like the idea☺ recommend

Component system in interactive 3D of web

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Making of a component library for React

100 Days of AI Day 1: From Newsletter to Podcast, Leveraging AI for Audio Transformation

10 Threats to an Open API Ecosystem

10 Indications That You Should Invest in Automation Via APIs

10 Best Practices for Securing Your API

The Noonification: Getting Your API Into Production (10/28/2022)

Making of a component library for React

100 Days of AI Day 1: From Newsletter to Podcast, Leveraging AI for Audio Transformation

10 Threats to an Open API Ecosystem

10 Indications That You Should Invest in Automation Via APIs

10 Best Practices for Securing Your API

The Noonification: Getting Your API Into Production (10/28/2022)

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps