tadams95/threejs-geometry
.claude/skills/threejs-geometry/SKILL.md
Three.js geometry creation - built-in shapes, BufferGeometry, custom geometry, instancing. Use when creating 3D shapes, working with vertices, building custom meshes, or optimizing with instanced rendering.
development
Updated Apr 15, 2026
$ install --global
skillsauthnpx skillsauth add tadams95/kardashev-network threejs-geometryInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Apr 15, 2026, 4:18 AM11.6s1 file scanned
SKILL.md
- name:
- threejs-geometry
- description:
- Three.js geometry creation - built-in shapes, BufferGeometry, custom geometry, instancing. Use when creating 3D shapes, working with vertices, building custom meshes, or optimizing with instanced rendering.
Three.js Geometry
Built-in Geometries
// Basic shapes
new THREE.BoxGeometry(1, 1, 1);
new THREE.SphereGeometry(1, 32, 32);
new THREE.PlaneGeometry(10, 10);
new THREE.CylinderGeometry(1, 1, 2, 32);
new THREE.ConeGeometry(1, 2, 32);
new THREE.TorusGeometry(1, 0.4, 16, 100);
// Advanced
new THREE.IcosahedronGeometry(1, 0);
new THREE.CapsuleGeometry(0.5, 1, 4, 8);
Custom BufferGeometry
const geometry = new THREE.BufferGeometry();
// Vertices
const vertices = new Float32Array([
-1, -1, 0, 1, -1, 0, 1, 1, 0, -1, 1, 0
]);
geometry.setAttribute("position", new THREE.BufferAttribute(vertices, 3));
// Indices
const indices = new Uint16Array([0, 1, 2, 0, 2, 3]);
geometry.setIndex(new THREE.BufferAttribute(indices, 1));
// Normals and UVs
geometry.setAttribute("normal", new THREE.BufferAttribute(normals, 3));
geometry.setAttribute("uv", new THREE.BufferAttribute(uvs, 2));
geometry.computeVertexNormals();
InstancedMesh
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshStandardMaterial({ color: 0x00ff00 });
const count = 1000;
const instancedMesh = new THREE.InstancedMesh(geometry, material, count);
const dummy = new THREE.Object3D();
for (let i = 0; i < count; i++) {
dummy.position.set(Math.random() * 20 - 10, Math.random() * 20 - 10, Math.random() * 20 - 10);
dummy.rotation.set(Math.random() * Math.PI, Math.random() * Math.PI, 0);
dummy.updateMatrix();
instancedMesh.setMatrixAt(i, dummy.matrix);
}
instancedMesh.instanceMatrix.needsUpdate = true;
Points and Lines
// Points
const points = new THREE.Points(geometry, new THREE.PointsMaterial({ size: 0.1 }));
// Lines
const line = new THREE.Line(geometry, new THREE.LineBasicMaterial({ color: 0xff0000 }));
Performance Tips
- Use indexed geometry
- Merge static meshes with
BufferGeometryUtils.mergeGeometries - Use InstancedMesh for many identical objects
- Call
geometry.dispose()when done
Related Skills
tadams95/wagmi-viem
development
VerifiedTrustedCommunity
Web3 integration with wagmi and viem - wallet connection, contract interactions, transactions, RainbowKit. Use when implementing wallet features, reading/writing contracts, or handling blockchain transactions.
SKILL.mdUpdated Apr 15, 2026
tadams95/threejs-textures
content-media
VerifiedTrustedCommunity
Three.js textures - loading, configuration, UV mapping, environment maps. Use when loading images, configuring texture properties, or working with HDR environments.
SKILL.mdUpdated Apr 15, 2026
tadams95/threejs-shaders
data-ai
VerifiedTrustedCommunity
Three.js shaders - GLSL, ShaderMaterial, uniforms, custom effects. Use when creating custom visual effects, modifying vertices, writing fragment shaders, or extending built-in materials.
SKILL.mdUpdated Apr 15, 2026
tadams95/threejs-postprocessing
testing
VerifiedTrustedCommunity
Three.js post-processing - EffectComposer, bloom, depth of field, custom passes. Use when adding visual effects, screen-space effects, or enhancing rendered output.
SKILL.mdUpdated Apr 15, 2026