Water Drops Built with React Three Fiber（Three.js）
ABOUT
In this application, the Raymarching spheres have collision detection. This allows the spheres to be dispersed using the mouse.
What we are doing is the same as the application we created before. However, the code is more sophisticated. https://github.com/nemutas/r3f-normal-color
https://nemutas.github.io/r3f-water-drops/
Technology
- TypeScript
- React（Create React App）
- React Three Fiber（Three.js）
- Raymarching
- use-cannon
Reference
This is a technical document on Raymarching. They are all very easy to understand and are excellent documents.
- wgld.org – Japanese
- Inigo Quilez – articles
- Raymarching simple scene #48
- Live Coding and Alien Orb – Modeling & Shadows
Physics simulation using use-cannon.
License
This source code is not MIT License.
❌ Commercial use is prohibited. ❌ Redistribution is prohibited. ❌ Diversion is prohibited.（Incorporate all of the code into the project, etc.） ✅ You can look at the application and reproduce the representation. ✅ You can use parts of the code.