跳到正文
网页珍奇柜Web Curio

桌面电脑里的作品集

Henry Heffernan Portfolio,Henry Heffernan,2022 年

正在布展…

本柜的现场复刻:按原作的技术思路从零编写,不含原作的代码和素材。为什么不直接展出原作:原作屏幕里嵌入了第三方游戏图片和作者的个人资料,无法收录;这里从零搭了夜晚书桌上的一台米色 CRT 电脑(three.js),屏幕是一块 320×240 画布纹理上的小操作系统(开机自检文字、可拖动窗口、照片、留言簿、系统监视),经 CRT 着色器加桶形畸变、扫描线、荫罩和暗角。点击显示器镜头推近即可直接在屏幕里操作,Esc 退回;点击后有风扇底噪与按键声。原作请点上方「去看原作」。

它是怎么做的

  1. 第 1 步主场景用 WebGL 渲染烘焙光照的桌面模型
  2. 第 2 步显示器内容是一个独立的 React 站点,用 CSS3DRenderer 嵌入的 iframe 对齐到屏幕平面
  3. 第 3 步WebGL 屏幕网格上叠加 CRT 扫描线/暗角着色器,让 HTML 看起来像在玻璃后面
  4. 第 4 步相机在“桌面视角”和“屏幕视角”之间缓动,配合 Web Audio 环境声

复刻配方

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

Render a baked-lighting desk scene in WebGL, then create a CSS3DRenderer layer whose iframe is positioned and scaled to exactly match the monitor's screen quad. Punch a hole in the WebGL canvas at the screen (render the screen mesh with a blending mode that writes transparent pixels) so the DOM shows through, and draw a translucent CRT overlay with scanlines and vignette on top. Tween the camera between an overview pose and a straight-on screen pose on click, and layer ambient hum and key-click samples via the Web Audio API.

档案

能不能拿来用

原作以 MIT 许可开源:可以阅读源码学习,按许可证条款使用;在自己的项目里引用时保留原作者署名。

性能开销

视觉强度

实现难度

尺度为策展判断(1 到 5),用于比较和推荐。

核实记录:Demo loads (200); repo has MIT licence.