claude-skill-lord 1.5.0

package/skills/tier-3/threejs/references/05-lights.md

@@ -0,0 +1,183 @@
+# Lights
+
+Illuminate 3D scenes with various light types.
+
+## Ambient Light
+
+Global illumination affecting all objects equally:
+
+```javascript
+const light = new THREE.AmbientLight(0x404040); // soft white
+scene.add(light);
+
+// Often used as base illumination with other lights
+```
+
+## Directional Light
+
+Infinite distance light with parallel rays (sun-like):
+
+```javascript
+const light = new THREE.DirectionalLight(0xffffff, 1);
+light.position.set(10, 10, 5);
+light.target.position.set(0, 0, 0);
+scene.add(light);
+scene.add(light.target); // target must be in scene
+
+// With shadows
+light.castShadow = true;
+light.shadow.mapSize.width = 2048;
+light.shadow.mapSize.height = 2048;
+light.shadow.camera.near = 0.5;
+light.shadow.camera.far = 500;
+light.shadow.camera.left = -10;
+light.shadow.camera.right = 10;
+light.shadow.camera.top = 10;
+light.shadow.camera.bottom = -10;
+
+// Visualize shadow camera
+const helper = new THREE.CameraHelper(light.shadow.camera);
+scene.add(helper);
+```
+
+## Point Light
+
+Omnidirectional light from a point (lightbulb-like):
+
+```javascript
+const light = new THREE.PointLight(0xff0000, 1, 100, 2);
+// params: color, intensity, distance (0 = infinite), decay
+
+light.position.set(0, 10, 0);
+scene.add(light);
+
+// With shadows
+light.castShadow = true;
+light.shadow.mapSize.width = 1024;
+light.shadow.mapSize.height = 1024;
+light.shadow.camera.near = 0.5;
+light.shadow.camera.far = 100;
+```
+
+## Spot Light
+
+Cone-shaped light (spotlight-like):
+
+```javascript
+const light = new THREE.SpotLight(0xffffff, 1);
+light.position.set(0, 10, 0);
+light.target.position.set(0, 0, 0);
+scene.add(light);
+scene.add(light.target);
+
+// Cone parameters
+light.angle = Math.PI / 6; // cone angle
+light.penumbra = 0.1;      // edge softness (0-1)
+light.decay = 2;           // light falloff
+light.distance = 100;      // max range (0 = infinite)
+
+// With shadows
+light.castShadow = true;
+light.shadow.mapSize.width = 1024;
+light.shadow.mapSize.height = 1024;
+```
+
+## Hemisphere Light
+
+Sky/ground two-color lighting:
+
+```javascript
+const light = new THREE.HemisphereLight(
+  0x0000ff, // sky color (blue)
+  0x00ff00, // ground color (green)
+  0.6       // intensity
+);
+scene.add(light);
+
+// Good for outdoor scenes
+```
+
+## RectArea Light (Addon)
+
+Rectangular area light (realistic surface illumination):
+
+```javascript
+import { RectAreaLight } from 'three/addons/lights/RectAreaLight.js';
+
+const light = new RectAreaLight(0xffffff, 5, 10, 10);
+// params: color, intensity, width, height
+
+light.position.set(0, 5, 0);
+light.lookAt(0, 0, 0);
+scene.add(light);
+
+// Requires WebGL 2.0
+```
+
+## Shadow Configuration
+
+Global renderer settings:
+
+```javascript
+renderer.shadowMap.enabled = true;
+renderer.shadowMap.type = THREE.PCFSoftShadowMap; // soft shadows
+
+// Shadow types:
+// THREE.BasicShadowMap - fast, aliased
+// THREE.PCFShadowMap - smoother
+// THREE.PCFSoftShadowMap - softer (default)
+// THREE.VSMShadowMap - variance shadow maps
+
+// Objects must opt-in to shadows
+mesh.castShadow = true;    // object casts shadows
+mesh.receiveShadow = true; // object receives shadows
+```
+
+## Light Helpers
+
+Visualize light positions and directions:
+
+```javascript
+// Directional light
+const helper = new THREE.DirectionalLightHelper(light, 5);
+scene.add(helper);
+
+// Point light
+const helper = new THREE.PointLightHelper(light, 1);
+scene.add(helper);
+
+// Spot light
+const helper = new THREE.SpotLightHelper(light);
+scene.add(helper);
+
+// Hemisphere light
+const helper = new THREE.HemisphereLightHelper(light, 5);
+scene.add(helper);
+
+// RectArea light
+import { RectAreaLightHelper } from 'three/addons/helpers/RectAreaLightHelper.js';
+const helper = new RectAreaLightHelper(light);
+light.add(helper);
+```
+
+## Light Intensity & Units
+
+```javascript
+// Intensity values depend on physically-based rendering:
+// - Lower values (0.1-1) for ambient/hemisphere
+// - Higher values (1-10) for directional/point/spot
+// - Very high (10-100+) for small area lights
+
+// Physical light units (optional)
+renderer.physicallyCorrectLights = true; // deprecated in newer versions
+// Use intensity in candelas (cd) for point/spot lights
+```
+
+## Performance Tips
+
+- Limit number of lights (3-5 for good performance)
+- Use ambient + 1-2 directional lights for outdoor scenes
+- Bake lighting into textures for static scenes
+- Use lightmaps for complex static lighting
+- Shadows are expensive - use selectively
+- Lower shadow map resolution for better performance

