threejs-geometry

Generate and manipulate 3D geometric shapes using Three.js in JavaScript.

45|50|Updated Jan 24, 2026

Search Tags:#javascript #geometry #webgl #three.js #3d graphics #instancing #buffergeometry

Ready to run

npx skills add https://github.com/zocomputer/skills --skill threejs-geometry-zocomputer

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: threejs-geometry
Source: https://github.com/zocomputer/skills/tree/main/External/threejs-geometry
Command: npx skills add https://github.com/zocomputer/skills --skill threejs-geometry-zocomputer

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill simplifies the creation and manipulation of 3D geometric shapes within the Three.js JavaScript library, enabling developers to build complex 3D scenes more efficiently.

Core Features & Use Cases

Built-in Geometries: Easily create standard shapes like boxes, spheres, planes, cylinders, and more.
BufferGeometry: Construct custom geometries from raw vertex data for maximum control and performance.
Instancing: Render thousands of copies of the same mesh with unique transformations for optimized scenes.
Use Case: You need to create a detailed 3D model of a city with many identical buildings. Use InstancedMesh to render all buildings efficiently, applying unique positions, rotations, and scales to each.

Quick Start

Use the threejs-geometry skill to create a basic box geometry with a size of 1x1x1.

Frequently Asked Questions about threejs-geometry

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I create custom 3D geometry in Three.js from raw vertex data?▼

Render thousands of identical meshes efficiently in Three.js by using InstancedMesh for instanced rendering. This technique allows you to draw multiple copies of the same geometry with unique positions, rotations, and scales while drastically reducing draw calls for optimized scene performance.

How do I render thousands of identical 3D objects efficiently in Three.js?▼

Does Three.js support extruding 2D paths into 3D shapes?▼

Yes, Three.js supports path-based extrusions to transform 2D shapes into 3D geometry. This functionality enables developers to build complex 3D models and visualizations by extending flat path outlines into volumetric meshes.

When should I use built-in primitives versus custom BufferGeometry in Three.js?▼

Use built-in primitives for standard shapes like boxes and spheres to save development time, but switch to custom BufferGeometry when you need specific structural control or have custom vertex data for specialized 3D graphics applications.

Can I create 3D text in Three.js?▼

Yes, you can create 3D text rendering in Three.js. The library provides specific geometry tools to generate text meshes, which is essential for building interactive user interfaces and detailed 3D graphics scenes.