Our great sponsors
-
Demo Link Demo repository
-
This article requires some knowledge about threejs and react-three-fiber. If you have no experience in threejs the best resource on the web to get started is the course made by Bruno Simon: ThreejsJourney If you’re looking for resources on react-three-fiber you can take a look at this repository
-
SurveyJS
Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.
-
react-three-fiber
Discontinued 🇨🇭 A React renderer for Three.js [Moved to: https://github.com/pmndrs/react-three-fiber] (by react-spring)
react-three-fiber (for the 3D scene)
-
valtio (state management)
-
drei
Discontinued 🌭 useful helpers for react-three-fiber [Moved to: https://github.com/pmndrs/drei] (by react-spring)
drei (react-three-fiber helpers collection)
-
convert it to a react component using gtltfjsx locally or the new online version
-
using draco to convert our gltf file to GLB and compress it at the same time.
-
WorkOS
The modern identity platform for B2B SaaS. The APIs are flexible and easy-to-use, supporting authentication, user identity, and complex enterprise features like SSO and SCIM provisioning.
-
For the translucent blue color we can use a simple shader by using component-material on the first material
-
To simulate the selected state you can try to use react-three-a11y. By wrapping our model with the component we will have access to hover, focus, and pressed state through useA11y() hook. We can try to display a SelectedMaterial based on the hover state for example.
-
Don’t hesitate to put every configuration variable (columns, lines, layers, spacing …) for this grid in a tool like leva to make it look like what you want.
-
For the sounds part we’re going to create a sound manager component using useSound hook from Joshua Comeau. After that, we’re going to put our sound functions newly-created into our state so that we can everywhere in the app.
-
twind (styling solution based on Tailwind)
Related posts
- figured out an outline shader, heres the code (raymarching)
- React Lazy Loading react-three-fiber component
- Give feedback to my portfolio
- GitHub - riipandi/vite-react-template: Starter template React with Vite, React, Tailwind CSS, React Router, React Hook Form, Vitest, and Testing Library.
- Accessibility and Headless UI Libraries - Adobe, Radix, Tailwind, MUI