Wind River
Tech Stack
Webflow, React, React Three Fiber, PixiJS, Three.js, Sass, Vite, AWS S3, AWS Route 53, Github Actions
Summary
Triptych created a high-fidelity 3D interactive map for Wind River Built, a modular home builder, to showcase their capabilities to developers, architects, realtors, and designers. The map features a sweeping landscape with various structure types, allowing users to explore specific neighborhoods, view site plans, and experience immersive 3D house models. With intuitive navigation and multiple zoom levels, users can easily visualize the potential of Wind River's offerings. This interactive experience not only highlights Wind River's versatility but also inspires and motivates prospective clients to engage with the company.
My Role
This project presented three main challenges:
- Integrating custom JavaScript into a CI/CD pipeline for deployment to a Webflow website
- Consuming data from Webflow's CMS
- Utilizing WebGL for 2D and 3D contexts
To address these, I created a CI/CD pipeline using GitHub Actions. The custom JavaScript resides in a Git repository, and pushes to the main branch triggered a build using Vite. The compiled static assets were then uploaded to an AWS S3 bucket, and a cache was invalidated for a domain managed by AWS Route 53, which pointed to these assets.
For Webflow CMS data consumption, I implemented a Webflow embeddable script component that iterated through CMS entries and stored them in the global JavaScript window object. This allowed our custom JavaScript to consume the data on client-side render and initialize a frontend store with Zustand using the CMS data.
To create a 2D canvas map, I used the PixiJS library. A depth effect was achieved by stacking two images: the main image and a corresponding depth map. Clicking elements on the map zoomed into an interior page with a “street view” of various tiny home models. The experience on these interior pages was created using React Three Fiber, with a sphere geometry and a backside-rendered environment image to generate the “street view” scene.