threejs-math

Q: How do I install threejs-math?

Run npx skills add https://github.com/full-stack-skills/threejs-skills --skill threejs-math in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/threejs-math/ (personal) or .claude/skills/threejs-math/ (project).

by full-stack-skillsEducation & Science

three.js math library: Vector2/3/4, Matrix3/4, Quaternion, Euler, Color, Box2/Box3, Sphere, Plane, Ray, Line3, Triangle, Frustum, Cylindrical/Spherical coords, MathUtils, and Interpolant base classes; addon math utilities such as OBB, Octree, Capsule, ConvexHull, MeshSurfaceSampler. Use for transforms, intersection tests, and spatial queries; for keyframe interpolation tied to AnimationMixer use threejs-animation; for picking implementation use threejs-objects with Raycaster.

Installs: 380
Last 24h: —
Trending rank: —
Security: Not audited

Install

Works with every agent the skills CLI supports.

npx skills add https://github.com/full-stack-skills/threejs-skills --skill threejs-math

01
Install
Run the command in your project. The CLI asks which agents to install for.
02
Describe the task
Ask your agent for something this skill covers. It loads threejs-math automatically when relevant.
03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.

SKILL.md

The instructions your agent reads when the skill is triggered.

When to use this skill

ALWAYS use this skill when the user mentions:

Vector/matrix math order, applyQuaternion, lookAt, world vs local transforms
Bounding volumes Box3/Sphere, containment/intersection tests
Ray vs Plane vs Frustum tests (without full picking pipeline)

IMPORTANT: math vs objects vs animation

Need	Skill
Raw math types	threejs-math
`Raycaster` + layers picking	threejs-objects
QuaternionKeyframeTrack playback	threejs-animation

Trigger phrases include:

"Vector3", "Matrix4", "Quaternion", "Box3", "Ray", "Frustum"
"向量", "矩阵", "四元数", "包围盒"

How to use this skill

Conventions: multiply vectors by matrices on the left as three.js examples show; call updateMatrixWorld before world-space queries (threejs-objects).
Bounding: Box3().setFromObject(object) for rough bounds; refine per need.
Collision-ish checks: ray.intersectBox, sphere.containsPoint, etc., per docs.
Addon structures: Octree/OBB for games—cite addon pages, avoid copying full API tables here.
Color: Color conversions relate to materials/textures—cross-link.
Random sampling: MeshSurfaceSampler for distributing points on meshes.

See examples/workflow-ray-aabb.md.

Doc map (official)

Docs section	Representative links
Math	https://threejs.org/docs/Vector3.html
Math	https://threejs.org/docs/Matrix4.html
Math	https://threejs.org/docs/Quaternion.html
Math	https://threejs.org/docs/Ray.html

Scope

In scope: Core Math types; addon math entries as pointers.
Out of scope: Keyframe track evaluation beyond type references (animation skill).

Common pitfalls and best practices

Euler gimbal lock—prefer quaternions for arbitrary rotations.
Reusing temporary vectors reduces GC thrash in hot loops.
Frustum culling helpers vary—verify against your three version.

Documentation and version

Core math types are listed under Math; addon utilities (Octree, OBB, …) appear under Addons → Math in three.js docs. Global also lists constants (e.g. wrapping, blending) sometimes needed alongside materials.

Agent response checklist

When answering under this skill, prefer responses that:

Link the concrete type (Vector3, Matrix4, Quaternion, …) from the docs.
Send AnimationMixer / track math to threejs-animation when time-sampled.
Send Raycaster picking flows to threejs-objects when interaction is the goal.
Mention numeric stability (epsilon) where comparisons matter.
Point to Addons → Math for game-oriented structures when users need spatial acceleration.

References

Keywords

English: vector, matrix, quaternion, euler, box3, sphere, ray, frustum, three.js

中文： 向量、矩阵、四元数、欧拉角、包围盒、射线、three.js

FAQ

What does the threejs-math skill do?

How do I install threejs-math?

Run npx skills add https://github.com/full-stack-skills/threejs-skills --skill threejs-math in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/threejs-math/ (personal) or .claude/skills/threejs-math/ (project).

Which AI agents can use threejs-math?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is threejs-math safe to install?

No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.

Who maintains threejs-math?

It is published by full-stack-skills in full-stack-skills/threejs-skills. It has 380 recorded installs.