cokit-cli 1.0.8 → 1.0.9

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

@@ -1,195 +0,0 @@
-# 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/skills/ck-threejs/references/05-lights.md

@@ -1,183 +0,0 @@
-# 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/ck-threejs/references/06-animations.md

@@ -1,214 +0,0 @@
-# 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"
-});
-```