r3f-geometry_skill

Overview

This skill provides practical helpers and patterns for creating and manipulating BufferGeometry in React Three Fiber. It covers built-in primitives, declarative and programmatic buffer attributes, indexed geometry, dynamic updates, instancing at scale, and common geometry utilities. Use it to build custom shapes, optimize draw calls, and manage vertex-level data efficiently.

How this skill works

It exposes examples and code patterns for constructing geometries either via JSX-built-in geometry components or by creating THREE.BufferGeometry and BufferAttribute instances directly. The skill demonstrates setting positions, normals, uvs, and indices, updating attributes at runtime, computing normals and bounds, and using InstancedMesh with per-instance matrices, colors, and custom instanced attributes fed into shaders. It also shows utilities for centering, merging, and disposing geometry.

When to use it

• When you need custom vertex data (positions, normals, uvs, colors) not provided by built-in primitives.
• When rendering hundreds or thousands of identical objects—use instancing to reduce draw calls.
• When sharing vertices between faces to save memory—use indexed geometry.
• When animating vertex positions on the CPU and pushing updates to the GPU each frame.
• When preparing static geometry for performance: merge, center, compute bounds and normals.

Best practices

• Prefer InstancedMesh for 100+ identical objects to drastically reduce draw calls.
• Use typed arrays (Float32Array/Uint16Array) for BufferAttributes and set needsUpdate after changes.
• Call computeVertexNormals(), computeBoundingBox(), and computeBoundingSphere() where needed.
• Dispose geometries and materials when no longer used to free GPU memory.
• Merge static meshes and reduce segment counts for non-hero geometry to improve frame rate.

Example use cases

• Create a custom triangle, quad, or procedural terrain by building BufferGeometry and BufferAttributes.
• Animate a waving plane by mutating position attribute values in useFrame and recomputing normals.
• Render a particle field or foliage using InstancedMesh with per-instance transforms and colors.
• Pass custom per-instance data (speeds, phases) via InstancedBufferAttribute into shader materials.
• Merge a group of static meshes into one BufferGeometry for a single draw call in a static scene.