Threejs Geometry
Create and optimize Three.js meshes—from built-in primitives through custom BufferGeometry and instancing—in agent-guided frontend sessions.
Overview
Three.js Geometry is an agent skill for the Build phase that guides creation of built-in, custom, and instanced Three.js mesh geometry.
Install
npx skills add https://github.com/cloudai-x/threejs-skills --skill threejs-geometryWhat is this skill?
- Quick-start Box, Sphere, and Plane meshes with MeshStandardMaterial and scene.add
- Reference for built-in shapes: Box, Sphere, Plane, Circle, Cylinder, and parameter tuning (segments, partial arcs)
- BufferGeometry and custom vertex workflows for non-primitive meshes
- Instanced rendering guidance for many copies of the same geometry
- Import pattern using `import * as THREE from "three"` for modern ES modules
- Documents 5+ built-in geometry constructors including Box, Sphere, Plane, Circle, and Cylinder
Adoption & trust: 4.2k installs on skills.sh; 2.3k GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
You are building a 3D web scene but waste time guessing constructor arguments, vertex layout, or how to render many duplicates efficiently.
Who is it for?
Frontend solo builders already using Three.js who need concise geometry recipes and instancing hints during agent-assisted coding.
Skip if: Pure 2D UI work, backend-only APIs, or teams that need a full game engine abstraction instead of raw Three.js primitives.
When should I use this skill?
Creating 3D shapes, working with vertices, building custom meshes, or optimizing with instanced rendering in Three.js.
What do I get? / Deliverables
You add correctly parameterized meshes—or instanced copies—to the scene with patterns that map directly to Three.js APIs.
- Scene-ready Mesh objects
- Custom BufferGeometry definitions
- InstancedMesh setups for repeated geometry
Recommended Skills
Journey fit
Geometry work happens while you are actively constructing the interactive 3D product surface in the browser or WebGL canvas. Frontend subphase is where scene graphs, meshes, and draw-call-friendly geometry patterns are implemented.
How it compares
Use as a geometry cookbook inside Three.js projects, not as a substitute for a full rendering, animation, or physics skill stack.
Common Questions / FAQ
Who is threejs-geometry for?
Indie developers and creative coders implementing browser-based 3D with Three.js who want agent help on shapes, custom meshes, and instancing.
When should I use threejs-geometry?
During Build frontend work when creating 3D shapes, editing vertices, building custom meshes, or optimizing repeated objects with instanced rendering.
Is threejs-geometry safe to install?
It is reference documentation for client-side code with no special agent permissions; review the Security Audits panel on this page like any community skill.
SKILL.md
READMESKILL.md - Threejs Geometry
# Three.js Geometry ## Quick Start ```javascript import * as THREE from "three"; // Built-in geometry const box = new THREE.BoxGeometry(1, 1, 1); const sphere = new THREE.SphereGeometry(0.5, 32, 32); const plane = new THREE.PlaneGeometry(10, 10); // Create mesh const material = new THREE.MeshStandardMaterial({ color: 0x00ff00 }); const mesh = new THREE.Mesh(box, material); scene.add(mesh); ``` ## Built-in Geometries ### Basic Shapes ```javascript // Box - width, height, depth, widthSegments, heightSegments, depthSegments new THREE.BoxGeometry(1, 1, 1, 1, 1, 1); // Sphere - radius, widthSegments, heightSegments, phiStart, phiLength, thetaStart, thetaLength new THREE.SphereGeometry(1, 32, 32); new THREE.SphereGeometry(1, 32, 32, 0, Math.PI * 2, 0, Math.PI); // Full sphere new THREE.SphereGeometry(1, 32, 32, 0, Math.PI); // Hemisphere // Plane - width, height, widthSegments, heightSegments new THREE.PlaneGeometry(10, 10, 1, 1); // Circle - radius, segments, thetaStart, thetaLength new THREE.CircleGeometry(1, 32); new THREE.CircleGeometry(1, 32, 0, Math.PI); // Semicircle // Cylinder - radiusTop, radiusBottom, height, radialSegments, heightSegments, openEnded new THREE.CylinderGeometry(1, 1, 2, 32, 1, false); new THREE.CylinderGeometry(0, 1, 2, 32); // Cone new THREE.CylinderGeometry(1, 1, 2, 6); // Hexagonal prism // Cone - radius, height, radialSegments, heightSegments, openEnded new THREE.ConeGeometry(1, 2, 32, 1, false); // Torus - radius, tube, radialSegments, tubularSegments, arc new THREE.TorusGeometry(1, 0.4, 16, 100); // TorusKnot - radius, tube, tubularSegments, radialSegments, p, q new THREE.TorusKnotGeometry(1, 0.4, 100, 16, 2, 3); // Ring - innerRadius, outerRadius, thetaSegments, phiSegments new THREE.RingGeometry(0.5, 1, 32, 1); ``` ### Advanced Shapes ```javascript // Capsule - radius, length, capSegments, radialSegments new THREE.CapsuleGeometry(0.5, 1, 4, 8); // Dodecahedron - radius, detail new THREE.DodecahedronGeometry(1, 0); // Icosahedron - radius, detail (0 = 20 faces, higher = smoother) new THREE.IcosahedronGeometry(1, 0); // Octahedron - radius, detail new THREE.OctahedronGeometry(1, 0); // Tetrahedron - radius, detail new THREE.TetrahedronGeometry(1, 0); // Polyhedron - vertices, indices, radius, detail const vertices = [1, 1, 1, -1, -1, 1, -1, 1, -1, 1, -1, -1]; const indices = [2, 1, 0, 0, 3, 2, 1, 3, 0, 2, 3, 1]; new THREE.PolyhedronGeometry(vertices, indices, 1, 0); ``` ### Path-Based Shapes ```javascript // Lathe - points[], segments, phiStart, phiLength const points = [ new THREE.Vector2(0, 0), new THREE.Vector2(0.5, 0), new THREE.Vector2(0.5, 1), new THREE.Vector2(0, 1), ]; new THREE.LatheGeometry(points, 32); // Extrude - shape, options 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: 1, bevelEnabled: true, bevelThickness: 0.1, bevelSize: 0.1, bevelSegments: 3, }; new THREE.ExtrudeGeometry(shape, extrudeSettings); // Tube - path, tubularSegments, radius, radialSegments, closed const curve = new THREE.CatmullRomCurve3([ new THREE.Vector3(-1, 0, 0), new THREE.Vector3(0, 1, 0), new THREE.Vector3(1, 0, 0), ]); new THREE.TubeGeometry(curve, 64, 0.2, 8, false); ``` ### Text Geometry ```javascript import { FontLoader } from "three/examples/jsm/loaders/FontLoader.js"; import { TextGeometry } from "three/examples/jsm/geometries/TextGeometry.js"; const loader = new FontLoader(); loader.load("fonts/helvetiker_regular.typeface.json", (font) => { const geometry = new TextGeometry("Hello", { font: font, size: 1, depth: 0.2, // Was 'height' in older versions curveSeg