实验 / CREATIVE LAB
视觉实验室 Creative Lab
这里收集 SVG 线稿、Canvas 动画与 3D 交互实验，也会继续记录创作过程。较重的互动程序只显示静态封面，点击后才启动完整画面。
- 实验
- 5
- SVG
- 2
- 互动
- 3
- 封面
- 3
视觉实验 #01
鹈鹕测试
Pelican Test / Blueprint Study
把鹈鹕的轮廓、鸟喙与身体比例拆解为路径、圆和坐标辅助线。让一张蓝图草稿变成可缩放、可暂停与重播的网页 SVG。
- 类型
- 过程实验
- 年份
- 2026
- 使用工具
- SVG · CSS · JavaScript
前期以鹈鹕蓝图风格图像作为造型参考；网页展示使用独立编写的 SVG 元素，不把 PNG 图片冒充矢量文件。
一只鸟，很多根线
这件小实验的重点不是画出多写实的鹈鹕，而是观察简单的矢量图形如何组成一个可以辨认的形象：喙的长线、颈部的弧度、翅膀的层次，以及包围它的比例圆和辅助轴。
可以动手试试
点击 「辅助线」 可以让几何构造标记显现或隐藏；点击 「重播」 则从头观察轮廓被描绘出来的过程。SVG 会跟随容器宽度缩放，不需要依靠一张固定尺寸的图片。
记录
这是一个独立的网页 SVG 交互习作，不是工程测绘图，也不是标准化的动物解剖图。蓝图风格中的刻度和标注用于辅助阅读画面，不代表真实测量数据。
视觉实验 #02
建筑测试
Architecture Test / Wireframe Study
以现代主义建筑的平面、立面与透视关系为线索，用纯 SVG 路径搭出一座可动画绘制的小型线框建筑。
- 类型
- 过程实验
- 年份
- 2026
- 使用工具
- SVG · CSS · JavaScript
以现代主义建筑蓝图风格图像作为概念参考；页面中的建筑路径、网格和标注采用原生 SVG/CSS 实现，可缩放且支持减少动态效果设置。
在二维页面上搭一座建筑
从屋顶的水平线、立柱的垂直线开始，再叠加玻璃幕墙、露台和透视辅助线。这里的建筑不是一个真实建造项目，而是对「建筑图纸如何转化为网页图形」的一次尝试。
可以动手试试
点击 「辅助线」，单独查看建筑的主体轮廓；点击 「重播」，让线段按顺序绘制。那些看起来属于 CAD 的结构信息，在这里被当作编辑设计语言使用。
记录
这是用于视觉构成与动效研究的示意线框，并非可施工的建筑方案。所有尺寸、构造和位置关系仅作图形表达，不提供建筑设计或结构计算依据。
视觉实验 #03
鹈鹕骑行 · 天气循环
Pelican Cycling / Weather Loop
一只骑自行车的鹈鹕在不断向前的公路上穿行，场景依次经历晴天、阴天与雨天。使用 Canvas 2D 实时绘制，不依赖视频文件。
- 类型
- 互动实验
- 年份
- 2026
- 使用工具
- HTML · Canvas 2D · JavaScript
来自提供的 pelican_bike.html 原型；保留程序绘制和自动天气循环。它使用 Canvas 2D，不是可编辑 SVG。
一段会变天的骑行
白色鹈鹕踩着单车前进，道路、栅栏、远山与树木不断向后移动。画面每隔一段时间切换天气，从晴天过渡到阴天、雨天，再继续循环。
技术与展示
画面由 JavaScript 在 Canvas 上实时绘制，人物与环境跟随视口重新排布，不是预先录制的视频。LAB 中使用静态封面，只有主动打开完整体验时才运行循环动画。
视觉实验 #04
NA-01 镂空机械表
Squelette / Interactive Watch
用 Three.js 建立一个可以旋转、切换视角并显示机械结构的概念腕表。独立页面提供爆炸视图、夜光、自动旋转与信息标签。
- 类型
- 互动实验
- 年份
- 2026
- 使用工具
- HTML · Three.js · WebGL · JavaScript
由提供的 skeleton_watch.html 原型整理，经本地 Three.js 打包后在站内独立运行，不依赖外部 CDN。仅用于视觉化概念展示，不代表真实可制造机芯或产品品牌。
机械结构，也可以是一种视觉语言
用可交互的三维结构观察腕表零件层次。前后与侧面视角、爆炸模式、自动旋转和夜光开关，让本来静止的概念图变成可探索的模型。
在新标签页打开；拖动旋转，使用底部按钮切换视角、爆炸视图、夜光和标签。
这项 3D 实验需要 WebGL，可能增加设备负载，建议先关闭不需要的后台 3D 页面。
技术与展示
这是一段 3D WebGL 交互程序，不是 SVG 插画。为了减少网络依赖，原型使用的 Three.js 已随站点本地打包，首页和 LAB 不会自动加载模型。
此项目为实验性三维表现，不等同于真实腕表的机械结构设计或商业产品。
视觉实验 #05
古刹 · 体素中式寺院
Voxel Temple / Procedural Architecture
由体素程序搭建的中式寺院建筑群，从山门、钟鼓楼、庭院到主殿和宝塔。可切换晨昏、镜头位置、旋转和画质。
- 类型
- 互动实验
- 年份
- 2026
- 使用工具
- Three.js · WebGL · Vite · 程序化体素建模
来自提供的 voxel-temple.zip 项目，保留 Three.js 场景与调光、切换视角等功能，作为独立站内体验运行；它不是建筑施工图或真实古建筑复原。
把古建筑拆成体素
山门、钟鼓楼、殿堂、树木和宝塔用重复的体素积木搭建。程序先生成场景结构，再合并可见面，结合材质与光照呈现偏游戏美术的建筑世界。
在新标签页打开。拖动旋转、滚轮缩放，底部可切换清晨、正午、黄昏、夜晚和不同建筑视角。
这项 3D 实验需要 WebGL，可能增加设备负载，建议先关闭不需要的后台 3D 页面。
技术与展示
本实验采用 Three.js 与 WebGL 渲染，保留原型提供的昼夜预设、自动旋转与画质选项。它是想象中的体素中式寺院，并非真实文物数字复原或具有工程依据的建筑方案。
为了照顾性能，LAB 仅加载静态截图，完整模型必须由访问者主动开启。