跳到正文
网页珍奇柜Web Curio

机械表的内部

Mechanical Watch，Bartosz Ciechanowski，2022 年

去看原作（在新窗口打开）网页存档（互联网档案馆，在新窗口打开）和其他藏品比较

正在布展…

本柜的现场复刻：按原作的技术思路从零编写，不含原作的代码和素材。原作请点上方「去看原作」。

它是怎么做的

  1. 第 1 步每个插图是一个独立的 canvas，随滚动进入视口时才初始化和渲染
  2. 第 2 步零件模型以程序化方式生成，在自写的 WebGL 渲染器里绘制
  3. 第 3 步滑块直接驱动机械参数（如发条张力、摆轮角度），模型实时联动
  4. 第 4 步拖拽旋转相机，可从任意角度观察齿轮啮合
  5. 第 5 步适度的阴影与环境光让小图在白色页面上清晰而克制

复刻配方

一段技术配方，可以直接交给 AI 编程助手，也可以自己照着写。想指定技术栈、位置和性能预算，就把它加入实现方案。

Write the article as normal HTML and place a canvas for each figure; use IntersectionObserver to start rendering only the figures on screen. Build each part (gears, springs, pallet fork) procedurally as meshes in JavaScript and draw them with a minimal WebGL renderer using simple lighting and soft ambient occlusion. Tie sliders under each figure to a single mechanical parameter so readers can scrub the mechanism, and let pointer drag orbit the camera. Keep the visual style restrained (white background, muted materials) so the text leads.

定制成完整的实现提示词

档案

能不能拿来用

原作不是开源许可（proprietary — inspiration only）：只能作为视觉参考，不要复制它的代码或素材，自己按技术思路实现。

性能开销

视觉强度

实现难度

尺度为策展判断（1 到 5），用于比较和推荐。

核实记录：Opened https://ciechanow.ski/mechanical-watch/ (200, title 'Mechanical Watch – Bartosz Ciechanowski'). No public source repository.