1. 为什么我决定用 Claude Code 搭一块 3D 智慧校园大屏先说清楚这块大屏是什么、能做什么、适合谁看。它是一块跑在浏览器里的 3D 数据可视化页面中间是等距视角的校园场景有运动场、教学楼、道路、车辆、喷泉粒子右侧和顶部叠加 Chart.js 图表与统计指标支持白天/夜景切换和建筑悬停提示。适合三类人想入门 Three.js 但被坐标系劝退的前端、想体验 AI 编程助手真实工作流的开发者、以及需要快速交付演示级数据大屏的团队。传统做法里3D 大屏的坑集中在三块Three.js 的相机与光照参数、Chart.js 与 3D 场景的层级叠加、以及反复调材质和配色。一个熟练的 Three.js 开发者做完整效果保守估计要 3 到 5 天。我这次全程用 Claude Code 作为 AI 编程助手通过分步迭代的方式把整个链路压缩到几轮对话内完成。但这里有个容易被忽略的前置问题Claude Code 这类命令行 AI 编程助手要稳定工作需要一个可用的模型接入通道。我这次用的是 TaoToken 统一 Key 方案把模型调用收敛到一个 API 通道里避免在多个 Key 之间来回切换。下面我会先讲清楚 TaoToken 的接入准备再给出可直接复制的 settings.json 骨架最后用三步验证动作确认整条链路跑通然后进入 3D 大屏的生成实战。整篇文章的结构是先解决AI 编程助手能不能稳定调用模型这个前置问题再解决怎么让 AI 生成可维护的 3D 大屏代码这个核心问题。前者是后者的地基地基不稳后面每一轮对话都可能因为请求失败而中断。2. TaoToken 前置准备统一 Key 与 API 通道2.1 为什么需要统一 KeyClaude Code 在终端里运行时每一次代码生成、每一次文件读写建议背后都是一次模型请求。如果你手上有多个来源的 Key配置会变得很碎环境变量一套、项目配置一套、不同工具再各一套。TaoToken 的思路是把这些收敛成一个统一 Key 加一个 API 通道Claude Code、其他 AI 编程助手、以及你后续可能接入的脚本都走同一个入口。这样做的好处很直接配置只写一次排障时只需要检查一个通道换工具时不用重新配 Key。对于要长期跑编码任务和 Agent 流程的场景这一点比单次调用省下的那点成本重要得多。2.2 拿到 Key 与确认通道地址你需要先准备好两样东西一个 TaoToken 的 API Key以及确认 API 通道地址。通道地址是https://taotoken.net/api注意这个地址不带任何查询参数配置时直接写这个即可。官网入口在https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content注册和查看文档都从这里进。Key 的创建在控制台的 API Keys 页面完成地址是https://taotoken.net/console/api-keys?utm_sourcetaotoken_aicg_blog_endutm_contentapi_keysutm_campaignrewrite。创建后立刻复制保存页面刷新后通常不再完整显示。注意Key 属于敏感凭证不要写进会提交到 Git 的配置文件里。本地开发建议用环境变量或单独的本地配置文件并在 .gitignore 里排除。2.3 确认模型可用性在正式配置 Claude Code 之前建议先去模型对话页面做一次最小验证确认你的 Key 能正常调用目标模型。模型对话入口是https://taotoken.net/chat?utm_sourcetaotoken_aicg_blog_endutm_contentmodel_chatutm_campaignrewrite。发一句简单的话比如回复 ok能正常返回就说明 Key 和通道都没问题。这一步看起来多余但实际能省掉大量排障时间。很多人配置 Claude Code 失败后第一反应是怀疑 settings.json 写错了结果折腾半天发现是 Key 本身没生效。先验证 Key再验证配置排障路径会清晰很多。3. 可复制的 settings.json 配置骨架3.1 Claude Code 的配置位置Claude Code 读取配置的优先级大致是项目级配置 用户级配置。项目级配置放在项目根目录的.claude/settings.json用户级配置放在用户主目录下的.claude/settings.json。我建议先用项目级配置这样每个项目的接入参数互相隔离也方便随项目一起做版本管理记得把 Key 抽到环境变量里。3.2 完整配置片段下面是我实际使用的 settings.json 骨架。核心是把 API 通道指向 TaoToken 的统一入口并通过环境变量注入 Key避免明文写死在文件里。{ env: { ANTHROPIC_BASE_URL: https://taotoken.net/api, ANTHROPIC_AUTH_TOKEN: ${TAOTOKEN_API_KEY}, ANTHROPIC_MODEL: claude-sonnet-4-20250514 }, permissions: { allow: [ Read, Write, Edit, Bash(npm run *), Bash(node *) ], deny: [] }, includeCoAuthoredBy: false }几个关键点解释一下。ANTHROPIC_BASE_URL指向 TaoToken 的 API 通道这是整个配置的地基。ANTHROPIC_AUTH_TOKEN用${TAOTOKEN_API_KEY}引用环境变量实际值在 shell 里设置不落盘到配置文件。ANTHROPIC_MODEL指定默认模型你可以按需替换成其他可用模型。permissions.allow里我放开了 Read、Write、Edit 和几个常用 Bash 命令这样 Claude Code 在生成 3D 大屏代码时能直接读写文件、跑本地服务不用每次弹确认。3.3 环境变量设置在 shell 里设置 KeymacOS 和 Linux 用 exportWindows PowerShell 用$env:。# macOS / Linux写入 ~/.zshrc 或 ~/.bashrc 后 source 生效 export TAOTOKEN_API_KEY你的实际Key# Windows PowerShell当前会话生效 $env:TAOTOKEN_API_KEY你的实际Key设置完可以用echo $TAOTOKEN_API_KEYPowerShell 用echo $env:TAOTOKEN_API_KEY确认变量已注入。如果输出为空说明变量没生效Claude Code 启动时会因为拿不到 Token 而请求失败。3.4 权限配置的取舍permissions.allow这一块值得单独说。默认情况下 Claude Code 每次写文件、跑命令都会请求确认这在生成 3D 大屏这种需要反复改文件、反复起本地服务的场景里会非常打断节奏。我放开了 Read、Write、Edit 和npm run *、node *基本覆盖了前端项目的日常操作。但如果你在敏感项目里工作建议收紧到只放开 Read 和 EditBash 命令保持手动确认。4. 三步验证确认整条链路跑通4.1 第一步验证 API 通道连通性配置写完后先用一个最小请求确认通道能通。用 curl 直接打 TaoToken 的 API 地址看返回是否正常。curl -X POST https://taotoken.net/api/v1/messages \ -H Content-Type: application/json \ -H x-api-key: $TAOTOKEN_API_KEY \ -H anthropic-version: 2023-06-01 \ -d { model: claude-sonnet-4-20250514, max_tokens: 64, messages: [{role: user, content: 回复 ok}] }如果返回里包含正常的文本内容说明 Key 和通道都没问题。如果返回 401检查 Key 是否正确注入如果返回 404 或连接超时检查 BASE_URL 是否写成了带路径的地址。4.2 第二步验证 Claude Code 能启动并读取配置在项目根目录下启动 Claude Code然后让它做一个最简单的动作比如读取当前目录的文件列表。claude进入交互后输入列出当前目录下的所有文件。如果 Claude Code 能正常返回文件列表说明它已经成功读取了 settings.json并且通过 TaoToken 通道完成了模型调用。这一步验证的是配置链路不是模型能力。4.3 第三步验证代码生成与文件写入让 Claude Code 生成一个最小 HTML 文件并写入磁盘确认 Write 权限和模型输出都正常。# 在 Claude Code 交互中输入 创建一个 index.html内容是一个显示 3D 大屏验证通过 的页面执行后检查项目目录下是否真的出现了 index.html内容是否符合预期。这三步走完说明从 Key 到通道到 Claude Code 到文件写入的整条链路已经打通可以进入正式的 3D 大屏生成环节。提示如果第三步文件没生成优先检查 permissions.allow 里是否包含 Write。很多人卡在这里以为是模型问题其实是权限没放开。5. 用 Claude Code 生成 3D 智慧校园大屏的实战流程5.1 核心策略分步迭代一次只做一件事这是整个实战里最重要的一条经验。不要试图用一段 Prompt 描述整个项目。你给 AI 一句做一个很酷的校园大屏它大概率给你一坨能跑但粗糙的代码然后你想改都无从下手。正确姿势是分步迭代每一轮只做一件事每轮改完都能跑、能看、能验证。我实际用的轮次划分是这样的第一轮搭基础 3D 场景骨架第二轮加相机切换和昼夜模式第三轮单独修 Bug 和调参数第四轮扩展场景规模加道路车辆喷泉第五轮叠加 Chart.js 数据看板第六轮做细节打磨。每一轮的产物都是可交付的中间版本。5.2 第一轮基础 3D 校园场景第一轮的目标是跑通最基本的 3D 场景地面、建筑、运动场、树木。Prompt 里要给出具体的技术约束避免 AI 默认用老式 CDN script 标签或传统相机。// 等距视角的相机位置计算AI 生成的核心逻辑 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) );等距投影要求三个轴的缩放比例相等通过球坐标公式推导相机方向的 x:y:z 需满足 1:1:1得出俯仰角为 atan(1/√2)。这不是随便凑的数字是有数学依据的。第一轮 Prompt 里我明确要求用 OrthographicCamera、ES Module 导入、PCFSoftShadowMap 和 ACES 色调映射AI 生成的约 700 行代码第一次跑出来就已经能看了。5.3 第二轮相机切换与昼夜模式第二轮加交互功能。Prompt 里要精确到具体数值比如夜景背景色用#162030建筑位置building.position.y设为h/2让底部对齐地面窗户上下各留 10% 边距。// 昼夜切换时调整的核心参数 const dayConfig { ambient: 0.55, sun: 3.2, exposure: 1.15, windowEmissive: 0x000000, lampIntensity: 0.4 }; const nightConfig { ambient: 0.24, sun: 0.55, exposure: 0.85, windowEmissive: 0xffcc77, lampIntensity: 2.2 };关键技巧是用 emissive 自发光而非直接调 light 来实现窗户灯光。窗户本身不产生光照但看起来像亮着真正的照明交给 SpotLight。夜景模式下车辆大灯和路灯的 SpotLight 点亮白天模式关闭。5.4 第三轮单独修 Bug 与调参数第三轮只做修复和优化不加新功能。这是 AI 编程的重要原则Bug 修复单独一轮不要跟新功能混在一起。新功能和修复混在一起AI 容易顾此失彼。这一轮我让 AI 修了相机切换时controls.target没保持导致画面跳动的问题把建筑主体颜色从深色改成#f9f9f9玻璃窗户加clearcoat: 0.4让反光更真实并统一用 MeshStandardMaterial 确保 PBR 渲染一致性。改动很小但效果提升明显。5.5 第四轮扩展场景规模第四轮是代码增长最多的一轮把校园从几栋楼扩展为城市级场景。Prompt 里给了具体的数量约束60 栋外层建筑分 3 环排列8 辆车在 4 条路上对向行驶350 个喷泉粒子分 3 层速度。// 喷泉粒子的物理更新逻辑 fountainVelArr[i * 3 1] - GRAVITY * delta; // 只有 Y 轴受重力 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;给工厂函数命名建议createOuterBuilding、createVehicle让 AI 写出可维护的代码。车辆循环逻辑用自然语言描述到达尽头后循环到另一端AI 能正确翻译成if (pos ROAD_HALF) pos -ROAD_HALF。5.6 第五轮叠加 Chart.js 数据看板第五轮在 3D 场景上叠加 2D 数据面板。UI 和 3D 场景分属不同层用 CSS fixed 加 z-index 隔离互不干扰。Chart.js 的配置项直接写在 Prompt 里避免 AI 用默认值。// Chart.js 折线图配置悬停显示所有数据集 const trendChart new Chart(ctx, { type: line, data: { labels: months, datasets: [libData, sportData, clubData] }, options: { responsive: true, interaction: { mode: index, intersect: false }, plugins: { legend: { labels: { font: { size: 10 } } } } } });数据模拟了学期波动9 月开学高峰2 月寒假低谷6 月期末高峰8 月暑假低谷。配色与顶部指标色点呼应卡片用backdrop-filter: blur(10px)做毛玻璃效果。5.7 第六轮细节打磨最后一轮不添加大的新功能专注完善。加建筑悬停提示用 Raycaster 检测鼠标下的建筑通过 userData 保存 label 信息跟随鼠标显示 tooltip。昼夜联动涉及多个数组vehicleSpotLights、lampSpotLightsPrompt 里明确数据结构关系AI 能统一控制 1616 个光源。6. 本篇常见错误排查6.1 Claude Code 启动报 401 或认证失败最常见的原因是环境变量没生效。先确认echo $TAOTOKEN_API_KEY有输出再确认 settings.json 里的ANTHROPIC_AUTH_TOKEN写的是${TAOTOKEN_API_KEY}而不是别的变量名。如果变量名对不上Claude Code 拿到的就是空字符串。另一个原因是 Key 本身失效或额度用尽。去控制台的 API Keys 页面确认 Key 状态或者用第 4.1 节的 curl 命令直接测通道。6.2 请求超时或连接被拒检查ANTHROPIC_BASE_URL是否写成了https://taotoken.net/api。注意不要多加路径也不要带查询参数。如果写成https://taotoken.net/api/v1/messages这种完整路径Claude Code 会再拼一次路径导致 404。6.3 文件写入失败或权限被拒检查 settings.json 的permissions.allow里是否包含 Write 和 Edit。如果只放开了 ReadClaude Code 能读代码但写不了文件生成 3D 大屏时会卡在写文件这一步。Bash 命令如果没放开起本地服务时会一直弹确认。6.4 生成的 3D 场景黑屏或模型不显示这类问题通常出在 Three.js 的版本和导入方式上。确认 Prompt 里指定了 ES Module 导入和 import map而不是老式 script 标签。如果场景全黑检查光照是否初始化、相机位置是否在场景范围内、以及renderer.outputColorSpace是否设置正确。6.5 Chart.js 图表不渲染或尺寸异常Chart.js 需要 canvas 容器有明确的宽高。如果容器用百分比高度但父元素没有高度图表会渲染成 0 高度。给图表面板设max-height并确保父容器有确定高度。另外确认 Chart.js 用 UMD 版本加载和 Three.js 的 ES Module 不冲突。6.6 昼夜切换后画面过暗夜景不是简单把所有灯调暗。如果 ambient 强度设得太低比如 0.12画面会黑到看不清建筑轮廓。我实测下来 0.24 是个比较平衡的值既保留夜景氛围又不至于全黑。同时记得调toneMappingExposure夜景降到 0.85 左右。7. 继续迭代与接入入口这块大屏做完不是终点它本身就是一个可以继续用 AI 迭代的基座。想接真实数据让 Claude Code 把 Chart.js 的静态数据换成 fetch 请求想做第一人称漫游加 PointerLockControls 实现 WASD 移动想加天气系统复用喷泉粒子架构做雨滴和雪花。每一句话都可以是一轮新的 Prompt。如果你要长期跑编码任务和 Agent 流程建议了解一下 Coding Plan入口在https://taotoken.net/coding-plan?utm_sourcetaotoken_aicg_blog_endutm_contentcoding_planutm_campaignrewrite适合需要稳定通道和统一 Key 管理的场景。接入过程中遇到配置问题可以查接入文档https://taotoken.net/doc?utm_sourcetaotoken_aicg_blog_endutm_contentdocutm_campaignrewrite里面有各工具的配置示例。如果你用的是 Claude Code 的 Anthropic 兼容模式专门的配置说明在https://taotoken.net/doc/claudecode-anthropic?utm_sourcetaotoken_aicg_blog_endutm_contentclaudecode_anthropicutm_campaignrewrite。回到最开始那个问题AI 编程不是在写代码而是在写需求。你的角色从码农变成了产品经理加架构师加代码审查员。能力排序变了拆解需求、写清楚 Prompt、审查 AI 代码这三项比手写代码的熟练度更重要。2 小时完成传统需要 3 到 5 天的 3D 大屏开发靠的不是 AI 有多神而是你把需求拆得够细、约束给得够准。