Clyune Component GalleryOrbit Controls + Lights · How it works & code
OrbitControls with Multiple Lights.
Runtime logic
Visiting `/threejs/orbit`, DemoHost lazy-loads `demos/orbit.js` (registry `mod: 'orbit'`) and calls `mountOrbit(host, { variant: 'orbit' })`. `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.Fog — Linear fog; THREE.HemisphereLight — Sky/ground hemisphere light; THREE.DirectionalLight — Directional (sun) light; THREE.PointLight — Point light; THREE.Mesh — Mesh (geometry + material); THREE.CircleGeometry — Circle geometry; THREE.MeshStandardMaterial — PBR standard material; THREE.SphereGeometry — Sphere geometry; THREE.TorusGeometry — Torus geometry
Source code
frontend/src/demos/orbit.js: orbit.js (L1-L60)
Code walkthrough
L4-13: `PARAMS_SPEC` (constant/table). L14-30: `DOC` (constant/table). L32-60: `mountOrbit` (function); creates three.js objects `Fog`, `HemisphereLight`, `DirectionalLight`, `PointLight`, `Mesh`, `CircleGeometry` …; returns readouts `ring`, `w`, `key`, `fill`, `metal`, `lum` to the info panel.
Principles
Brightness ≈ Σ Iᵢ · max(0, N·Lᵢ) + Environment light Camera Location = Target + r · (sinφ · sinθ, cosφ, sinφ · cosθ) OrbitControls 让相机像卫星一样绕着目标点转：拖动改变方位角/Over the corner. The wheel changes distance r（It's described by the coordinates of the ball. There are three lights in the scene: Hemispheric light/Two colors on the ground), Lord Light (♪ Direction light, shadows ♪ Fill (Cyan point light source. The brightness of an object at some point is roughly“Per lamp strength × The cosine of the light direction and the angle of the surface line”And the sum. Metalness The higher the ball, the more mirrored, the greater the reflection environment and the higher the light; the lower the reflection, the greater the reflection.