1. 从一块 3D 数据大屏说起为什么我把 Claude Code 拉进了前端可视化项目Three.js 和 Chart.js 放在同一个页面里是很多数据大屏项目的标配组合前者负责 3D 场景、建筑、粒子、光照后者负责折线图、柱状图、环形图这些 2D 数据面板。真正做过的人都知道难点从来不是会不会写而是改起来有多痛。Three.js 的坐标系、材质、光照、阴影、相机切换每一项都能让你在控制台里耗掉半天Chart.js 的配置项又多又碎配色、圆角、交互模式稍微不对整块面板的观感就垮了。Claude Code 是 Anthropic 出的命令行 AI 编程助手直接在终端里跑能读写你本地的项目文件、执行命令、按你的描述改代码。它适合谁适合已经会一点前端、但不想把时间全耗在样板代码和参数调试上的人。我这次拿它做了一个智慧校园 3D 数据看板等距视角的校园场景、建筑群、运动场、移动车辆、粒子喷泉、Chart.js 图表、昼夜切换、建筑悬停提示全程单文件 HTML不引入 webpack/vite。这篇文章不复述每一行代码而是把真实工作流拆开给你看每一轮我发了什么 Prompt、AI 输出了什么、哪里出了问题、怎么让它改。同时把 settings.json 里配置 TaoToken 统一 Key/API 通道的骨架给你让你能直接复现整条链路。核心检索词先摆在这Claude Code 怎么用、Three.js 场景怎么搭、Chart.js 图表怎么渲染、Prompt 怎么写才不返工。2. 前置准备TaoToken 统一 Key 与 Claude Code 的接入位置在开始写 Prompt 之前先把通道这件事解决掉。Claude Code 本身是 CLI 工具它需要一个大模型 API 通道来驱动。我这次用的是 TaoToken 作为统一入口好处是 Key 和 API 地址集中管理后面换模型、加项目都不用改一堆环境变量。官网入口在这里https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content API 基址是 https://taotoken.net/api 这个不加 UTM。你需要先在控制台里创建一个 API Key然后把它写进 Claude Code 的配置里。这里有个关键点Claude Code 读取配置的方式是项目级或用户级的 settings.json。我建议项目级配置因为不同项目可能想用不同的模型或参数。配置骨架长这样{ env: { ANTHROPIC_BASE_URL: https://taotoken.net/api, ANTHROPIC_AUTH_TOKEN: sk-你的TaoToken密钥, ANTHROPIC_MODEL: claude-sonnet-4-20250514 }, permissions: { allow: [ Read, Write, Edit, Bash(npm run *), Bash(node *) ], deny: [] } }几个参数说明一下。ANTHROPIC_BASE_URL指向 TaoToken 的 API 地址这是统一通道的入口ANTHROPIC_AUTH_TOKEN填你在控制台生成的 KeyANTHROPIC_MODEL指定默认模型你可以按需换成别的。permissions.allow里我放开了 Read/Write/Edit 和部分 Bash 命令这样 Claude Code 才能真的去改你的 HTML 文件、跑本地预览命令。如果你只想让它读不想让它写把 Write 和 Edit 去掉即可。注意Key 不要提交到 Git。把 settings.json 加进 .gitignore或者用环境变量注入的方式别把明文密钥推到公开仓库。配置完之后在项目根目录跑claude进入交互模式它会自动读取当前目录的 settings.json。你可以先发一句列出当前目录文件验证通道是否通了——如果它能正常返回文件列表说明 Key 和 API 地址都对了。3. 可复制配置settings.json 骨架与 Prompt 模板3.1 settings.json 的完整骨架上面给的是最小可用版实际项目里我会再加两段。一段是includeCoAuthoredBy控制提交信息里是否带署名另一段是statusLine方便我在终端里随时看到当前模型和 token 消耗。{ env: { ANTHROPIC_BASE_URL: https://taotoken.net/api, ANTHROPIC_AUTH_TOKEN: sk-你的TaoToken密钥, ANTHROPIC_MODEL: claude-sonnet-4-20250514, ANTHROPIC_SMALL_FAST_MODEL: claude-3-5-haiku-20241022 }, permissions: { allow: [ Read, Write, Edit, Bash(node *), Bash(npx serve *) ], deny: [ Bash(rm -rf *) ] }, includeCoAuthoredBy: false }ANTHROPIC_SMALL_FAST_MODEL是给一些轻量任务用的快模型比如让它读文件、总结上下文能省不少 token。deny里我挡掉了rm -rf这是保命配置别省。3.2 Prompt 模板分步迭代的写法我踩过的坑里最大的一个就是想用一段 Prompt 描述整个项目。你给它一句做一个很酷的校园大屏它大概率给你一坨能跑但粗糙的代码然后你想改都无从下手。正确姿势是分步迭代每一轮只做一件事每轮结束都能在浏览器里看到结果。我的 Prompt 模板固定成四段第一段写目标一句话说清这轮要达成什么。第二段写技术约束把版本、导入方式、相机类型、渲染参数定死。第三段写具体清单用编号列出每个子模块带上数量、尺寸、颜色值。第四段写验收标准告诉它改完应该能看到什么。举个第一轮的实际例子目标创建一个校园 3D 可视化场景的 HTML 文件。 技术约束 - Three.js 0.160ES Module 导入import map - 单文件 HTML不引入构建工具 - OrthographicCamera 等距视角带 OrbitControls - 开启 PCFSoftShadowMap 和 ACESFilmicToneMapping 具体清单 1. 场景居中一个标准运动场蓝色圆角矩形跑道内部绿色足球场Canvas 纹理画白线 2. 8 栋不同尺寸的现代建筑分布在运动场周围每栋有白色主体、屋顶女儿墙、入口雨棚 3. 建筑四面均匀排布蓝色玻璃窗户PlaneGeometry 4. 约 30 棵树圆柱树干 三层锥体树冠高度 2-3 米随机 5. 浅色路径连接各建筑 6. DirectionalLight AmbientLight HemisphereLight 实现自然光照 验收标准打开页面能看到等距视角的校园可拖拽旋转缩放建筑和树木位置合理。这个模板的好处是技术约束让 AI 不会用老版本的 CDN script 标签具体清单让它不会偷懒也不会放飞验收标准让你自己知道这轮做完了没有。4. 逐轮实战从场景骨架到 Chart.js 数据面板4.1 第一轮跑通基础 3D 场景按上面的模板发出去AI 生成了一个约 700 行的 campus.html。包含正交相机加 OrbitControls、蓝色圆角跑道加带白线的足球场、8 栋建筑、约 30 棵树、路径网络、完整光照和阴影系统。第一次跑出来就已经能看了这是建立信心的关键。这里有个技术点值得说跑道用 ShapeGeometry 的 holes 参数实现不用手动拼 8 个梯形。AI 自动选了最优雅的实现方式const trackOuter createRoundedRectShape(14, 20, 2.2); const fieldHole new THREE.Path(); fieldHole.moveTo(-4.5, -7.5); // ... 画矩形路径 trackOuter.holes.push(fieldHole); const trackGeom new THREE.ShapeGeometry(trackOuter);等距视角的相机位置也不是随便凑的有数学依据const isoAngle Math.PI / 4; const isoTilt Math.atan(1 / Math.sqrt(2)); // 约 35.26° camera.position.set( isoDist * Math.cos(isoTilt) * Math.sin(isoAngle), isoDist * Math.sin(isoTilt), isoDist * Math.cos(isoTilt) * Math.cos(isoAngle) );等距投影要求三个轴缩放比例相等通过球坐标推导得出俯仰角为 atan(1/√2)。你在 Prompt 里指定 OrthographicCameraAI 就会按这个逻辑算。4.2 第二轮加相机切换和昼夜模式这轮的 Prompt 我写得很具体问题描述精确到数值。比如夜景背景色 #162030、建筑 position.y 设为 h/2 让底部对齐地面、窗户上下各留 10% 边距。AI 输出后加了两个毛玻璃按钮CSS backdrop-filter: blur()实现了双相机系统昼夜切换调整了 10 多个参数。昼夜切换的关键策略是夜景不是把所有灯调暗而是有选择地调整。窗户用 emissive 自发光模拟室内灯光而不是真的加光源。真正的照明交给 SpotLight。对照表如下参数白天夜晚说明ambient.intensity0.550.24整体变暗但不过黑sun.intensity3.20.55方向光大幅减弱matWindow.emissive#000#ffcc77窗户从反射变为发光路灯 emissiveIntensity0.42.2灯泡亮度提升toneMappingExposure1.150.85整体曝光降低SpotLights车灯路灯03.5/2.5夜景下打开实际光源4.3 第三轮单独修 Bug这轮只做修复不加新功能。Prompt 里写相机切换时 target 没有正确保持导致画面跳动应该在 controls.object 切换前后保持 controls.target 不变。同时优化材质建筑主体改亮、玻璃加 clearcoat 0.4、统一用 MeshStandardMaterial 保证 PBR 一致性。Bug 修复单独一轮是重要原则。新功能和修复混在一起AI 容易顾此失彼。单独一轮让它聚焦在问题上效果远超顺便修一下。4.4 第四轮扩展场景规模这是最大的一轮代码增长约 350 行。Prompt 里给了具体数量60 栋外层建筑分 3 环排列、8 辆车在 4 条路上对向行驶、350 个喷泉粒子分 3 层速度。还给了工厂函数命名建议createOuterBuilding、createVehicle让 AI 写出可维护的代码。粒子喷泉的物理逻辑是这样的// 速度更新只有 Y 轴受重力 fountainVelArr[i * 3 1] - GRAVITY * delta; // 位置更新 fountainPosArr[i * 3] fountainVelArr[i * 3] * delta; fountainPosArr[i * 3 1] fountainVelArr[i * 3 1] * delta; fountainPosArr[i * 3 2] fountainVelArr[i * 3 2] * delta; // 落到水面则重置 if (fountainPosArr[i * 3 1] BASIN_Y) resetFountainParticle(i); fountainGeom.attributes.position.needsUpdate true;350 个粒子分 3 层速度高速水柱 3.8-5.3m/s、中速水帘 2.2-3.7m/s、外层散开 1.5-2.5m/s配合 AdditiveBlending 叠加混合实现水雾效果。4.5 第五轮叠加 Chart.js 数据面板这轮在 3D 场景上叠加 2D 数据看板。Prompt 里给了具体假数据包括数值和趋势逻辑12 个月数据体现学期内高峰、寒暑假低谷。Chart.js 的配置项直接写在 Prompt 里避免 AI 用默认值new Chart(ctx, { type: line, data: { labels: [9月,10月,11月,12月,1月,2月,3月,4月,5月,6月,7月,8月], datasets: [ { label: 图书馆入馆(千次), data: [42,48,51,46,30,18,44,49,52,47,22,15], borderColor: #4a9eff }, { label: 体育活动(千人次), data: [28,32,30,26,16,10,29,33,31,27,14,9], borderColor: #4ade80 }, { label: 社团活动(场), data: [18,22,20,17,11,6,19,23,21,18,9,5], borderColor: #f59e0b } ] }, options: { responsive: true, interaction: { mode: index }, plugins: { legend: { labels: { font: { size: 9 } } } } } });柱状图用 borderRadius: 6 做圆角环形图图例放右侧。UI 卡片用 backdrop-filter: blur(10px) 毛玻璃圆角 14px与 3D 场景融合。UI 和 3D 分属不同层CSS fixed z-index互不干扰。4.6 第六轮细节打磨最后一轮不加新功能专注完善。加了 Raycaster 悬停检测监听 mousemove用 Raycaster 检测鼠标下的建筑通过 userData 保存 label跟随鼠标显示 tooltip。昼夜联动涉及多个数组vehicleSpotLights、lampSpotLightsPrompt 里明确了数据结构关系AI 正确实现了 1616 个光源的统一控制。5. 验证请求与成功结果怎么确认整条链路通了配置和代码都写完之后验证分三步走。第一步验证 TaoToken 通道。在项目目录跑claude发一句读取当前目录的 campus.html 并告诉我它有多少行。如果它能返回行数说明 API 通道、Key、模型都正常。这一步不通后面全是白搭。第二步验证 Claude Code 能改文件。发一句在 campus.html 的 body 末尾加一个 id 为 test-badge 的 div内容是 hello。然后grep test-badge campus.html能看到就说明 Write/Edit 权限生效了。第三步验证页面能跑。用npx serve .起一个本地静态服务浏览器打开对应地址。你应该能看到等距视角的校园场景、可拖拽旋转缩放、右上角两个切换按钮、左侧三张 Chart.js 图表、鼠标悬停建筑出现 tooltip。昼夜切换时窗户变暖黄、路灯和车灯亮起、整体曝光降低。如果这三步都过了说明从 Prompt 到 Three.js 场景、Chart.js 图表、再到 settings.json 里的 TaoToken 统一通道整条链路是通的。6. 本篇常见错排查报错一ANTHROPIC_BASE_URL没生效请求打到默认地址。检查 settings.json 是否在项目根目录且claude是从该目录启动的。如果你在子目录启动它读的是子目录的配置。另外确认 JSON 没有语法错误多一个逗号都会导致整段 env 被忽略。报错二Claude Code 说没有写权限。检查permissions.allow里有没有Write和Edit。如果你只放了Read它只能读不能改。改完配置要重启claude会话。报错三Three.js 报import失败。大概率是 import map 没配对或者版本号写错。确认 HTML 里的 importmap 指向three0.160.0/build/three.module.jsOrbitControls 指向three0.160.0/examples/jsm/controls/OrbitControls.js。版本不一致会导致 API 对不上。报错四Chart.js 图表不显示。先看 canvas 元素有没有被 CSS 设成 0 高度。Chart.js 需要父容器有明确高度否则渲染出来是空的。再看responsive: true时父容器有没有position: relative。报错五昼夜切换后画面全黑。检查 ambient.intensity 是不是被调得太低。夜景建议不低于 0.2否则暗部细节全丢。另外确认 toneMappingExposure 没有低于 0.7。报错六Raycaster 悬停检测不准。鼠标坐标要转成 NDC归一化设备坐标公式是(event.clientX / width) * 2 - 1和-(event.clientY / height) * 2 1。漏了负号会导致 Y 轴反向。排障和接入相关的问题建议直接对照 API Keys 和接入文档https://taotoken.net/api-keys?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content 和 https://taotoken.net/doc?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content 。想先验证模型对话效果可以去模型对话页https://taotoken.net/chat?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content 。如果你打算长期用 Claude Code 做编码和 Agent 任务Coding Plan 更划算https://taotoken.net/coding-plan?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content 。最后说一个我自己的经验分步迭代的节奏比 Prompt 写得多漂亮更重要。第一版唯一的目标就是能跑接受粗糙之后每一轮代码都在变好。2 小时做出传统要 3-5 天的 3D 大屏不是神话是把写需求这件事做对了。