skills.rest
yogaprasetya22
yogaprasetya22COMMUNITY
Explore all skills by this author →
WebsiteGitHub

threejs-geometry

Generate Three.js geometries using BufferGeometry and instancing for real-time rendering.

Updated May 18, 2026
Search Tags:#geometry#threejs#instancedmesh#bufffergeometry#3d optimization#custom mesh#bufferattributes
One-click install
npx skills add https://github.com/yogaprasetya22/mmorpg --skill threejs-geometry-yogaprasetya22
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: threejs-geometry
Source: https://github.com/yogaprasetya22/mmorpg/tree/main/frontend/.agents/skills/threejs-geometry
Command: npx skills add https://github.com/yogaprasetya22/mmorpg --skill threejs-geometry-yogaprasetya22

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Creating and rendering 3D shapes efficiently in Three.js can be slow and error-prone when you need custom meshes, GPU-friendly BufferGeometry, or instanced rendering for performance.

Core Features & Use Cases

  • Built-in geometry generators: Create common primitives like box, sphere, plane, cylinder, torus, and text-ready geometry quickly for prototypes and gameplay assets.
  • Custom BufferGeometry workflows: Define vertex attributes (position, normal, UV, color), indices, and interleaved buffers for GPU-efficient meshes.
  • High-performance rendering patterns: Use InstancedMesh and InstancedBufferGeometry to draw many repeated objects (e.g., crowds, loot, terrain props) with fewer draw calls.
  • Editing & utilities: Recompute normals/bounds, merge geometries, and generate edges/wireframes to support debugging and production tooling.

Quick Start

Use threejs-geometry to create a custom BufferGeometry for a mesh by defining position, normal, and index attributes and then rendering it with a standard material.

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 BufferGeometry in Three.js with typed arrays?▼

To create a custom BufferGeometry in Three.js, define vertex attributes like position, normal, and UV using typed arrays, set indices for triangle faces, and attach them to a BufferGeometry instance before assigning it to a mesh with a standard material.

What's the best way to render many repeated objects in Three.js without dropping frame rate?▼

The best way to render many objects in Three.js is using InstancedMesh or InstancedBufferGeometry, which allows drawing repeated meshes like crowds or terrain props with significantly fewer draw calls for high-performance real-time rendering.

Why does my custom Three.js mesh render with incorrect lighting?▼

Custom Three.js meshes render with incorrect lighting when normal attributes are missing or misaligned, requiring you to recompute normals and bounds on the BufferGeometry after editing vertex positions to restore proper GPU shading.

Can I use InstancedBufferGeometry to update per-instance colors and transforms?▼

Yes, you can use InstancedBufferGeometry to update per-instance colors and transforms by modifying the instanced buffer attributes, enabling dynamic visual variation across many objects without creating separate mesh instances.

How do I debug custom Three.js geometry edges and wireframes?▼

To debug custom Three.js geometry, generate edges and wireframes from your mesh to visually inspect vertex placements and triangle topology, helping identify issues within complex BufferGeometry structures during production tooling.

Related Skills

Explore More Design & Creative Skills→
DexploarerDexploarer
6

threejs-scene-builder

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

Community
Advanced
tanepipertanepiper
27

threejs

Create interactive 3D web scenes using Three.js with OrbitControls and GLTF/FBX loading.

Community
Intermediate
lengo0951lengo0951

threejs

Create interactive 3D scenes with Three.js using WebGL and WebGPU.

Community
Advanced
MonichreMonichre

threejs-geometry

Create and manipulate Three.js geometries, including BufferGeometry and instancing.

Community
Intermediate