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

This page summarizes the projects mentioned and recommended in the original post on dev.to

Our great sponsors
  • SurveyJS - Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App
  • WorkOS - The modern identity platform for B2B SaaS
  • InfluxDB - Power Real-Time Data Analytics at Scale
  • death-stranding-ui

    Death Stranding UI made in React

    Demo Link Demo repository

  • awesome-react-three-fiber

    🍕 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

  • 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

    💊 Valtio makes proxy-state simple for React and Vanilla

    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)

  • gltfjsx

    🎮 Turns GLTFs into JSX components

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

  • gltf-pipeline

    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.

  • 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.

  • component-material

    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

    ♿️ 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

    🌋 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

    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

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

    twind (styling solution based on Tailwind)

NOTE: The number of mentions on this list indicates mentions on common posts plus user suggested alternatives. Hence, a higher number means a more popular project.

Suggest a related project

Related posts