3D Modeling HTML — Part 1
Concept of how to use 3d modeling tools to design and export React Components. Part 2
Recently, due to a project’s requirement, I had to develop a web app to visualize real-time data from a physical structure, with 36+ sensors around it. I could’ve just programmed a standard dashboard, but most of the sensors have more meaning if visualized in space. Ok, I needed 3D visualizations, for that I built a tool called Reviz3D to do similar things with real-time data and 3d meshes.
However, now it needed interactive 2D visualizations — have you ever used react_vx? Simple and elegant color pallet — in 3D positions, e.g., line charts, radar charts and so on. I tried something in this direction in Reviz3D early experiments, rendering html5 canvas as textures in planes, but as you can imagine, no user interaction, just static images.
Three.js has an example using CSS3DRenderer, which uses CSS3D transforms to locate, scale and rotate <div> elements according to a THREE.Camera object. In other words, 3D Divs. These are precisely the libraries I used to create the view about, combined with a React Wrapper around it, was pretty simple to implement changes. However the process to locate point by point, for the 36+ sensors was slow, combine it with the compiling time for each change, and you get a non-scalable workflow.
To quickly design 3D React components, developers need some easy way to implement the changes in 3D space.
Authors from libraries like Aframe understood it and packaged an “editor mode” with the lib. However, there is still a lack of implementation for simpler react components.
That’s when I remembered Cinema4D; It’s one of the most friendly 3D modeling tools I ever used. Also, I didn’t want to reinvent the wheel (by now) when it comes to 3D interactions with planes.
Here is the workflow: in C4D, position your planes in the space, change the sizes, rotation.. select all planes, then call the cinema4d-3divs python script.. and that’s it!
cinema4d-3divs.py will create two files, the first is a JSON file with an array of planes ({name, position, rotation, width ,height}), the second is a JSX file, containg the React component, just populate your HTML code inside the <Div3D>.. and done ✅ .
The same concept can be applied to many other design tools. Imagine to design web pages mixed with 3D models, in a very fluid way..
For Part1 that’s it. I’ll keep implementing the npm module react_3divs. And the final release will be with Part 2— exploring more the ‘react’ side of all this.
✉️ Subscribe to CodeBurst’s once-weekly Email Blast, 🐦 Follow CodeBurst on Twitter, view 🗺️ The 2018 Web Developer Roadmap, and 🕸️ Learn Full Stack Web Development.
