skills.rest
gyalamanch001a
gyalamanch001aCOMMUNITY
Explore all skills by this author →
GitHub

threejs-geometry

Create and optimize Three.js geometries for meshes, lines, points, and instanced rendering.

Updated Apr 2, 2026
Search Tags:#geometry#webgl#three.js#buffergeometry#3d modeling#instancedmesh#mesh optimization
One-click install
npx skills add https://github.com/gyalamanch001a/pur-new --skill threejs-geometry-gyalamanch001a
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: threejs-geometry
Source: https://github.com/gyalamanch001a/pur-new/tree/main/.agents/skills/threejs-geometry
Command: npx skills add https://github.com/gyalamanch001a/pur-new --skill threejs-geometry-gyalamanch001a

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps you create, modify, and optimize 3D geometry in Three.js without manually wiring every vertex, index, and attribute from scratch.

Core Features & Use Cases

  • Built-in Primitives: Generate common shapes like boxes, spheres, planes, cylinders, cones, torus forms, capsules, and polyhedra.
  • Custom Geometry: Define BufferGeometry with positions, normals, UVs, colors, indices, and interleaved buffers for tailored mesh creation.
  • Advanced Rendering Patterns: Build edges, wireframes, point clouds, line systems, text meshes, and instanced scenes for performance.
  • Use Case: If you need to render a large product showcase, architectural model, or procedural scene, this Skill gives you the geometry patterns needed to construct it efficiently and update it at runtime.

Quick Start

Ask for a Three.js geometry example that creates a custom mesh or optimized instanced scene for your 3D application.

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 Three.js BufferGeometry with positions, normals, and UVs?▼

To create custom Three.js BufferGeometry, define vertex positions, normals, UVs, and colors as attributes, then attach them to a BufferGeometry instance to build tailored meshes. Indexed geometry can be used to optimize vertex sharing.

What is the best way to optimize large-scale Three.js scenes with many meshes?▼

The best way to optimize large-scale Three.js scenes is using InstancedMesh. It renders thousands of identical geometries with a single draw call by applying per-instance transforms, drastically improving rendering performance.

Can I generate text meshes and wireframes using Three.js geometry utilities?▼

Yes, you can generate text meshes and wireframes using Three.js geometry utilities. The Skill supports building text geometry, edge generation, and wireframe patterns to visualize 3D shapes and structural outlines efficiently.

Does Three.js support built-in 3D primitives like spheres, boxes, and cylinders?▼

Yes, Three.js supports built-in 3D primitives. You can quickly generate common shapes like boxes, spheres, planes, cylinders, cones, torus forms, capsules, and polyhedra without manually wiring every vertex from scratch.

How do I update Three.js geometry attributes at runtime for procedural scenes?▼

To update Three.js geometry attributes at runtime, modify the BufferGeometry attribute arrays and set the needsUpdate flag. This allows dynamic updates to positions, normals, and UVs for procedural scene generation and runtime modifications.

Related Skills

Explore More Software Engineering Skills→
DexploarerDexploarer
6

threejs-scene-builder

Build Three.js scenes with camera, renderer, controls, and lighting.

Community
Advanced
zocomputerzocomputer
45

threejs-materials

Explain and demonstrate Three.js material types with code examples.

Official
Intermediate
calesthiocalesthio
46.2k

threejs-geometry

Create and manipulate Three.js geometries with BufferGeometry and InstancedMesh.

Community
Advanced
DSalischikerDSalischiker

r3f-geometry

Create and manage 3D geometry in React Three Fiber with JSX primitives, BufferGeometry, and Drei instancing.

Community
Intermediate