skills.rest
imanlangaran
imanlangaranCOMMUNITY
Explore all skills by this author →
GitHub

r3f-geometry

Creates 3D shapes, custom BufferGeometry, instanced meshes, and particle systems in React Three Fiber.

1|Updated Aug 20, 2023
Search Tags:#webgl#three.js#react-three-fiber#instancing#buffergeometry#drei#3d geometry
One-click install
npx skills add https://github.com/imanlangaran/mini-projects --skill r3f-geometry-imanlangaran
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: r3f-geometry
Source: https://github.com/imanlangaran/mini-projects/tree/main/react/three-gsap/.claude/skills/r3f-geometry
Command: npx skills add https://github.com/imanlangaran/mini-projects --skill r3f-geometry-imanlangaran

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @react-three/fiber, @react-three/drei, three.

What problem does it solve? Building 3D geometry in React Three Fiber requires knowing dozens of Three.js geometry constructors, their argument orders, and performance trade-offs between instancing, merging, and buffer attributes, which slows down scene development. ## Core Features & Use Cases - Built-in and Drei Shapes: Reference for all JSX geometry elements (box, sphere, torus, capsule, polyhedrons) plus Drei helpers like RoundedBox with correct args signatures. - Custom BufferGeometry: Patterns for building indexed and non-indexed custom meshes with position, normal, and UV attributes, plus dynamic vertex animation in useFrame. - Performance Patterns: Instancing with Drei Instances/Instance, geometry merging with Merged, buffer-based particle systems, and line rendering with Line, CatmullRomLine, and bezier curves. - Use Case: You need to render 1000 animated boxes in a scene. Use the Instances pattern to draw them in a single draw call with per-instance color, position, and rotation. ## Quick Start Ask the AI to create a React Three Fiber scene with a wavy animated plane and an instanced field of rotating boxes using Drei.

Frequently Asked Questions about r3f-geometry

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

FAQPage Schema
How do I create custom geometry in React Three Fiber?▼

Create a THREE.BufferGeometry inside useMemo, set position, normal, and uv attributes with THREE.BufferAttribute, then pass it to a mesh via the geometry prop. Use setIndex with a Uint16Array for indexed geometry to reuse vertices across triangles.

How to render thousands of objects efficiently in React Three Fiber?▼

Use Drei's Instances and Instance components to render many identical meshes in one draw call, with per-instance position, color, and scale. For static scenes, use the Merged component to combine geometries into a single mesh.

Does React Three Fiber support all Three.js geometries?▼

Yes, every Three.js geometry is available as a lowercase JSX element like boxGeometry, torusKnotGeometry, or latheGeometry. Constructor arguments are passed through the args prop as an array.

How do I animate geometry vertices in React Three Fiber?▼

Mutate the geometry's position attribute inside useFrame, then set attributes.position.needsUpdate to true and call computeVertexNormals for correct lighting. This works well for effects like wavy planes.

What is the difference between Instances and Merged in Drei?▼

Instances renders many copies of one geometry with per-instance transforms and colors, ideal for animated objects. Merged combines multiple geometries into static meshes, best for scenes that do not change per frame.

Why does my custom BufferGeometry render black or invisible?▼

Missing or incorrect normal attributes cause lighting to fail, making meshes appear black. Add a normal attribute, call computeVertexNormals, or set side to THREE.DoubleSide if the triangle winding order faces away from the camera.

Related Skills

Explore More Software Engineering Skills→
yogaprasetya22yogaprasetya22

react-three-fiber

Convert json-render 3D scene specifications into React Three Fiber components.

Community
Intermediate
sixscripts-aisixscripts-ai

threejs-webgl

Build interactive Three.js 3D scenes with WebGL and WebGPU rendering.

Community
Advanced
BailipaBailipa
4

threejs-impl-physics

Integrate cannon-es or Rapier physics into Three.js scenes with synchronized meshes.

Community
Advanced
tadams95tadams95
1

r3f-loaders

Load GLTF/GLB assets in React Three Fiber with useGLTF and Suspense.

Community
Intermediate