morph3d-js
描述
Morph3D 是实时动画:由点云组成的变形体。由数百个小点组成的单一对象持续旋转、在屏幕上漂移,并平滑变换为三种几何体 - 球体、立方体与甜甜圈(圆环)。项目有两个颜色主题:Light(默认)在白色背景上以黑灰色绘制点,Dark 则在黑色背景上使用柔和霓虹色,且颜色在调色板之间平滑变化。在两种主题中每个点的色调都由其深度决定,因此扁平点云呈现为立体三维形状。
项目是无外部依赖的 JavaScript / HTML5 Canvas 2D 演示场景,移植自原 OpenGL Windows 屏保。原始动画逻辑取自 morph3d-src 项目 - 图形生成、变形状态机、旋转、屏幕运动与透视投影 - 以纯 Canvas 2D 实现替代原生 OpenGL 渲染,可在任何现代浏览器中运行。
技术
- JavaScript(ES6)- 现代语法、strict mode、完全自包含
- HTML5 Canvas 2D - 所有绘制经 canvas 2D 上下文(填充圆);无 WebGL
- requestAnimationFrame - 动画循环由浏览器帧回调驱动
- 按时间增量更新 - 运动与变形遵循真实流逝时间,因此在 60 Hz 与 144 Hz 显示器上速度一致
- 按 devicePixelRatio 缩放 - canvas 后备存储随显示密度缩放以清晰渲染
- 无外部依赖 - 无 npm 包、无 Three.js、无构建工具