package/skills/tier-3/threejs/references/06-animations.md

@@ -0,0 +1,214 @@
+# Animations
+
+Animate objects, cameras, and imported models.
+
+## Animation System
+
+Three.js uses AnimationMixer for playback:
+
+```javascript
+// Create mixer for object
+const mixer = new THREE.AnimationMixer(object);
+
+// Play animation clip
+const action = mixer.clipAction(animationClip);
+action.play();
+
+// Update in render loop
+const clock = new THREE.Clock();
+function animate() {
+  const delta = clock.getDelta();
+  mixer.update(delta);
+  renderer.render(scene, camera);
+  requestAnimationFrame(animate);
+}
+```
+
+## Loading Animations
+
+From GLTF/FBX files:
+
+```javascript
+const loader = new GLTFLoader();
+loader.load('model.gltf', (gltf) => {
+  scene.add(gltf.scene);
+
+  const mixer = new THREE.AnimationMixer(gltf.scene);
+
+  // Play all animations
+  gltf.animations.forEach((clip) => {
+    mixer.clipAction(clip).play();
+  });
+
+  // Or play specific animation
+  const clip = THREE.AnimationClip.findByName(gltf.animations, 'Walk');
+  const action = mixer.clipAction(clip);
+  action.play();
+});
+```
+
+## Animation Actions
+
+Control playback:
+
+```javascript
+const action = mixer.clipAction(clip);
+
+// Playback control
+action.play();
+action.stop();
+action.pause();
+action.reset();
+
+// Loop modes
+action.setLoop(THREE.LoopRepeat, Infinity);    // loop forever
+action.setLoop(THREE.LoopOnce, 1);             // play once, stop at end
+action.setLoop(THREE.LoopPingPong, Infinity);  // reverse on each loop
+
+// Speed control
+action.timeScale = 1.5; // 1.5x speed
+action.timeScale = -1;  // reverse
+
+// Weight (for blending)
+action.setEffectiveWeight(0.5); // 50% influence
+
+// Enable/disable
+action.enabled = true;
+```
+
+## Animation Blending
+
+Smooth transitions between animations:
+
+```javascript
+// Crossfade between two actions
+currentAction.crossFadeTo(nextAction, 0.5, true); // 0.5 second transition
+
+// Or manually control weights
+currentAction.fadeOut(0.5);
+nextAction.reset().fadeIn(0.5).play();
+```
+
+## Creating Custom Animations
+
+Using KeyframeTracks:
+
+```javascript
+// Position animation
+const times = [0, 1, 2]; // keyframe times in seconds
+const values = [0, 0, 0,  10, 0, 0,  0, 0, 0]; // x,y,z for each time
+
+const positionKF = new THREE.VectorKeyframeTrack(
+  '.position', // property path
+  times,
+  values
+);
+
+// Rotation animation (quaternions)
+const quaternion1 = new THREE.Quaternion();
+const quaternion2 = new THREE.Quaternion().setFromEuler(new THREE.Euler(0, Math.PI, 0));
+const rotationKF = new THREE.QuaternionKeyframeTrack(
+  '.quaternion',
+  [0, 1],
+  [
+    quaternion1.x, quaternion1.y, quaternion1.z, quaternion1.w,
+    quaternion2.x, quaternion2.y, quaternion2.z, quaternion2.w
+  ]
+);
+
+// Create clip from tracks
+const clip = new THREE.AnimationClip('custom', 2, [positionKF, rotationKF]);
+
+const mixer = new THREE.AnimationMixer(object);
+mixer.clipAction(clip).play();
+```
+
+## Keyframe Track Types
+
+```javascript
+// Different track types for different properties
+new THREE.VectorKeyframeTrack('.position', times, values);
+new THREE.VectorKeyframeTrack('.scale', times, values);
+new THREE.QuaternionKeyframeTrack('.quaternion', times, values);
+new THREE.ColorKeyframeTrack('.material.color', times, values);
+new THREE.NumberKeyframeTrack('.material.opacity', times, values);
+new THREE.BooleanKeyframeTrack('.visible', times, values);
+```
+
+## Skeletal Animation
+
+For rigged characters:
+
+```javascript
+// Object must be SkinnedMesh with skeleton
+const mesh = gltf.scene.children.find(child => child.isSkinnedMesh);
+
+// Access bones
+const skeleton = mesh.skeleton;
+const bones = skeleton.bones;
+
+// Manually control bones
+bones[0].rotation.x = Math.PI / 4;
+
+// Use SkeletonHelper to visualize
+const helper = new THREE.SkeletonHelper(mesh);
+scene.add(helper);
+```
+
+## Morph Target Animation
+
+Blend shapes:
+
+```javascript
+// Morph targets are defined in geometry
+const mesh = new THREE.Mesh(geometry, material);
+
+// Animate morph influences
+mesh.morphTargetInfluences[0] = 0.5; // 50% of first morph target
+
+// Create animation clip for morphs
+const track = new THREE.NumberKeyframeTrack(
+  '.morphTargetInfluences[0]',
+  [0, 1, 2],
+  [0, 1, 0]
+);
+const clip = new THREE.AnimationClip('morph', 2, [track]);
+```
+
+## Manual Animation
+
+Simple transform animations:
+
+```javascript
+const clock = new THREE.Clock();
+
+function animate() {
+  const elapsed = clock.getElapsedTime();
+
+  // Rotate
+  object.rotation.y = elapsed;
+
+  // Oscillate position
+  object.position.y = Math.sin(elapsed * 2) * 5;
+
+  // Pulse scale
+  const scale = 1 + Math.sin(elapsed * 3) * 0.1;
+  object.scale.set(scale, scale, scale);
+
+  renderer.render(scene, camera);
+  requestAnimationFrame(animate);
+}
+```
+
+## Tween Libraries
+
+For complex easing (use with external lib like GSAP):
+
+```javascript
+// With GSAP
+gsap.to(object.position, {
+  duration: 1,
+  x: 10,
+  ease: "power2.inOut"
+});
+```

