Clyune Component GalleryCharacter Animation · How it works & code
Hierarchical Model with Skeletal Animation
Runtime logic
Visiting `/threejs/character`, DemoHost lazy-loads `demos/gltf-shapes.js` (registry `mod: 'gltf-shapes'`) and calls `mountGltfShapes(host, { variant: 'character' })`. `createThreeStage` sets up WebGLRenderer, Scene, PerspectiveCamera and OrbitControls, plus the info panel. The module registers its per-frame callback with `S.onFrame`. Every `requestAnimationFrame`: read controls, advance a speed-scaled clock (dt ≤ 50 ms), run the frame callback; returned readouts go to the info panel. Changing parameters: colour/speed/size apply live; structural ones remount; leaving the page cancels rAF, removes listeners and frees resources.
Environment
Canvas 2D: 2D canvas drawing; WebGL (three.js): WebGL through three.js WebGLRenderer; requestAnimationFrame: Display-synced animation loop; ResizeObserver: Canvas follows container size; Pointer Events: Unified mouse/touch/pen events; devicePixelRatio: Crisp HiDPI rendering (capped at 2×) · react 18.3.1, react-router-dom 6.30.6, vite 5.4.21, three 0.170.0
Dependencies
three 0.170.0, three/addons/controls/OrbitControls.js 0.170.0, react 18.3.1
Imported APIs
createThreeStage — Shared three.js stage: WebGLRenderer, scene, perspective camera, OrbitControls, auto framing and render loop; THREE — three.js namespace; fmt — Number formatting (fixed decimals); deg — Radians → degrees text; F — Formula block HTML; S.onFrame — Registers a per-frame callback; its return value feeds the info panel; THREE.HemisphereLight — Sky/ground hemisphere light; THREE.SpotLight — Spot light; THREE.Group — Group container; THREE.MeshStandardMaterial — PBR standard material; THREE.Mesh — Mesh (geometry + material); THREE.CapsuleGeometry — Capsule geometry; THREE.SphereGeometry — Sphere geometry; THREE.BoxGeometry — Box geometry; THREE.GridHelper — Grid helper
Source code
frontend/src/demos/gltf-shapes.js: gltf-shapes.js (L1-L60)
Code walkthrough
L4-10: `PARAMS_SPEC` (constant/table). L11-11: `W0` (constant/table). L12-12: `D` (constant/table). L13-28: `DOC` (constant/table). L30-60: `mountGltfShapes` (function); creates three.js objects `HemisphereLight`, `SpotLight`, `Group`, `MeshStandardMaterial`, `Mesh`, `CapsuleGeometry` …; math via `Math.sin`, `Math.abs`; returns readouts `aL`, `aR`, `leg`, `A`, `w`, `yaw`, `turn` to the info panel.
Principles
θL(t) = A · sin(ω·t) θR(t) = −A · sin(ω · Subsequent Sub-object world transformation = Father Change × Self Transformation The role consists of the capsule body, the spherical head, the two arms and the two legs, all on the same side Group (Parent objects) Bottom: Father objects turn around, all parts turn together——This is it Level Model , It's the same as animation. Put one in each arm first Shoulder 的“Joint”节点里，旋转关节时手臂绕肩膀摆动，而不是绕手臂中心乱转。左右手臂相差半个周期（反相），腿与同侧手臂也反相，看起来就像在走路。