skills.rest
jtgiron
jtgironCOMMUNITY
Explore all skills by this author →
GitHub

threejs-geometry

Create Three.js geometry with built-in shapes, BufferGeometry, and instanced meshes.

Updated May 4, 2026
Search Tags:#rendering#geometry#threejs#meshes#instancing#buffergeometry#vertices
One-click install
npx skills add https://github.com/jtgiron/portfolio --skill threejs-geometry-jtgiron
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: threejs-geometry
Source: https://github.com/jtgiron/portfolio/tree/main/.agents/skills/threejs-geometry
Command: npx skills add https://github.com/jtgiron/portfolio --skill threejs-geometry-jtgiron

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps you create, modify, and optimize Three.js geometry without manually stitching together vertices, attributes, and mesh setup.

Core Features & Use Cases

  • Built-in shapes like boxes, spheres, planes, and torus variants for quick scene prototyping.
  • Custom BufferGeometry for indexed meshes, normals, UVs, colors, and runtime vertex edits.
  • InstancedMesh and geometry utilities for high-performance rendering of repeated objects and merged assets.
  • Use Case: Build a product showcase scene with hundreds of repeated parts while keeping draw calls low and geometry data organized.

Quick Start

Ask for a Three.js geometry example that builds a custom mesh, adds the needed attributes, and uses instancing when rendering many copies.

Frequently Asked Questions about threejs-geometry

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

FAQPage Schema
How do I create a custom Three.js mesh with correct vertices, normals, and UVs?▼

To create a custom Three.js mesh, you construct a BufferGeometry by defining vertex positions, indices, normals, and UV attributes. This Skill generates the required attribute setup and indexed geometry structure to ensure clean mesh rendering and proper texture mapping.

What is the best way to render hundreds of repeated objects in Three.js without dropping frame rate?▼

The best way to render repeated objects efficiently is using InstancedMesh. This Skill sets up per-instance matrices and geometry utilities, keeping draw calls low while rendering hundreds of identical meshes in a single scene without overloading the GPU.

How do I build Three.js geometry from a 2D path or shape?▼

Building Three.js geometry from paths involves converting shape outlines into mesh data. This Skill supports path-based shapes, generating the necessary vertices and attributes to render custom 2D outlines as 3D geometry within a Three.js scene.

Does this approach support built-in Three.js shapes like spheres and boxes for quick prototyping?▼

Yes, this approach supports built-in Three.js shapes. The Skill generates geometry for boxes, spheres, planes, and torus variants, allowing you to quickly construct and prototype scenes without manually defining vertex data for basic objects.

Why do my custom BufferGeometry meshes render incorrectly or appear flat in Three.js?▼

Custom BufferGeometry meshes render incorrectly when indices, normals, or UVs are misconfigured. This Skill ensures correct use of vertex attributes and geometry utilities, preventing flat shading and distorted textures in your Three.js rendering workflow.

Related Skills

Explore More Software Engineering Skills→
guaderramaguaderrama

threejs-webgl

Create 3D scenes with Three.js for WebGL and WebGPU rendering.

Community
Advanced
ClinscottClinscott

threejs-materials

Configure Three.js materials to optimize visual results across meshes and textures.

Community
Intermediate
norrbackanorrbacka

threejs-fundamentals

Set up and repair Three.js scene infrastructure with cameras, renderers, and animation loops.

Community
Intermediate
Thanh-aperoThanh-apero
1

ck:shader

Develop custom GLSL fragment shaders for procedural graphics in WebGL and Three.js.

Community
Advanced