package/skills/tier-3/threejs/references/07-math.md

@@ -0,0 +1,260 @@
+# Math Utilities
+
+Essential mathematical objects for 3D programming.
+
+## Vector3
+
+3D position, direction, or scale:
+
+```javascript
+const v = new THREE.Vector3(x, y, z);
+
+// Operations
+v.add(otherVector);
+v.sub(otherVector);
+v.multiply(otherVector);
+v.multiplyScalar(scalar);
+v.divide(otherVector);
+v.divideScalar(scalar);
+
+// Analysis
+v.length();           // magnitude
+v.lengthSq();         // magnitude squared (faster)
+v.normalize();        // make length = 1
+v.dot(otherVector);   // dot product
+v.cross(otherVector); // cross product
+v.distanceTo(otherVector);
+v.angleTo(otherVector);
+
+// Interpolation
+v.lerp(targetVector, alpha); // linear interpolation
+v.lerpVectors(v1, v2, alpha);
+
+// Clamping
+v.clamp(minVector, maxVector);
+v.clampLength(minLength, maxLength);
+```
+
+## Vector2 & Vector4
+
+Similar to Vector3 but 2D and 4D:
+
+```javascript
+const v2 = new THREE.Vector2(x, y);
+const v4 = new THREE.Vector4(x, y, z, w);
+```
+
+## Quaternion
+
+Rotation representation (avoids gimbal lock):
+
+```javascript
+const q = new THREE.Quaternion(x, y, z, w);
+
+// From Euler angles
+q.setFromEuler(new THREE.Euler(x, y, z, 'XYZ'));
+
+// From axis-angle
+const axis = new THREE.Vector3(0, 1, 0);
+q.setFromAxisAngle(axis, Math.PI / 2);
+
+// From rotation matrix
+q.setFromRotationMatrix(matrix);
+
+// Interpolation
+q.slerp(targetQuaternion, alpha); // spherical linear interpolation
+
+// Apply to vector
+const v = new THREE.Vector3(1, 0, 0);
+v.applyQuaternion(q);
+```
+
+## Euler
+
+Rotation as XYZ angles (degrees):
+
+```javascript
+const euler = new THREE.Euler(x, y, z, 'XYZ');
+// Order: 'XYZ', 'YXZ', 'ZXY', 'ZYX', 'YZX', 'XZY'
+
+// From quaternion
+euler.setFromQuaternion(q);
+
+// From rotation matrix
+euler.setFromRotationMatrix(matrix);
+
+// Apply to object
+object.rotation.copy(euler);
+```
+
+## Matrix4
+
+4x4 transformation matrix:
+
+```javascript
+const m = new THREE.Matrix4();
+
+// Compose transformation
+m.compose(position, quaternion, scale);
+
+// Decompose
+const pos = new THREE.Vector3();
+const quat = new THREE.Quaternion();
+const scale = new THREE.Vector3();
+m.decompose(pos, quat, scale);
+
+// Transform operations
+m.makeTranslation(x, y, z);
+m.makeRotationX(theta);
+m.makeRotationY(theta);
+m.makeRotationZ(theta);
+m.makeScale(x, y, z);
+
+// Combine matrices
+m.multiply(otherMatrix);
+m.premultiply(otherMatrix);
+
+// Invert
+m.invert();
+
+// Apply to vector
+const v = new THREE.Vector3(1, 2, 3);
+v.applyMatrix4(m);
+```
+
+## Color
+
+Color manipulation:
+
+```javascript
+const color = new THREE.Color(0xff0000); // hex
+const color = new THREE.Color('red');    // CSS
+const color = new THREE.Color(1, 0, 0);  // RGB 0-1
+
+// Conversions
+color.getHex();      // 0xff0000
+color.getHexString(); // "ff0000"
+color.getStyle();    // "rgb(255,0,0)"
+
+// Color spaces
+color.setHSL(h, s, l); // hue, saturation, lightness
+const hsl = {};
+color.getHSL(hsl); // fills hsl object
+
+// Operations
+color.add(otherColor);
+color.multiply(otherColor);
+color.lerp(targetColor, alpha);
+```
+
+## Raycaster
+
+Ray intersection testing:
+
+```javascript
+const raycaster = new THREE.Raycaster();
+const mouse = new THREE.Vector2();
+
+// Convert mouse to normalized device coordinates
+mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
+mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
+
+// Set ray from camera
+raycaster.setFromCamera(mouse, camera);
+
+// Find intersections
+const intersects = raycaster.intersectObjects(scene.children, true);
+// recursive = true to check children
+
+if (intersects.length > 0) {
+  const hit = intersects[0];
+  console.log(hit.object);   // intersected object
+  console.log(hit.point);    // intersection point (Vector3)
+  console.log(hit.distance); // distance from camera
+  console.log(hit.face);     // intersected face
+}
+```
+
+## Box3
+
+Axis-aligned bounding box:
+
+```javascript
+const box = new THREE.Box3();
+
+// From object
+box.setFromObject(mesh);
+
+// From points
+box.setFromPoints(arrayOfVector3);
+
+// Properties
+box.min; // Vector3
+box.max; // Vector3
+box.getCenter(target); // fills target Vector3
+box.getSize(target);   // fills target Vector3
+
+// Tests
+box.containsPoint(point);
+box.intersectsBox(otherBox);
+```
+
+## Sphere
+
+Bounding sphere:
+
+```javascript
+const sphere = new THREE.Sphere(center, radius);
+
+// From box
+sphere.setFromPoints(arrayOfVector3);
+
+// From object
+const box = new THREE.Box3().setFromObject(mesh);
+box.getBoundingSphere(sphere);
+
+// Tests
+sphere.containsPoint(point);
+sphere.intersectsSphere(otherSphere);
+```
+
+## Plane
+
+Infinite plane:
+
+```javascript
+const plane = new THREE.Plane(normal, constant);
+// normal: Vector3, constant: distance from origin
+
+// From coplanar points
+plane.setFromCoplanarPoints(p1, p2, p3);
+
+// Distance to point
+plane.distanceToPoint(point);
+
+// Project point onto plane
+const projected = new THREE.Vector3();
+plane.projectPoint(point, projected);
+```
+
+## Curves
+
+Parametric curves:
+
+```javascript
+// Bezier curve
+const curve = new THREE.CubicBezierCurve3(
+  new THREE.Vector3(-10, 0, 0),
+  new THREE.Vector3(-5, 15, 0),
+  new THREE.Vector3(20, 15, 0),
+  new THREE.Vector3(10, 0, 0)
+);
+
+// Sample points
+const points = curve.getPoints(50);
+const geometry = new THREE.BufferGeometry().setFromPoints(points);
+const line = new THREE.Line(geometry, material);
+
+// Get point at t (0-1)
+const point = curve.getPoint(0.5);
+```