Find @types/three Examples and Templates

Use this online @types/three playground to view and fork @types/three example apps and templates on CodeSandbox. Click any example below to run it instantly or find templates that can be used as a pre-built solution!

Basic demo

Basic demo Shows how to form self-contained components with their own state and user interaction.

demo

Three TS Starter

Three TS Starter

Shopping

r3f-journey-levels-level-1

r3f-journey-levels-level-1 Level 1 model from Three.js Journey course implemented with react-three-fiber

layer-materials

layer-materials Shows how to form self-contained components with their own state and user interaction.

example-cra

r3f-journey-shaders-patterns

r3f-journey-shaders-patterns Shader patterns example from Three.js Journey course implemented with react-three-fiber

React-Three-Fiber Sandbox 2.5

React-Three-Fiber Sandbox 2.5

complex-materials

complex-materials

react-three-fiber typescript template

react-three-fiber typescript template

example-nextjs

raycast-vehicle

raycast-vehicle Using use-cannon / cannon-es to implement a raycast vehicle.

r3f-journey-classic-techniques-scroll-based-animation

r3f-journey-classic-techniques-scroll-based-animation Scroll based animation example from Three.js Journey course implemented with react-three-fiber

Google Maps and ThreeJS

Google Maps and ThreeJS Use Google Maps and @googlemap/three to add ThreeJS objects to a map. Reference docs: https://googlemaps.github.io/js-three/index.html

three-cube-sample

three-cube-sample

r3f-journey-extra-portal

r3f-journey-extra-portal Portal example from Three.js Journey course implemented with react-three-fiber

csg-house

Find more examples or templates