Examples

Showcase

<Grid cols={1}> <li> <p>[](https://pmndrs.github.io/examples/shopping) -- <span>selection</span>, <span>tiltshift</span></p> </li> </Grid> <Grid cols={2}> <li> <p>[](https://pmndrs.github.io/examples/cards-with-border-radius) -- <span>border-radius</span></p> </li> <li> <p>[](https://pmndrs.github.io/examples/threejs-journey-lv-1-fisheye) -- <span>bruno</span>, <span>simon</span>, <span>threejs-journey</span>, <span>fisheye</span></p> </li> <li> <p>[](https://pmndrs.github.io/examples/lusion-connectors) -- <span>lusion</span>, <span>n8ao</span></p> </li> <li> <p>[](https://pmndrs.github.io/examples/ecctrl-fisheye) -- <span>ecctrl</span>, <span>character-controller</span></p> </li> <li> <p>[](https://pmndrs.github.io/examples/monitors) -- <span>effects</span>, <span>bloom</span>, <span>dof</span>, <span>reflections</span></p> </li> <li> <p>[](https://pmndrs.github.io/examples/flying-bananas) -- <span>effects</span>, <span>dof</span>, <span>bananas</span></p> </li> <li> <p>[](https://pmndrs.github.io/examples/t-shirt-configurator) -- <span>configurator</span>, <span>t-shirt</span>, <span>soft-shadows</span></p> </li> <li> <p>[](https://pmndrs.github.io/examples/caustics) -- <span>caustics</span>, <span>effects</span>, <span>soft-shadows</span></p> </li> </Grid> <Grid cols={4}> <li> <p>[](https://pmndrs.github.io/examples/ssgi-spheres-with-rapier-physics) -- <span>ssgi</span>, <span>rapier</span></p> </li> <li> <p>[](https://pmndrs.github.io/examples/thunder-clouds) -- <span>clouds</span></p> </li> <li> <p>[](https://pmndrs.github.io/examples/motionpathcontrols) -- <span>motion-path</span>, <span>clouds</span></p> </li> <li> <p>[](https://pmndrs.github.io/examples/room-with-soft-shadows) -- <span>caustics</span>, <span>effects</span>, <span>soft-shadows</span></p> </li> <li> <p>[](https://pmndrs.github.io/examples/volumetric-light-godray) -- <span>godrays</span>, <span>reflections</span></p> </li> <li> <p>[](https://pmndrs.github.io/examples/enter-portals) -- <span>portals</span></p> </li> <li> <p>[](https://pmndrs.github.io/examples/pass-through-portals) -- <span>portals</span></p> </li> <li> <p>[](https://pmndrs.github.io/examples/magic-box) -- <span>portals</span></p> </li> <li> <p>[](https://pmndrs.github.io/examples/video-cookies) -- <span>video</span>, <span>cookies</span>, <span>caustics</span></p> </li> <li> <p>[](https://pmndrs.github.io/examples/glass-flower) -- <span>glass</span>, <span>transmission</span>, <span>bloom</span></p> </li> <li> <p>[](https://pmndrs.github.io/examples/cards) -- <span>cards</span>, <span>image</span></p> </li> <li> <Codesandbox id="3ywzzx" tags={['refraction']} /> </li> <li> <p>[](https://pmndrs.github.io/examples/image-gallery) -- <span>reflections</span>, <span>annotations</span></p> </li> <li> <p>[](https://pmndrs.github.io/examples/horizontal-tiles) -- <span>scroll</span>, <span>controls</span></p> </li> <li> <p>[](https://pmndrs.github.io/examples/bestservedbold-christmas-baubles) -- <span>physics</span></p> </li> <li> <p>[](https://pmndrs.github.io/examples/the-three-graces) -- <span>html</span>, <span>annotations</span></p> </li> <li> <p>[](https://pmndrs.github.io/examples/frosted-glass) -- <span>frosted</span>, <span>glass</span>, <span>transmission</span></p> </li> <li> <p>[](https://pmndrs.github.io/examples/gltfjsx-400kb-drone) -- <span>gltfjsx</span>, <span>effects</span>, <span>bloom</span>, <span>soft-shadows</span></p> </li> <li> <p>[](https://pmndrs.github.io/examples/starwars) -- <span>effects</span>, <span>reflections</span>, <span>ssr</span>, <span>bloom</span></p> </li> <li> <p>[](https://pmndrs.github.io/examples/bruno-simons-20k-challenge) -- <span>rapier</span>, <span>physics</span>, <span>soft-shadows</span></p> </li> <li> <p>[](https://pmndrs.github.io/examples/scrollcontrols-and-lens-refraction) -- <span>scroll</span>, <span>refraction</span>, <span>lens</span></p> </li> <li> <p>[](https://pmndrs.github.io/examples/building-dynamic-envmaps) -- <span>effects</span>, <span>bloom</span>, <span>reflections</span></p> </li> <li> <p>[](https://pmndrs.github.io/examples/nextjs-prism) -- <span>effects</span>, <span>bloom</span></p> </li> <li> <p>[](https://pmndrs.github.io/examples/building-live-envmaps) -- <span>custom</span>, <span>environments</span></p> </li> <li> <p>[](https://pmndrs.github.io/examples/shoe-configurator) -- <span>gltfjsx</span>, <span>configurator</span></p> </li> <li> <p>[](https://pmndrs.github.io/examples/audio-analyser) -- <span>audio</span>, <span>analyser</span></p> </li> <li> <p>[](https://pmndrs.github.io/examples/ground-reflections-and-video-textures) -- <span>ground</span>, <span>reflections</span>, <span>video-texture</span></p> </li> <li> <p>[](https://pmndrs.github.io/examples/threejs-journey-portal) -- <span>bruno-simon</span>, <span>threejs-journey</span></p> </li> <li> <p>[](https://pmndrs.github.io/examples/mixing-html-and-webgl-w-occlusion) -- <span>html</span>, <span>iframe</span></p> </li> <li> <p>[](https://pmndrs.github.io/examples/interactive-spline-scene-live-html) -- <span>splinetool</span>, <span>iframe</span></p> </li> <li> <p>[](https://pmndrs.github.io/examples/diamond-refraction) -- <span>refraction</span></p> </li> <li> <p>[](https://pmndrs.github.io/examples/diamond-ring) -- <span>refraction</span>, <span>instanced</span></p> </li> <li> <p>[](https://pmndrs.github.io/examples/envmap-ground-projection) -- <span>ground-projected-env</span></p> </li> <li> <p>[](https://pmndrs.github.io/examples/spline-glass-shapes) -- <span>splinetool</span>, <span>transmission</span></p> </li> <li> <p>[](https://pmndrs.github.io/examples/csg-bunny-usegroups) -- <span>transmission</span>, <span>csg</span></p> </li> <li> <p>[](https://pmndrs.github.io/examples/csg-house) -- <span>csg</span></p> </li> <li> <p>[](https://pmndrs.github.io/examples/gltf-animations-tied-to-scroll) -- <span>scroll</span>, <span>animation</span>, <span>effects</span>, <span>tiltshift</span></p> </li> <li> <p>[](https://pmndrs.github.io/examples/object-clump) -- <span>physics</span>, <span>effects</span>, <span>n8ao</span></p> </li> <li> <p>[](https://pmndrs.github.io/examples/html-input-fields) -- <span>html</span>, <span>input</span></p> </li> <li> <p>[](https://pmndrs.github.io/examples/useintersect-and-scrollcontrols) -- <span>scroll</span></p> </li> <li> <p>[](https://pmndrs.github.io/examples/infinite-scroll) -- <span>scroll</span></p> </li> <li> <p>[](https://pmndrs.github.io/examples/scrollcontrols-with-minimap) -- <span>scroll</span></p> </li> <li> <p>[](https://pmndrs.github.io/examples/instanced-particles-effects) -- <span>effects</span>, <span>particles</span></p> </li> <li> <p>[](https://pmndrs.github.io/examples/dbismut-furniture) -- <span>cross-fade</span>, <span>transitions</span></p> </li> <li> <p>[](https://pmndrs.github.io/examples/portal-shapes) -- <span>transmission</span>, <span>portals</span>, <span>physics</span></p> </li> <li> <p>[](https://pmndrs.github.io/examples/aquarium) -- <span>transmission</span>, <span>portals</span></p> </li> <li> <p>[](https://pmndrs.github.io/examples/portals) -- <span>portals</span>, <span>blend</span></p> </li> <li> <p>[](https://pmndrs.github.io/examples/inter-epoxy-resin)</p> </li> <li> <p>[](https://pmndrs.github.io/examples/stage-presets-gltfjsx)</p> </li> <li> <p>[](https://pmndrs.github.io/examples/react-ellipsecurve)</p> </li> <li> <p>[](https://pmndrs.github.io/examples/iridescent-decals)</p> </li> <li> <p>[](https://pmndrs.github.io/examples/baking-soft-shadows)</p> </li> <li> <p>[](https://pmndrs.github.io/examples/ssr-test)</p> </li> <li> <p>[](https://pmndrs.github.io/examples/csg-operations-rapier-physics)</p> </li> <li> <p>[](https://pmndrs.github.io/examples/faucets-select-highlight)</p> </li> <li> <p>[](https://pmndrs.github.io/examples/rapier-physics)</p> </li> <li> <p>[](https://pmndrs.github.io/examples/bloom-hdr-workflow-gltf)</p> </li> <li> <p>[](https://pmndrs.github.io/examples/ground-projected-envmaps-lamina)</p> </li> <li> <p>[](https://pmndrs.github.io/examples/basic-ballpit)</p> </li> <li> <p>[](https://pmndrs.github.io/examples/backdrop-and-cables)</p> </li> <li> <p>[](https://pmndrs.github.io/examples/clones)</p> </li> <li> <p>[](https://pmndrs.github.io/examples/lamina-1x)</p> </li> <li> <p>[](https://pmndrs.github.io/examples/react-pp-outlines)</p> </li> <li> <p>[](https://pmndrs.github.io/examples/gatsby-stars)</p> </li> <li> <p>[](https://pmndrs.github.io/examples/pmndrs-vercel)</p> </li> <li> <p>[](https://pmndrs.github.io/examples/sport-hall)</p> </li> <li> <p>[](https://pmndrs.github.io/examples/night-train)</p> </li> <li> <p>[](https://pmndrs.github.io/examples/bouncy-watch)</p> </li> <li> <p>[](https://pmndrs.github.io/examples/transparent-aesop-bottles)</p> </li> <li> <p>[](https://pmndrs.github.io/examples/raycast-cycling)</p> </li> <li> <p>[](https://pmndrs.github.io/examples/landing-page)</p> </li> <li> <p>[](https://pmndrs.github.io/examples/scrollcontrols-gltf)</p> </li> <li> <p>[](https://pmndrs.github.io/examples/merged-instance)</p> </li> <li> <p>[](https://pmndrs.github.io/examples/gpgpu-curl-noise-dof)</p> </li> <li> <p>[](https://pmndrs.github.io/examples/hi-key-bubbles)</p> </li> <li> <p>[](https://pmndrs.github.io/examples/floating-instanced-shoes)</p> </li> <li> <p>[](https://pmndrs.github.io/examples/simple-audio-analyser)</p> </li> <li> <p>[](https://pmndrs.github.io/examples/camera-scroll)</p> </li> <li> <p>[](https://pmndrs.github.io/examples/springy-boxes)</p> </li> <li> <p>[](https://pmndrs.github.io/examples/floating-diamonds)</p> </li> <li> <p>[](https://pmndrs.github.io/examples/gltf-animations)</p> </li> <li> <p>[](https://pmndrs.github.io/examples/sparks-and-effects)</p> </li> <li> <p>[](https://pmndrs.github.io/examples/camera-shake)</p> </li> <li> <p>[](https://pmndrs.github.io/examples/ragdoll-physics)</p> </li> <li> <p>[](https://pmndrs.github.io/examples/react-spring-animations)</p> </li> <li> <p>[](https://pmndrs.github.io/examples/mount-transitions)</p> </li> <li> <p>[](https://pmndrs.github.io/examples/floating-laptop)</p> </li> <li> <p>[](https://pmndrs.github.io/examples/zustand-site)</p> </li> <li> <p>[](https://pmndrs.github.io/examples/cell-fracture)</p> </li> <li> <p>[](https://pmndrs.github.io/examples/router-transitions)</p> </li> <li> <p>[](https://pmndrs.github.io/examples/soft-shadows)</p> </li> <li> <p>[](https://pmndrs.github.io/examples/lulaby-city)</p> </li> <li> <p>[](https://pmndrs.github.io/examples/viking-ship)</p> </li> <li> <p>[](https://pmndrs.github.io/examples/wobbling-sphere)</p> </li> <li> <p>[](https://pmndrs.github.io/examples/moksha)</p> </li> <li> <p>[](https://pmndrs.github.io/examples/flexbox-yoga-in-webgl)</p> </li> <li> <p>[](https://pmndrs.github.io/examples/confetti)</p> </li> <li> <p>[](https://pmndrs.github.io/examples/learn-with-jason)</p> </li> <li> <p>[](https://pmndrs.github.io/examples/volumetric-spotlight)</p> </li> </Grid>

Game prototypes

<Grid> <li> <p>[](https://pmndrs.github.io/examples/racing-game)</p> </li> <li> <p>[](https://pmndrs.github.io/examples/pinball-in-70-lines)</p> </li> <li> <p>[](https://pmndrs.github.io/examples/space-game)</p> </li> <li> <p>[](https://pmndrs.github.io/examples/minecraft)</p> </li> <li> <p>[](https://pmndrs.github.io/examples/arkanoid)</p> </li> <li> <p>[](https://pmndrs.github.io/examples/rapier-ping-pong)</p> </li> <li> <p>[](https://pmndrs.github.io/examples/arkanoid-under-60-loc)</p> </li> </Grid>

Basic examples

<Grid> <li> <p>[](https://pmndrs.github.io/examples/basic-demo)</p> </li> <li> <Codesandbox id="yup2o" /> </li> <li> <p>[](https://pmndrs.github.io/examples/drei-rendertexture)</p> </li> <li> <p>[](https://pmndrs.github.io/examples/bvh)</p> </li> <li> <p>[](https://pmndrs.github.io/examples/environment-blur-and-transitions)</p> </li> <li> <p>[](https://pmndrs.github.io/examples/pairing-threejs-to-ui)</p> </li> <li> <p>[](https://pmndrs.github.io/examples/inverted-stencil-buffer)</p> </li> <li> <p>[](https://pmndrs.github.io/examples/stencil-mask)</p> </li> <li> <p>[](https://pmndrs.github.io/examples/transformcontrols-and-makedefault)</p> </li> <li> <p>[](https://pmndrs.github.io/examples/bounds-and-makedefault)</p> </li> <li> <p>[](https://pmndrs.github.io/examples/instanced-vertex-colors)</p> </li> <li> <p>[](https://pmndrs.github.io/examples/progressive-loading-states-with-suspense)</p> </li> <li> <p>[](https://pmndrs.github.io/examples/view-tracking) -- <span>views</span>, <span>portals</span></p> </li> <li> <p>[](https://pmndrs.github.io/examples/multiple-views-with-uniform-controls) -- <span>views</span>, <span>portals</span></p> </li> <li> <p>[](https://pmndrs.github.io/examples/canvas-text) -- <span>html</span>, <span>scroll</span></p> </li> <li> <p>[](https://pmndrs.github.io/examples/gltf-animations-re-used)</p> </li> <li> <p>[](https://pmndrs.github.io/examples/re-using-gltfs)</p> </li> <li> <p>[](https://pmndrs.github.io/examples/svg-renderer)</p> </li> <li> <p>[](https://pmndrs.github.io/examples/mixing-html-and-webgl)</p> </li> <li> <p>[](https://pmndrs.github.io/examples/viewcube)</p> </li> <li> <p>[](https://pmndrs.github.io/examples/mixing-controls)</p> </li> <li> <p>[](https://pmndrs.github.io/examples/video-textures)</p> </li> <li> <p>[](https://pmndrs.github.io/examples/sky-dome-with-annotations)</p> </li> <li> <p>[](https://pmndrs.github.io/examples/tying-canvas-to-scroll-offset)</p> </li> <li> <p>[](https://pmndrs.github.io/examples/edgesgeometry)</p> </li> <li> <p>[](https://pmndrs.github.io/examples/html-annotations)</p> </li> <li> <p>[](https://pmndrs.github.io/examples/shadermaterials)</p> </li> <li> <p>[](https://pmndrs.github.io/examples/simple-physics-demo)</p> </li> <li> <p>[](https://pmndrs.github.io/examples/trigger-meshes)</p> </li> <li> <p>[](https://pmndrs.github.io/examples/simple-physics-demo-with-debug-bounds)</p> </li> <li> <p>[](https://pmndrs.github.io/examples/selective-outlines)</p> </li> <li> <p>[](https://pmndrs.github.io/examples/instances)</p> </li> <li> <p>[](https://pmndrs.github.io/examples/physics-with-convex-polyhedrons)</p> </li> <li> <p>[](https://pmndrs.github.io/examples/color-grading)</p> </li> <li> <p>[](https://pmndrs.github.io/examples/grass-shader)</p> </li> <li> <p>[](https://pmndrs.github.io/examples/clouds)</p> </li> <li> <p>[](https://pmndrs.github.io/examples/svg-maps-with-html-annotations)</p> </li> <li> <p>[](https://pmndrs.github.io/examples/re-using-geometry-and-level-of-detail)</p> </li> <li> <p>[](https://pmndrs.github.io/examples/html-markers)</p> </li> <li> <p>[](https://pmndrs.github.io/examples/bezier-curves-and-nodes)</p> </li> <li> <p>[](https://pmndrs.github.io/examples/shader-fire)</p> </li> <li> <p>[](https://pmndrs.github.io/examples/water-shader)</p> </li> <li> <p>[](https://pmndrs.github.io/examples/staging-and-camerashake)</p> </li> <li> <p>[](https://pmndrs.github.io/examples/shader-hmr)</p> </li> </Grid>