Threejs Geometry

This covers Three.js geometry creation from basic shapes to custom BufferGeometry work. You get examples for all the built-in primitives (boxes, spheres, toruses), path-based extrusions and lathe operations, and detailed BufferGeometry construction with vertices, normals, UVs, and indices. The instancing coverage is lighter than I'd like, but the BufferAttribute examples are solid, including interleaved buffers for performance. Good reference for when you need to create custom meshes or modify geometry programmatically. The edge and wireframe utilities are handy for debugging. If you're doing point clouds or procedural generation, the typed array examples give you what you need to build geometry from scratch.

skills.sh installs: 18.4K
GitHub stars: 4.1K
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add cloudai-x/threejs-skills --skill threejs-geometry --agent claude-code

Installs into .claude/skills of the current project.

Files

Three.js Geometry

Targets three.js r186. Examples use WebGLRenderer; the WebGPU and TSL section uses WebGPURenderer.

Quick Start

import * as THREE from "three";

const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

const scene = new THREE.Scene();

const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 100);
camera.position.set(0, 0, 5);

// A geometry is the shape; many meshes can share one geometry instance
const mesh = new THREE.Mesh(new THREE.BoxGeometry(1, 1, 1), new THREE.MeshNormalMaterial());
scene.add(mesh);

renderer.setAnimationLoop(animate);

function animate() {
  mesh.rotation.y += 0.01;
  renderer.render(scene, camera);
}