R3f Geometry
Create and optimize 3D meshes in React Three Fiber using built-in geometries, BufferGeometry, and Drei instancing.
Overview
r3f-geometry is an agent skill for the Build phase that explains React Three Fiber geometry—built-ins, BufferGeometry, and Drei instancing—for 3D React scenes.
Install
npx skills add https://github.com/enzed/r3f-skills --skill r3f-geometryWhat is this skill?
- Quick-start Canvas + boxGeometry meshStandardMaterial pattern
- Constructor args documented for box, sphere, plane, circle, and cylinder geometries
- BufferGeometry workflows for custom meshes, points, and lines
- Instanced rendering guidance with Drei for many repeated objects
- High-segment sphere and subdivided plane notes for quality vs performance
Adoption & trust: 748 installs on skills.sh; 89 GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
You are building a 3D React experience but keep mismatching Three.js constructor args or drowning the GPU in duplicate meshes.
Who is it for?
Indie devs shipping R3F configurators, interactive demos, or WebGL-heavy landing pages who need mesh primitives and instancing spelled out in JSX.
Skip if: Backend-only APIs with no WebGL surface, or teams that want Blender-to-gltf pipeline docs without any React Three Fiber context.
When should I use this skill?
User asks for R3F shapes, custom meshes, point clouds, lines, or instanced rendering in React Three Fiber.
What do I get? / Deliverables
You get copy-paste R3F geometry patterns with correct args, custom buffer setups, and instancing guidance sized for solo-ship performance budgets.
- Built-in geometry JSX with correct args
- BufferGeometry or instancing snippet
- Performance-oriented segment-count guidance
Recommended Skills
Journey fit
3D scene geometry is authored during product build when indie builders ship WebGL experiences, configurators, or game-like previews in React. React Three Fiber geometry lives in the frontend layer—JSX mesh primitives, args wiring, and instanced draw calls for performance.
How it compares
Focused geometry and mesh primitives in R3F—not a full shading, physics, or glTF loading curriculum.
Common Questions / FAQ
Who is r3f-geometry for?
Solo builders using React Three Fiber who need accurate geometry JSX and performance patterns without re-deriving Three.js docs each session.
When should I use r3f-geometry?
In Build/frontend when adding 3D product viewers, procedural shapes, point clouds, or instanced fields; during Ship/perf passes when draw calls spike on marketing 3D pages.
Is r3f-geometry safe to install?
It is code-pattern documentation only; confirm versions of three, @react-three/fiber, and @react-three/drei in your repo and check Security Audits on this Prism page.
SKILL.md
READMESKILL.md - R3f Geometry
# React Three Fiber Geometry ## Quick Start ```tsx import { Canvas } from '@react-three/fiber' function Scene() { return ( <Canvas> <ambientLight /> <mesh position={[0, 0, 0]}> <boxGeometry args={[1, 1, 1]} /> <meshStandardMaterial color="hotpink" /> </mesh> </Canvas> ) } ``` ## Built-in Geometries All Three.js geometries are available as JSX elements. The `args` prop passes constructor arguments. ### Basic Shapes ```tsx // BoxGeometry(width, height, depth, widthSegments, heightSegments, depthSegments) <boxGeometry args={[1, 1, 1]} /> <boxGeometry args={[2, 1, 0.5, 2, 2, 2]} /> // SphereGeometry(radius, widthSegments, heightSegments, phiStart, phiLength, thetaStart, thetaLength) <sphereGeometry args={[1, 32, 32]} /> <sphereGeometry args={[1, 64, 64]} /> // High quality <sphereGeometry args={[1, 32, 32, 0, Math.PI]} /> // Hemisphere // PlaneGeometry(width, height, widthSegments, heightSegments) <planeGeometry args={[10, 10]} /> <planeGeometry args={[10, 10, 32, 32]} /> // Subdivided for displacement // CircleGeometry(radius, segments, thetaStart, thetaLength) <circleGeometry args={[1, 32]} /> <circleGeometry args={[1, 32, 0, Math.PI]} /> // Semicircle // CylinderGeometry(radiusTop, radiusBottom, height, radialSegments, heightSegments, openEnded) <cylinderGeometry args={[1, 1, 2, 32]} /> <cylinderGeometry args={[0, 1, 2, 32]} /> // Cone <cylinderGeometry args={[1, 1, 2, 6]} /> // Hexagonal prism // ConeGeometry(radius, height, radialSegments, heightSegments, openEnded) <coneGeometry args={[1, 2, 32]} /> // TorusGeometry(radius, tube, radialSegments, tubularSegments, arc) <torusGeometry args={[1, 0.4, 16, 100]} /> // TorusKnotGeometry(radius, tube, tubularSegments, radialSegments, p, q) <torusKnotGeometry args={[1, 0.4, 100, 16, 2, 3]} /> // RingGeometry(innerRadius, outerRadius, thetaSegments, phiSegments) <ringGeometry args={[0.5, 1, 32]} /> ``` ### Advanced Shapes ```tsx // CapsuleGeometry(radius, length, capSegments, radialSegments) <capsuleGeometry args={[0.5, 1, 4, 16]} /> // Polyhedrons <dodecahedronGeometry args={[1, 0]} /> // radius, detail <icosahedronGeometry args={[1, 0]} /> <octahedronGeometry args={[1, 0]} /> <tetrahedronGeometry args={[1, 0]} /> // Higher detail = more subdivisions <icosahedronGeometry args={[1, 4]} /> // Approximates sphere ``` ### Path-Based Shapes ```tsx import * as THREE from 'three' // LatheGeometry - revolve points around Y axis function LatheShape() { const points = [ new THREE.Vector2(0, 0), new THREE.Vector2(0.5, 0), new THREE.Vector2(0.5, 0.5), new THREE.Vector2(0.3, 1), new THREE.Vector2(0, 1), ] return ( <mesh> <latheGeometry args={[points, 32]} /> <meshStandardMaterial color="gold" side={THREE.DoubleSide} /> </mesh> ) } // TubeGeometry - extrude along a curve function TubeShape() { const curve = new THREE.CatmullRomCurve3([ new THREE.Vector3(-2, 0, 0), new THREE.Vector3(-1, 1, 0), new THREE.Vector3(1, -1, 0), new THREE.Vector3(2, 0, 0), ]) return ( <mesh> <tubeGeometry args={[curve, 64, 0.2, 8, false]} /> <meshStandardMaterial color="blue" /> </mesh> ) } // ExtrudeGeometry - extrude a 2D shape function ExtrudedShape() { const shape = new THREE.Shape() shape.moveTo(0, 0) shape.lineTo(1, 0) shape.lineTo(1, 1) shape.lineTo(0, 1) shape.lineTo(0, 0) const extrudeSettings = { steps: 2, depth: 0.5, bevelEnabled: true, bevelThickness: 0.1, bevelSize: 0.1, bevelSegments: 3, } return ( <mesh> <extrudeGeometry args={[shape, extrudeSettings]} /> <meshStandardMaterial color="purple" /> </mesh> ) } ``` ## Drei Shape Helpers @react-three/