mcpField
T
threejs-math

threejs-math

github.com/full-stack-skillsDevelopment10358 installsUpdated 4w ago
Repository

About threejs-math

threejs-math is a skill for agents answering questions about three.js math types and spatial queries. It distinguishes raw math from picking and animation workflows, and points to relevant documentation and practices.

Key features

  1. 01Guidance on vectors, matrices, and quaternions
  2. 02Bounding-volume and intersection checks
  3. 03Ray, plane, and frustum query guidance
  4. 04Pointers to addon math structures

Use cases

  1. 01Reasoning about local and world transforms
  2. 02Checking object bounds and containment
  3. 03Testing ray intersections with geometry

Install

Copy the command and run it in a terminal.

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

After installing, type/threejs-mathin Claude Code to confirm it loaded.

Bundled filesagents/openai.yamlexamples/workflow-ray-aabb.md

Details

From the project README

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

NeedSkill
Raw math typesthreejs-math
Raycaster + layers pickingthreejs-objects
QuaternionKeyframeTrack playbackthreejs-animation

Trigger phrases include:

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

How to use this skill

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

See examples/workflow-ray-aabb.md.

Doc map (official)

Docs sectionRepresentative links
Mathhttps://threejs.org/docs/Vector3.html
Mathhttps://threejs.org/docs/Matrix4.html
Mathhttps://threejs.org/docs/Quaternion.html
Mathhttps://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:

  1. Link the concrete type (Vector3, Matrix4, Quaternion, …) from the docs.
  2. Send AnimationMixer / track math to threejs-animation when time-sampled.
  3. Send Raycaster picking flows to threejs-objects when interaction is the goal.
  4. Mention numeric stability (epsilon) where comparisons matter.
  5. 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

Comments

Markdown supported