Try It
https://modular.inthecreat.ing
Overview
For this project I took something I made in the past—a product design concept—and made an interactive website to present it. The product concept was a modular desktop computer, where each main component (CPU, RAM, Graphics Card, SSD, etc.) is a cube/rectangular block, and they can be assembled into a working computer by attaching to each other magnetically.
I designed this product concept before coming to NYU, but I always wanted to create a website to showcase it. As I took this 3.js course, I decided to build out this website and present my design in 3D.
Process
I started by finding the models and renders I created a few years ago and figuring out how to import them into three.js. My first approach was exporting only the geometries of my models from Rhino7 (a 3D modeling software) and applying the materials in three.js. This way the model files could be relatively smaller and I can more easily configure the materials.
However, it turns out Rhino7 is more commonly used for industrial design so the models are not built as meshes like in Blender, so I had a hard time applying the materials in three.js properly, especially for the rounded corners of the cubes.
So I tried another approach. I used the 3D rendering software KeyShot to create renders for my design, so I thought why not go from there? I exported GLB files from KeyShot with the materials baked in, and loaded these models in three.js, which worked alright. But I faced another problem: one of the models had a fabric material that is procedural in KeyShot so it won’t export to GLB properly. I tried several different workarounds and decided to use a regular cloth material in KeyShot so it can export with the material baked in. I found a cloth material on PolyHeaven that is similar to the one used previously and used Photoshop to change the color before loading into KeyShot.
Now I have all the models loaded in three.js, I began implementing the interactions. I used the ScrollTrigger from GSAP and GSAP animations to create a scrolling flow—as the user scroll down the page the camera will center on each of the components and user can click a button to view details. The GSAP ScrollTrigger allows me to easily map GSAP animations to the scrolling of the page.
For viewing each of the modules (cubes) in detail, I created a separate state that will only display the selected module and allow the user to drag around to view the model in 360 degrees. I used GSAP to implement transitions between this details state and the main scrolling page—the camera will back off a bit and the other models fade out.