体验 DeepSeek-V4-Flash-Vision-Exp 模型

【本文由 AI 辅助完成】

一次完整的「看图建模 → 视觉验证 → 云端发布」体验记录：把一张东方明珠电视塔的照片，变成可交互的体素 3D 模型。

最近体验了 DeepSeek-V4-Flash-Vision-Exp，一个有视觉能力的模型。我给它出了一个有点意思的端到端任务：只看一张东方明珠电视塔的照片，用 three.js 做一个体素（voxel）风格的 3D 模型，再用 Playwright 截图做视觉验证，最后部署到 Cloudflare Pages，并加上可交互的相机。 这篇文章记录这个过程里模型的表现、我的观察，以及一些值得注意的细节。

任务与背景

东方明珠电视塔的造型很有辨识度：三根斜柱撑起一座大球，向上是细细的中柱，柱上挂着一排水平观测舱，顶部是小球和逐渐收窄的天线。把它做成体素的样子，就是用一堆小立方体堆出这个剪影。

立项约束：

• 技术栈：pnpm + TypeScript + Vite
• 不使用任何 Web 框架（three.js 是库，不是框架）
• 产物放在 ~/lab
• 用 Playwright 截图做视觉验证，拿参考图对比迭代
• 最后部署到 Cloudflare Pages

看图：模型「看懂」了参考图

把参考图交给模型后，它先描述了建筑结构，并把每个部分量化为可程序化的参数：大球中心约在 1/3 高度、半径约为全高的 10%；小球在上方约 78% 高度；天线从 83% 一路收窄到针尖。它不是照着描，而是先理解结构，再转成几何与比例。 这一点让它后面的建模有了骨架。

建模：程序化体素生成器

核心是一个 sample(point) 函数：对空间的每个格子点判断「此处是否有一块体素」，以及该用哪种颜色。塔体由几组几何体组合而成：

• 三根斜柱：从底部（半径 20）向中心收拢到与大球相接处
• 大球：r=12.5，中心在 y=37，上半部分做了红/玻璃的色带
• 中柱：贯穿全塔
• 一排观测舱：水平伸出的小胶囊
• 小球 + 渐细天线针

每个体素对应 InstancedMesh 里一个立方体实例，按区域着色并加一点随机的亮度扰动，形成体素特有的斑驳质感。

// 斜柱：线性内插出一条从底部到中心的圆柱
for (const a of LEG.angles) {
  const t = clamp((y - LEG.y0) / (LEG.y1 - LEG.y0), 0, 1);
  const rr = LEG.baseR + (LEG.topR - LEG.baseR) * t;
  const cx = rr * Math.cos(a), cz = rr * Math.sin(a);
  if (y >= LEG.y0 - 2 && y <= LEG.y1 && Math.hypot(x - cx, z - cz) < LEG.r) c = 1;
}

视觉验证：截图驱动的迭代

模型没有「画完就完」，而是搭了一个 Playwright 截图环：起一个静态服务器托管 dist/，用 Chromium 加载页面，等 WebGL 渲染出第一帧后再截图，然后拿截图和参考图对比。

这样迭代了几轮，问题逐个暴露又逐个被修掉：

1. 初版底座是一整块大圆盘，喧宾夺主 → 改成薄板
2. 斜柱太粗、上下比例不对 → 收细
3. 顶部的「天线」和上球糊成一团 → 重新分层

最值得一提的，是一个很隐蔽的 bug：斜柱的插值在收敛点之上会把 t 钳到 1，导致三根柱子在 y 大于收敛高度之后无限向上延伸，在塔顶形成一根「很粗的柱子」，把天线都淹没了。肉眼从正面很难看出来，但模型不是只靠猜——它写了一个逐层转储体素几何的调试脚本，发现 y=89~99 高度上出现了本不该有的柱体颜色，从而定位到是斜柱没有在上限处截断，一行 && y <= LEG.y1 就修好了。

这种「用数据说话、不只凭肉眼」的排查方式，是这次体验里最打动我的一点。

修完后，四个角度（正、三分之四、侧、背）的截图都干净、一致，剪影一眼就能认出是东方明珠。

发布：云上一键可达

接着让模型把 dist/ 部署到 Cloudflare Pages：

npx wrangler pages project create tower --production-branch main
npx wrangler pages deploy dist --project-name tower --branch main

部署后用 Invoke-WebRequest 确认 HTTP 200、JS 资源可访问，再用 Playwright 打开线上真实页面截图验证 WebGL 场景确实跑起来、0 个控制台错误，而不只是「文件能访问」。

现在的线上地址（项目名 tower）：https://tower-81m.pages.dev/

交互：让镜头活起来

发布后模型又发现一个问题：页面相机是写死的（只能靠 URL 参数调）。于是加了 three.js 的 OrbitControls，支持左键旋转、滚轮缩放、右键平移，并用 maxPolarAngle 约束相机不要钻到地下。加完后又写了一个脚本模拟拖动 + 滚轮，确认视图确实变了、无报错，才重新部署。含交互相机的版本也已上线，同样在 https://tower-81m.pages.dev/。

小结

DeepSeek-V4-Flash-Vision-Exp 在这次体验里展现出几项很实际的能力：

• 视觉理解：能「看懂」参考图的构图与比例，并转成可执行的几何参数
• 完整工程链：脚手架、建模、构建、测试、发布一路做下来，不卡壳
• 工具调用的纪律：用 Playwright 做视觉回归、用调试脚本做数据级定位，而不是停在「看起来对」
• 迭代与纠错：遇到反直觉的现象会去查根因，而不是绕过去

唯一需要人工兜底的是外部凭证与网络（Cloudflare 登录、GitHub 推送这类的访问令牌），这类敏感信息交给模型前还是要谨慎。整体而言，把「看图 → 建模 → 验证 → 上线」交给一个有视觉的模型，是一次很顺畅的体验。