How to reproduce Death Stranding UI with react and react-three-fiber

• death-stranding-ui

  1 44 1.8 JavaScript

  Death Stranding UI made in React

  Demo Link Demo repository

• SaaSHub

  www.saashub.com featured

  SaaSHub - Software Alternatives and Reviews. SaaSHub helps you find the best software and product alternatives

  

• awesome-react-three-fiber

  1 172 0.0

  🍕 A loose collection of cool r3f links, gifs, people, stuff

  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

• react-three-fiber

  2 12,872 9.7 TypeScript

  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

  49 9,259 8.8 TypeScript

  🧙 Valtio makes proxy-state simple for React and Vanilla

  

  valtio (state management)

• drei

  1 1,303 9.6 JavaScript

  Discontinued 🌭 useful helpers for react-three-fiber [Moved to: https://github.com/pmndrs/drei] (by react-spring)

  

  drei (react-three-fiber helpers collection)

• gltfjsx

  58 5,001 7.3 JavaScript

  🎮 Turns GLTFs into JSX components

  

  convert it to a react component using gtltfjsx locally or the new online version

• gltf-pipeline

  3 1,972 4.1 JavaScript

  Content pipeline tools for optimizing glTF assets. :globe_with_meridians:

  

  using draco to convert our gltf file to GLB and compress it at the same time.

• component-material

  1 157 1.2 TypeScript

  Discontinued 🧩 Compose modular materials in React

  

  For the translucent blue color we can use a simple shader by using component-material on the first material

• react-three-a11y

  7 564 5.9 TypeScript

  ♿️ Accessibility tools for React Three Fiber

  

  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.

• leva

  11 5,124 1.5 TypeScript

  🌋 React-first components GUI

  

  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.

• use-sound

  8 2,782 5.3 JavaScript

  A React Hook for playing sound effects

  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

  30 3,824 8.4 JavaScript

  The smallest, fastest, most feature complete Tailwind-in-JS solution in existence.

  

  twind (styling solution based on Tailwind)

Suggest a related project