skills.rest
Uniquecrete
UniquecreteCOMMUNITY
Explore all skills by this author →
GitHub

threejs-geometry

Create Three.js geometries from primitives, paths, and custom BufferGeometry.

Updated May 6, 2026
Search Tags:#geometry#webgl#threejs#buffergeometry#instancedmesh#3d-graphics#procedural-modeling
One-click install
npx skills add https://github.com/Uniquecrete/ThinkFasterv1 --skill threejs-geometry-uniquecrete
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: threejs-geometry
Source: https://github.com/Uniquecrete/ThinkFasterv1/tree/main/Skills/threejs-geometry
Command: npx skills add https://github.com/Uniquecrete/ThinkFasterv1 --skill threejs-geometry-uniquecrete

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Threejs-geometry helps you quickly create correct, GPU-efficient 3D geometry for meshes, custom shapes, and scalable instanced scenes without manually wrestling with low-level BufferGeometry setup.

Core Features & Use Cases

  • Built-in geometry creation: Use BoxGeometry, SphereGeometry, PlaneGeometry, and more for common shapes in real-time scenes (e.g., interactive product mockups).
  • Custom geometry with BufferGeometry: Define vertex positions, indices, normals, UVs, and colors using typed arrays for rendering and lighting (e.g., a procedural terrain patch).
  • Advanced rendering patterns: Use InstancedMesh and InstancedBufferGeometry to efficiently render thousands of identical objects with per-instance transforms, colors, and attributes (e.g., particle-like crowds, voxel clouds).

Quick Start

Use the threejs-geometry skill to generate a BoxGeometry or SphereGeometry mesh and add it to your Three.js scene using an appropriate MeshStandardMaterial for immediate visualization.

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 typed arrays?▼

To create custom Three.js BufferGeometry, define vertex position, normal, uv, and color attributes using typed arrays, then set indices to structure the mesh data for GPU-efficient rendering and lighting.

What is InstancedBufferGeometry used for in Three.js?▼

InstancedBufferGeometry in Three.js is used for performance-critical rendering, allowing thousands of identical objects to be drawn efficiently with per-instance transforms and attributes via InstancedMesh.

Can I use Three.js built-in primitives for procedural modeling?▼

Yes, you can use built-in Three.js primitives like BoxGeometry and SphereGeometry for procedural modeling, and merge them using geometry utilities to build complex scenes.

What's the best way to render thousands of identical meshes in Three.js?▼

The best way to render thousands of identical meshes in Three.js is using InstancedMesh, which applies per-instance transforms and attributes to avoid CPU bottlenecks in scalable scenes.

Do I need to set normals and UVs for a custom Three.js geometry?▼

Yes, you need to set normals and UVs for custom Three.js geometry to ensure correct lighting calculations and texture mapping when rendering the mesh in a real-time scene.

Why does my custom BufferGeometry render with broken lighting?▼

Custom BufferGeometry renders with broken lighting when normal attributes are missing or incorrectly defined, requiring correct typed-array setup to ensure proper shading and rendering.

Related Skills

Explore More Software Engineering Skills→
hii-saikrishnahii-saikrishna

threejs-webgl

Create interactive 3D scenes with Three.js and WebGL rendering.

Community
Advanced
LuXDAmoreLuXDAmore

threejs-geometry

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

Community
Intermediate
MCERQUAMCERQUA
1

threejs-dev

Create and optimize Three.js 3D applications within the OpenVoiceUI canvas.

Community
Advanced
Thanh-aperoThanh-apero
1

ck:shader

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

Community
Advanced