这是什么
一个 Three.js 配方，做一个多面首屏物件：二十面体几何、MeshStandardMaterial、透视相机、主光加轮廓光、阴影平面、缓慢浮动旋转。
Create a real 3D WebGL object with geometric mesh depth, physically based material, directional and ambient lighting, perspective camera, subtle rotation, and floating motion. Use when a page needs a faceted 3D hero obje
它对设计意味着什么
- 真实的几何和打光造出边缘、高光和阴影，CSS 变换假装不来。
- 材质预设覆盖高级金属、柔和陶瓷和带辉光的科技感。
- 动效只限于缓慢旋转和小幅上下浮动，文案始终是主角。
包含哪些内容
- Rules
- HTML and CSS
- Three.js object recipe
- Material defaults
- Lighting defaults
- Quick checks
如何安装
WebGL 3D Object
-
克隆这个仓库。
git clone https://github.com/MengTo/Skills -
把 Codex 指向这个 Skill 文件。
agent-skills/web-design/webgl-3d-object/SKILL.md -
然后描述你想要的界面，Codex 会照着这个 Skill 来做。
如何配合 Codex 使用
-
加一个方形 canvas 外壳，再在上面跑 Three.js 初始化。
-
调 color、metalness、roughness 和 emissive，贴合品牌调性。
-
确认好 resize 处理，以及几何、材质和渲染器的销毁。
这里的每个插件都免费开源，并附上真实的上游源地址。
在 codex-design 清单上了解更多 ↗
下一步
用 Open Design 做设计，省掉那些配置
你可以自己装这个插件，也可以用 Open Design 在 Codex 外面套一整层精选设计层。自带 API Key，产出归你所有。