(re)creating a 3D Sketch app with Node, React and Three — Part 2
UI <Components/> design
On the previous post I explained why I’m working to re-create this 3d skethching app from ‘scratch’ (with so many NPM packages nothing here really is made out from scratch). On this article I’ll walk you through the process of designing the User Interface and create the barebones for User Interactions (I’ll try to implement most of the code here, let’s see how far I can go without complicating too much).
UI Design
Because we are using React.js, it’s easier if we define the UI based on the UI components, in our case, we will have 5 main UI components, as listed in the right image. Container3D will have all the 3D objects (just a simple three.js canvas), TransformMenu will bring some options like rotation, translate and etc to the planes (I will explain on a next post how those ‘planes’ will work).Toolbar is a simple toolbar, I couldn’t find one that I liked, so I built my own package for that. ObjectTree will display the hierarchy of objects (or just the planes, tbd). And Finally, CubeView, which took some hours of my day to be implemented, is a copy of an Autodesk UI component.
React.js + Three.js = Reusable 3D components
I know.. I said previously we were going to use react-three-renderer as our main three.js wrapper for react. However, after some months developing experimental components using it I think it might be too limiting to use it — even knowing it’s possible to access the renderer, scene and other wrapped variables it’s still to much work to make your code reliable and organized, and it’s also a lot of work to make the code snippets from three.js examples work within this wrapped environment— and we want to use all those cool codes from the threejs.org/examples. That said, let’s start implementing the code.
I wanted to create all those 3d UI component as react components because I think some of them are pretty generic and can be reused in many other projects I have been working on.
Toolbar
Let’s be quick here (we need more time to dig into the main other components). I couldn’t find a minimalist/simple to use the toolbar, so I built an npm package for it react-minimalist-toolbar. This component receives a json to organize its menu hierarchy, simple and efficient.
If you need to install it in other projects, just install the package:
npm install --save react-minimalist-toolbar
CubeView Component
(npm package here: react-cubeview)
Before we dig into the Container3D component, I would like to explore how I copied Autodesk’s UI Component (yeah, the giant from CAD software).
I needed a quick way to rotate and control camera positions and I’ve been using a lot the Autodesk Fusion 360 — It’s a great tool, I switched from SolidWorks to Fusion, and I always recommend it to my co-workers — which bring us to the point: Autodesk spend some time (and money) deploying this very intuitive cube in the top-right corner of its apps:
So, how to copy it? Basically I created a cube, with few textures based on the autodesk’s cubeview , using Sketchapp.
After creating a simple cube, using 6 planes with the following textures, I created the control objects, i.e. many other invisible objects around the cube, that when hovered change opacity and/or color, one for each vertex, edge and face. I gave a name to each one, like ‘f0’ to the top face, whenever the user clicks in one of them, it calls a callback method that checks the control name, therefore rotating the cube to the preset angles (using spherical coordinates).
I had to ‘hack’ a little the default three-orbit-controls, in order to add set methods, like “setPolarAngle(angle)”, very useful whenever you have to rotate your camera to a specific angle. This ‘hacked’ version will also be used in the Container3D component.
I also added the ‘home’ button, I found my self using this option a lot in the Fusion360 app, so I thought it would be very useful to go to change both angles ϕ and θ to 45º.
The Cubeview Position and size is set by css. Because, in this case, we are using it one index about the container3D, the mouse position will affect both components.
Just import it into your applications
npm install --save react-cubeview//index.js
import CubeView from 'react-cubeview';...<div className="cube-view">
<CubeView
aspect={1}
hoverColor={0x0088FF}
cubeSize={2}
zoom={6}
antialias={true}
onUpdateAngles={this.updateAngles}
/>
</div>
The css I used in the previous example (gif) was this:
.cube-view{
position: absolute;
top:30px;
right:30px;
width: 10%;
min-width: 100px;
z-index: 1;
}Container3d
We will create our own react component that encapsulates all three.js elements and methods(renderer, scene, cameras, meshs, lights, init, render[…]). The three.js renderer will be rendering to a <canvas/>.
We will only need to understand a little bit of React Components life cycle. Basically, the usual init( ) method from three.js will be called in the construct and animations will occour independently from react renders. Also let’s rename our three.js render( ) method to _render( ), react already has a render method.
However I think I added too much content to a single post. I will create a post just to this Container3D component separeted, it will be useful for other projects not exactly related to this one.
Next Post — Part 3
I’ve done some tests drawing 3D lines on planes (it worked pretty nicely). So on next post, I’ll focus on how to add objects to the Container3D (I still need to convert it into a npm package) — and how to draw those planes and lines.
Sorry, it’s taking too long for me to write about this app, I’m currently working on my master’s thesis @ MIT media lab, so time became scarce...
✉️ Subscribe to CodeBurst’s once-weekly Email Blast, 🐦 Follow CodeBurst on Twitter, view 🗺️ The 2018 Web Developer Roadmap, and 🕸️ Learn Full Stack Web Development.
