three.js model, downloadable a…

# three.js 奶茶杯招牌建模与GLB导出指南

一、环境准备

• 新建HTML项目，通过CDN引入 three.js 模块（建议 0.16x 版本）
• 额外引入 GLTFExporter（用于导出GLB），路径：three/addons/exporters/GLTFExporter.js
• 推荐用 Vite 本地开发，避免模块路径问题

二、建模思路（纯代码建模，无需建模软件）

1. 杯身（粉色）：用 CylinderGeometry，上宽下窄模拟奶茶杯造型（顶部半径约0.35、底部约0.25，高1.2单位=1.2米）

• 材质：MeshPhysicalMaterial，color 设粉色（如 0xff9eb5），加 transmission/透明度模拟塑料杯质感

2. 盖子（白色）：CylinderGeometry 稍大半径 + 顶部圆顶（SphereGeometry 半球），color 白色

3. 吸管：细长 CylinderGeometry，可加轻微倾斜，插穿盖子，颜色自定（如白色或撞色）

4. （可选）奶茶液体：杯内加一个棕色半透明圆柱增加真实感

三、场景与导出

• 光照：环境光 + 定向光（带阴影），招牌模型建议打光均匀
• 检查无误后调用 GLTFExporter：

```js

const exporter = new GLTFExporter();

exporter.parse(group, (result) => {

const blob = new Blob([result], { type: 'model/gltf-binary' });

const a = document.createElement('a');

a.href = URL.createObjectURL(blob);

a.download = 'milktea-sign.glb';

a.click();

}, (err) => console.error(err), { binary: true });

```

四、官网部署要点

• GLB 文件建议压缩在几MB以内（可用 gltf-pipeline 或 Blender 再压缩Draco）
• 官网加载用 <model-viewer> 标签或 three.js GLTFLoader
• 注意杯身透明材质在导出后检查移动端渲染效果

需要我直接给你一份完整可运行的代码文件吗？