thanh-kit 2.5.0

package/templates/skills/threejs/references/04-cameras.md

@@ -0,0 +1,195 @@
+# Cameras
+
+Define viewpoint and projection for rendering.
+
+## Perspective Camera
+
+Realistic camera with field of view (most common):
+
+```javascript
+const camera = new THREE.PerspectiveCamera(
+  fov,    // field of view in degrees (typically 45-75)
+  aspect, // width / height
+  near,   // near clipping plane (typically 0.1)
+  far     // far clipping plane (typically 1000)
+);
+
+camera.position.set(0, 5, 10);
+camera.lookAt(0, 0, 0);
+
+// Update after changing parameters
+camera.fov = 60;
+camera.updateProjectionMatrix();
+```
+
+## Orthographic Camera
+
+No perspective distortion (parallel projection):
+
+```javascript
+const frustumSize = 10;
+const aspect = window.innerWidth / window.innerHeight;
+const camera = new THREE.OrthographicCamera(
+  frustumSize * aspect / -2, // left
+  frustumSize * aspect / 2,  // right
+  frustumSize / 2,           // top
+  frustumSize / -2,          // bottom
+  0.1,                       // near
+  1000                       // far
+);
+
+// Useful for: 2D games, CAD, isometric views
+```
+
+## Camera Controls (Addons)
+
+### OrbitControls (Most Common)
+```javascript
+import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
+
+const controls = new OrbitControls(camera, renderer.domElement);
+controls.target.set(0, 0, 0);
+controls.enableDamping = true;   // smooth motion
+controls.dampingFactor = 0.05;
+controls.minDistance = 5;
+controls.maxDistance = 50;
+controls.maxPolarAngle = Math.PI / 2; // prevent going below ground
+
+// In animation loop
+function animate() {
+  controls.update(); // required if enableDamping = true
+  renderer.render(scene, camera);
+}
+```
+
+### FirstPersonControls
+```javascript
+import { FirstPersonControls } from 'three/addons/controls/FirstPersonControls.js';
+
+const controls = new FirstPersonControls(camera, renderer.domElement);
+controls.movementSpeed = 10;
+controls.lookSpeed = 0.1;
+
+const clock = new THREE.Clock();
+function animate() {
+  const delta = clock.getDelta();
+  controls.update(delta);
+  renderer.render(scene, camera);
+}
+```
+
+### FlyControls
+```javascript
+import { FlyControls } from 'three/addons/controls/FlyControls.js';
+
+const controls = new FlyControls(camera, renderer.domElement);
+controls.movementSpeed = 10;
+controls.rollSpeed = Math.PI / 24;
+controls.dragToLook = true;
+```
+
+### TransformControls
+```javascript
+import { TransformControls } from 'three/addons/controls/TransformControls.js';
+
+const controls = new TransformControls(camera, renderer.domElement);
+controls.attach(mesh);
+scene.add(controls);
+
+// Switch modes
+controls.setMode('translate'); // or 'rotate', 'scale'
+
+// Events
+controls.addEventListener('change', () => renderer.render(scene, camera));
+controls.addEventListener('dragging-changed', (event) => {
+  orbitControls.enabled = !event.value;
+});
+```
+
+## Camera Methods
+
+```javascript
+// Position and orientation
+camera.position.set(x, y, z);
+camera.lookAt(x, y, z); // or lookAt(vector3) or lookAt(object.position)
+camera.up.set(0, 1, 0); // define "up" direction
+
+// Get world direction
+const direction = new THREE.Vector3();
+camera.getWorldDirection(direction);
+
+// Screen to world conversion
+const mouse = new THREE.Vector2(x, y); // normalized device coords (-1 to 1)
+const raycaster = new THREE.Raycaster();
+raycaster.setFromCamera(mouse, camera);
+
+// World to screen
+const vector = new THREE.Vector3(x, y, z);
+vector.project(camera); // now in normalized device coords
+```
+
+## Layers
+
+Selective rendering with layers:
+
+```javascript
+// Set object layers
+mesh.layers.set(1);
+
+// Set camera layers
+camera.layers.enable(0); // render layer 0
+camera.layers.enable(1); // render layer 1
+camera.layers.disable(2); // don't render layer 2
+
+// Objects on disabled layers won't be rendered
+```
+
+## Frustum Culling
+
+Automatic optimization (objects outside view are not rendered):
+
+```javascript
+// Manually check if object is in view
+const frustum = new THREE.Frustum();
+const matrix = new THREE.Matrix4().multiplyMatrices(
+  camera.projectionMatrix,
+  camera.matrixWorldInverse
+);
+frustum.setFromProjectionMatrix(matrix);
+
+if (frustum.containsPoint(object.position)) {
+  // Object is visible
+}
+```
+
+## Multiple Cameras
+
+```javascript
+const mainCamera = new THREE.PerspectiveCamera(...);
+const minimapCamera = new THREE.OrthographicCamera(...);
+
+// Render with different viewports
+renderer.setViewport(0, 0, width, height);
+renderer.render(scene, mainCamera);
+
+renderer.setViewport(width - 200, height - 200, 200, 200);
+renderer.render(scene, minimapCamera);
+```
+
+## Resize Handling
+
+```javascript
+window.addEventListener('resize', () => {
+  // Perspective camera
+  camera.aspect = window.innerWidth / window.innerHeight;
+  camera.updateProjectionMatrix();
+
+  // Orthographic camera
+  const aspect = window.innerWidth / window.innerHeight;
+  camera.left = -frustumSize * aspect / 2;
+  camera.right = frustumSize * aspect / 2;
+  camera.updateProjectionMatrix();
+
+  renderer.setSize(window.innerWidth, window.innerHeight);
+});
+```

package/templates/skills/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/templates/skills/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"
+});
+```