Clyune Component GalleryGeometry Gallery · How it works & code
Built-in geometries with ray picking.
Runtime logic
Visiting `/threejs/gallery`, DemoHost lazy-loads `demos/gallery.js` (registry `mod: 'gallery'`) and calls `mountGallery(host, { variant: 'gallery' })`. `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; addLights — Adds ambient + key + fill lights; THREE — three.js namespace; fmt — Number formatting (fixed decimals); triCount — Counts triangles in a geometry; F — Formula block HTML; S.setFitRadius — Sets the 3D framing radius; S.onFrame — Registers a per-frame callback; its return value feeds the info panel; THREE.BoxGeometry — Box geometry; THREE.SphereGeometry — Sphere geometry; THREE.ConeGeometry — Cone geometry; THREE.TorusGeometry — Torus geometry; THREE.OctahedronGeometry — Octahedron geometry; THREE.IcosahedronGeometry — Icosahedron geometry; THREE.Mesh — Mesh (geometry + material); THREE.MeshStandardMaterial — PBR standard material; THREE.GridHelper — Grid helper; THREE.Raycaster — Ray picking; THREE.Vector2 — 2D vector; THREE.Color — Colour object
Source code
frontend/src/demos/gallery.js: gallery.js (L1-L89)
Code walkthrough
L4-10: `PARAMS_SPEC` (constant/table). L11-18: `SPECS` (constant/table); creates three.js objects `BoxGeometry`, `SphereGeometry`, `ConeGeometry`, `TorusGeometry`, `OctahedronGeometry`, `IcosahedronGeometry`. L19-34: `DOC` (constant/table). L36-89: `mountGallery` (function). L37-59: defines `S`; creates three.js objects `Mesh`, `MeshStandardMaterial`, `GridHelper`, `Raycaster`, `Vector2`; math via `Math.max`, `Math.ceil`, `Math.floor`. L60-88: defines `onUp`; creates three.js objects `Color`; math via `Math.hypot`; returns readouts `name`, `verts`, `tris`, `ctor`, `s`, `layout` to the info panel.
Principles
/80 R(t) = camera position + t · Direction Mouse pixels → NDC: x = 2 · px / W − 1，y = 1 − 2 · py / H Three.js A lot of it Geometry ，它们都由很多三角形拼成；分段越多越圆滑，但三角形也越多。 When clicking, the mouse position is converted to −1~1 的“Standard Coordinates”，One from the camera in this direction Ray Raycaster ，第一个被射线穿过的物体就是你点中的那个，然后给它加上自发光高亮。