threejs-core-math

Guides correct use of Three.js math classes including Vector3, Matrix4, Quaternion, Euler, and Color.

1|Updated Aug 20, 2023
One-click install
npx skills add https://github.com/imanlangaran/mini-projects --skill threejs-core-math-imanlangaran
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: threejs-core-math
Source: https://github.com/imanlangaran/mini-projects/tree/main/react/three-gsap/.claude/skills/threejs-core-math
Command: npx skills add https://github.com/imanlangaran/mini-projects --skill threejs-core-math-imanlangaran

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires three, and includes references (resource) components.

What problem does it solve? Three.js math classes mutate in place, use radians, and follow right-to-left matrix multiplication, which causes subtle bugs like corrupted shared vectors, gimbal lock, and muddy color transitions. This Skill provides the correct patterns and anti-patterns for 3D math operations so generated code avoids these common mistakes. ## Core Features & Use Cases - Core Math Class Reference: Covers Vector3, Matrix4, Quaternion, Euler, Color, MathUtils, Box3, Sphere, Plane, Ray, and Frustum with method signatures and usage rules. - Anti-Pattern Prevention: Documents ten critical mistakes such as mutating shared vectors, lerping Euler angles, using degrees instead of radians, and allocating objects inside animation loops. - Working Code Examples: Provides runnable examples for vector operations, matrix composition, quaternion slerp animation, color space conversion, and frustum culling. - Use Case: When building a 3D scene with smooth camera rotation, use this Skill to implement quaternion slerp interpolation instead of Euler lerp, avoiding gimbal lock and wobbly motion. ## Quick Start Ask the AI to write Three.js code that smoothly rotates a mesh 180 degrees around the Y axis using quaternion slerp.

Frequently Asked Questions about threejs-core-math

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

FAQPage Schema
How do I smoothly rotate an object in Three.js?

Convert start and end rotations to quaternions with setFromEuler or setFromAxisAngle, then use slerpQuaternions(qStart, qEnd, t) in the animation loop. Never lerp Euler angles directly, as it produces incorrect paths and triggers gimbal lock.

Quaternion vs Euler in Three.js, which should I use?

Use Euler for setting fixed, human-readable rotations and reading user input in degrees. Use Quaternion for smooth animation, combining multiple rotations, and any free 3D rotation scenario, since Euler suffers gimbal lock at plus or minus 90 degrees.

Why does my Three.js rotation behave unexpectedly with degrees?

All Three.js rotation methods expect radians, not degrees, so passing 90 rotates about 14 full turns. Convert with MathUtils.degToRad(90) or use Math.PI / 2 for 90 degrees.

Why does modifying a Vector3 affect other objects in Three.js?

Nearly all Vector3, Matrix4, and Quaternion methods mutate the instance in place and return this for chaining. Call clone() before mutating any vector that is shared or must be preserved.

How do I detect if an object is visible to the camera in Three.js?

Build a Frustum from the camera's projection matrix multiplied by its world matrix inverse using setFromProjectionMatrix, then call intersectsBox or intersectsObject. Update the camera world matrix first with updateMatrixWorld.

Why does Color.lerp produce muddy colors in Three.js?

Color.lerp interpolates R, G, and B channels independently, producing desaturated intermediate colors when hues differ. Use lerpHSL instead, which interpolates in HSL space and preserves saturation through hue transitions.