https://github.com/gispada/react-3d-experiments

Project to experiment with 3D in React, using three.js and React Three Fiber.
https://github.com/gispada/react-3d-experiments

3d react react-three-fiber threejs webgl

Last synced: 19 days ago
JSON representation

Project to experiment with 3D in React, using three.js and React Three Fiber.

• Host: GitHub
• URL: https://github.com/gispada/react-3d-experiments
• Owner: gispada
• Created: 2022-12-04T17:04:13.000Z (about 2 years ago)
• Default Branch: main
• Last Pushed: 2022-12-04T18:29:27.000Z (about 2 years ago)
• Last Synced: 2023-03-06T19:17:41.371Z (almost 2 years ago)
• Topics: 3d, react, react-three-fiber, threejs, webgl
• Language: TypeScript
• Homepage: https://react-3d-exp.vercel.app
• Size: 91.5 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# React 3D Experiments

A project to experiment with 3D in a React application, using **three.js** and **React Three Fiber**. The final result can be seen [here](https://react-3d-exp.vercel.app/).

## Available Scenes

The following are the available 3D scenes, with their corresponding url.

### Frigate in the sea `/frigate-3d`

A 17th century frigate in an ocean environment. The ship follows the waves' movement, thanks to this [implementation](https://sbcode.net/threejs/gerstnerwater/) of Gerstner waves, slightly modified.

It is also possible to walk around the ship using `W`, `S` and the mouse. A basic collisions detection system has been created to move around the ship model: the camera moves at a fixed height over a separate geometry used as a walking surface and can't go beyond it.

> [Model](https://sketchfab.com/3d-models/aleksandr-class-archipelago-frigate-f82f40ca04d84a24868a453c4e3a16c2) by "Museovirasto Museiverket Finnish Heritage Agency". The original model's polygon count was too high, so it's been optimized in Blender as much as possible.