3D and graphics: live code examples
19 examples for 4 libraries. Open one to read how it works, run it in your browser and change it, by hand or with AI.
All 231 examples UI components and icons Utilities Forms, validation and schemas Animation and motion Web frameworks State and data fetching Markdown, editors and content Files, images and media Styling and CSS Auth and security libraries Charts and data visualisation HTTP clients and networking Game development
Three.js 5 examples · usage and stats
Rotating cube in Three.jsChange the BoxGeometry sizes or the divisors in animate() to make the cube bigger or spin faster.
Animation loop in Three.jsChange the 0.002 speed or the phase step i * 0.8 to see the wave move differently.
Built-in geometries in Three.jsSwap one shape for another from the docs list, such as IcosahedronGeometry(0.7).
Lights and lit materials in Three.jsChange the light colour or the material roughness and metalness to see the surface change.
Grouping objects in Three.jsChange the planet's position.x or the group rotation speeds to reshape the orbit.Leaflet 4 examples · usage and stats
Markers and popups in LeafletClick any pin to open its popup; drag the map to pan and scroll to zoom.
GeoJSON layers in LeafletClick the park, the route or a point to see its properties.
Handling map clicks in LeafletClick anywhere to drop a point and read its coordinates; zoom to see the level change.
Layer switcher and scale control in LeafletTick and untick the boxes in the top-right control to show or hide each group.React Three Fiber 5 examples · usage and stats
InstancedMesh in React Three Fiber2,500 cubes drawn in one draw call: one instancedMesh, animated in useFrame by changing each instance's matrix.
Shadows in React Three FiberShadows need three switches: shadows on the Canvas, castShadow on the light and the objects, receiveShadow on the floor.
useFrame in React Three FiberPlanets on orbits: each one moves itself in useFrame from the clock, without React state.
onClick and pointer events in React Three FiberA grid of tiles: hover to highlight, click to raise. Clicking empty space prints a line from onPointerMissed.
OrbitControls in React Three FiberDrag to rotate, scroll to zoom, right-drag to pan. OrbitControls and Float come from Drei, the helper library most R3F projects add.React Leaflet 5 examples · usage and stats
Map, marker and popup in React LeafletClick the pink marker to open its popup, and drag the map to pan around the shapes.
Listening to map events with useMapEventsClick, drag or use the zoom buttons: the newest event appears at the top of the list on the right.
Changing the map view with useMapClick a city on the right: the map recentres on it and its marker turns pink.
Adding markers on click in React LeafletClick anywhere on the map to add a point; click a marker to see its coordinates, or press Clear.
Fitting the map to bounds in React LeafletDrag or zoom the map, then press Reset view; click a zone to see its name.