智慧校园数据大屏 —— Claude Code 实战全记录：从 settings.json 到 Three.js 渲染

1. 智慧校园数据大屏为什么值得用 Claude Code 做一遍智慧校园数据大屏说白了就是把校园里的建筑、道路、运动场、人流、设施使用率这些信息用三维场景加二维图表的方式集中投到一块屏幕上。它适合谁适合想练手 Three.js 的前端、想给学校做可视化 demo 的学生团队也适合想体验 AI 编程到底能帮多少忙的开发者。我这次没有用 webpack、vite 这类构建工具就是单文件 HTML靠 CDN 加载 Three.js 0.160 和 Chart.js 4.4把整个工程压到最低复杂度让 Claude Code 把精力放在业务逻辑上。但真正卡住大多数人的往往不是 Three.js 的 API而是两件事第一AI 编程助手怎么稳定接入一个统一的 Key/API 通道不然每次换工具都要重新配一遍第二怎么把「做一个很酷的校园大屏」这种模糊需求拆成 AI 能一步步吃下去的小任务。这篇就按我实际跑通的链路来写先用 settings.json 和 config.toml 把 Claude Code 接到 TaoToken 的统一通道再交付 Chart.js 图表和 Three.js 三维校园场景的可复制配置最后用浏览器实测验证数据刷新和渲染帧率。整条链路的目标很明确你照着做能复现一套可运行的大屏工程而不是看完一堆概念还是不知道从哪下手。2. 前置准备用 TaoToken 统一 Key/API 通道接入 Claude CodeClaude Code 是 CLI 形式的 AI 编程助手直接在终端里用。它默认会去读配置文件里的模型通道信息所以我们要做的第一件事就是把这个通道指向 TaoToken 的统一入口。TaoToken 官网是 https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content API 地址是 https://taotoken.net/api 注意 API 地址后面不加 UTM 参数。为什么强调「统一通道」因为你在做这个项目的过程中可能会同时用到模型对话来问思路、用 Coding Plan 来跑长任务、用 API Keys 来管理密钥。如果每个工具各配一套改起来很痛苦。统一到一个入口之后settings.json 和 config.toml 里只维护一份配置就行。先拿到你的 API Key。打开 https://taotoken.net/api-keys 创建密钥复制出来。这个 Key 就是你后面所有配置里要填的东西。创建完之后建议先放到环境变量里不要硬编码进代码文件避免不小心提交到仓库。export TAOTOKEN_API_KEY你的_API_Key环境变量设好之后后面的配置文件就可以用${TAOTOKEN_API_KEY}这种方式引用既安全又方便切换。3. 可复制配置settings.json 与 config.toml 骨架Claude Code 的配置分两层一层是 settings.json管的是 Claude Code 自身的行为比如模型、权限、环境变量另一层是 config.toml管的是模型通道的接入参数。两个文件配合起来才能让 Claude Code 稳定走 TaoToken 的通道。先看 settings.json。这个文件一般放在项目根目录的.claude/settings.json或者用户级的配置目录里。核心是env字段把 API 地址和 Key 注入进去。{ env: { ANTHROPIC_BASE_URL: https://taotoken.net/api, ANTHROPIC_API_KEY: ${TAOTOKEN_API_KEY} }, permissions: { allow: [ Read, Write, Edit, Bash(npm:*), Bash(node:*) ] }, model: claude-sonnet-4-20250514 }这里有几个点要注意。ANTHROPIC_BASE_URL填的是 TaoToken 的 API 地址不带任何 UTM 参数这是接口调用的规范。ANTHROPIC_API_KEY用环境变量引用避免明文。permissions.allow里我放开了 Read、Write、Edit 和几个常用的 Bash 命令这样 Claude Code 在生成和修改文件时不会频繁弹权限确认做这种多轮迭代的项目会顺畅很多。再看 config.toml。这个文件一般放在~/.claude/config.toml或者项目级目录用来描述模型通道的细节。[api] base_url https://taotoken.net/api api_key ${TAOTOKEN_API_KEY} timeout 120 [model] name claude-sonnet-4-20250514 max_tokens 8192 temperature 0.3 [project] name smart-campus-dashboard root .timeout设成 120 秒是因为生成 Three.js 这种几百行的场景代码时响应时间会比普通问答长超时太短容易中断。temperature设 0.3是希望 AI 在生成代码时更稳定、少发挥尤其是涉及坐标、尺寸、颜色值这些具体参数时低温度能减少它「自由创作」的概率。两个文件配好之后可以先用模型对话快速验证通道是否通。打开 https://taotoken.net/models 选一个模型发一句话如果能正常返回说明 Key 和通道没问题。这一步别跳过不然后面 Claude Code 报错你会分不清是配置问题还是代码问题。4. 分步迭代从基础场景到数据看板的 6 轮 Prompt配置通了之后进入正题。我踩过的坑里最大的一条就是不要试图用一段 Prompt 描述整个项目。你给 AI 一句「做一个很酷的校园大屏」它大概率给你一坨能跑但粗糙的代码然后你想改都无从下手。正确姿势是分步迭代每一轮只做一件事每轮改完都能跑、能看、能验证。4.1 第 1 轮跑通基础 3D 校园场景第一轮的目标只有一个能跑起来。Prompt 里要把技术约束定死避免 AI 默认用老式 CDN script 标签或者传统相机。创建一个校园3D可视化场景的HTML文件使用Three.js 0.160的ES Module导入方式import map。 要求 1. 等距视角使用OrthographicCamera带OrbitControls可拖拽旋转缩放 2. 场景居中是一个标准运动场蓝色圆角矩形跑道内部绿色足球场Canvas纹理画白线 3. 8栋不同尺寸的现代建筑分布在运动场周围每栋有白色BoxGeometry主体、屋顶女儿墙、入口雨棚、四面蓝色玻璃窗户 4. 约30棵树每棵由圆柱树干和3层锥体树冠组成高度2-3米随机 5. 使用DirectionalLightAmbientLightHemisphereLight开启PCFSoftShadowMap阴影和ACESFilmicToneMapping 6. 单文件HTML不引入构建工具这一轮 AI 生成了约 700 行的 campus.html包含正交相机、圆角跑道、8 栋建筑、30 棵树、路径网络和完整光照。第一次跑出来就能看这是建立信心的关键。要点在于Prompt 里给了具体技术约束ES Module、OrthographicCamera、PCFSoftShadowMap建筑和树木给了尺寸范围和视觉特征而不是抽象地说「创建一些建筑」。4.2 第 2 轮加相机切换和昼夜模式第二轮加交互。这里有个细节功能点用编号列表明确区分AI 不容易遗漏。在上一个版本基础上做以下修改 1. 添加右上角两个按钮 - 切换透视/正交按钮同时创建PerspectiveCamera(40°FOV)点击时在正交和透视相机之间切换切换时保持当前视角位置不变 - 切换夜景/白天按钮点击时调整背景色和雾色夜景深蓝#162030、环境光/半球光/方向光的强度和色温、建筑窗户的emissive自发光变暖黄色、降低toneMappingExposure、路灯灯泡emissiveIntensity增高 2. 修复建筑位置building.position.y 应该设为 h/2让建筑底部对齐地面 3. 优化窗户排布窗户高度改为动态计算上下留10%边距 4. 确保resize事件同时处理两种相机类型的投影矩阵更新Prompt 里问题描述精确到具体数值#162030、h/2、10%减少 AI 猜测。技术细节直接给比如camera.position.copy()告诉 AI 你期望的实现方式而不是让它瞎想。4.3 第 3 轮单独修 Bug 和调参数第三轮只做修复和优化不加新功能。这是 AI 编程的重要原则Bug 修复单独一轮不要跟新功能混在一起。修复以下问题并优化 1. 相机切换逻辑有问题切换时target没有正确保持导致画面跳动。应该在controls.object切换前后保持controls.target不变 2. 材质和灯光优化 - 建筑主体颜色太深改为更亮的#f9f9f9 - 玻璃窗户增加clearcoat效果(0.4)让反光更真实 - 跑道颜色调整蓝色饱和度降低 - 雾的距离参数调整避免远处建筑完全消失 3. 统一使用MeshStandardMaterial而不是MeshPhongMaterial确保PBR渲染一致性改动很小但效果提升明显。参数调整是 AI 的强项不要怕让它改细节。4.4 第 4 轮扩展场景规模第四轮是整个项目里最大的一轮把校园从「几栋楼」扩展为「城市级」场景。每个子系统给了具体数量AI 不会放飞自我也不会偷懒。大幅扩展校园场景添加以下内容 1. 周边道路系统在场景四边(X±22, Z±22)各创建一条道路路面深灰色两侧白色虚线边缘标记中间黄色虚中心线长度90宽度3.2 2. 外层建筑群创建createOuterBuilding工厂函数生成低多边形建筑在道路外侧分3个环层排列约60栋建筑 3. 移动车辆创建createVehicle工厂函数包含车身、驾驶舱、保险杠、轮子在四条道路上各放置2-3辆车到达尽头后循环到另一端每辆车配备前大灯和尾灯 4. 喷泉系统在学生中心前面(X0, Z11.8)创建三层喷泉使用粒子系统模拟水花350个粒子分3层速度受重力影响下落到达水面后重置 5. 其他点缀路灯沿主要路径排布长椅散布在运动场周围旗杆旗帜在场景中轴给了工厂函数的命名建议createOuterBuilding、createVehicle让 AI 写出可维护的代码。车辆循环逻辑用自然语言描述AI 能正确翻译成if (pos ROAD_HALF) pos -ROAD_HALF。4.5 第 5 轮叠加 Chart.js 数据看板第五轮在 3D 场景之上叠加 2D 数据面板实现「大屏」的完整效果。给了具体的假数据包括数值和趋势逻辑AI 不用猜你要什么数据。在3D场景上叠加数据看板UI使用Chart.js 4.4 1. 顶部导航栏标题智慧校园数据看板英文副标题右侧三个统计指标在校人数(12860)、教职工(1240)、建筑面积(28.6万㎡)毛玻璃半透明背景 2. 左侧图表面板三张卡片 - 月度校园活跃度趋势折线图3条线图书馆入馆千次、体育活动千人次、社团活动场12个月数据体现学期内高峰、寒暑假低谷 - 各学院人数统计柱状图7个学院七彩配色圆角柱(borderRadius: 6) - 校园设施使用占比环形图6类设施图例右侧 3. Chart.js配置responsive: true小字体(9-10px)折线图悬停显示所有数据集(interaction.mode: index) 4. UI样式卡片使用backdrop-filter: blur(10px)毛玻璃效果圆角14px半透明白底样式细节给到具体 CSS 数值blur(10px)、14px、9-10pxChart.js 的配置项直接写在 Prompt 里避免 AI 用默认值。4.6 第 6 轮细节打磨最后一轮不添加大的新功能专注完善和打磨。最后打磨细节 1. 建筑悬停提示监听mousemove用Raycaster检测鼠标下的建筑建筑创建时通过userData保存label信息跟随鼠标显示半透明tooltip鼠标变为pointer样式 2. 昼夜模式细节补充夜景模式下车辆大灯和路灯的SpotLight点亮车灯发光材质的Intensity随昼夜切换白天关闭所有SpotLight夜景ambient强度调整为0.24保留可见度 3. 优化昼夜切换时同步调整车辆和路灯的所有光源tooltip添加transition过渡动画Raycaster 的实现细节NDC 坐标转换、intersectObjects、userData全部交给 AI。昼夜联动涉及多个数组Prompt 中明确了数据结构关系。5. 验证请求与成功结果浏览器实测数据刷新和帧率代码生成完必须实测。我用的验证方式很直接打开浏览器按 F12 看 Console 和 Performance。先验证数据刷新。Chart.js 的图表在页面加载时会渲染一次如果你想验证动态刷新可以在 Console 里手动改数据再调chart.update()。// 在浏览器 Console 里执行验证折线图数据刷新 const chart Chart.getChart(document.querySelector(#activityChart)); chart.data.datasets[0].data chart.data.datasets[0].data.map(v v * 1.2); chart.update();如果图表立刻重绘说明 Chart.js 的响应式更新链路是通的。这一步能帮你确认数据层和渲染层没有脱节。再验证 Three.js 的渲染帧率。在 Console 里跑一段简单的帧率采样let frames 0; let last performance.now(); function sample() { frames; const now performance.now(); if (now - last 1000) { console.log(FPS:, frames); frames 0; last now; } requestAnimationFrame(sample); } sample();实测下来在普通笔记本上这个场景60 栋建筑、8 辆车、350 粒子喷泉、1616 个光源稳定在 55-60 FPS。如果掉到 30 以下通常是两个原因一是光源数量太多尤其是 SpotLight 开了阴影二是粒子系统的needsUpdate每帧都在全量刷新。前者可以关掉部分路灯的阴影后者可以只更新变化的那部分粒子。验证相机切换点右上角按钮观察画面是否跳动。如果跳动说明controls.target没保持住回到第 3 轮的修复逻辑检查。验证昼夜切换点夜景按钮看窗户是否从反射变为发光、路灯是否点亮、整体曝光是否降低。6. 本篇常见错排查做这个项目的过程中我遇到和收集到的报错主要集中在几类列出来方便你对照。第一类Claude Code 报 401 或 403。这基本是 Key 或通道配置问题。先确认ANTHROPIC_BASE_URL填的是https://taotoken.net/api不带 UTM 参数再确认环境变量TAOTOKEN_API_KEY在当前终端里能echo出来。如果环境变量没生效重启终端或者重新source一下配置文件。实在不确定去 https://taotoken.net/api-keys 重新生成一个 Key 试试。第二类Three.js 报Failed to resolve module specifier three。这是 import map 没配对。ES Module 方式加载 Three.js 必须在 HTML 里写 import map把three映射到 CDN 地址。检查你的 import map 是不是放在了所有 module script 之前。第三类Chart.js 图表不显示或者尺寸为 0。常见原因是 canvas 的父容器没有明确高度Chart.js 的responsive: true依赖父容器尺寸。给图表面板的卡片设一个min-height或者用maintainAspectRatio: false配合固定高度。第四类场景卡顿、帧率低。按前面说的先查光源数量和阴影再查粒子更新逻辑。另外PCFSoftShadowMap比PCFShadowMap更耗性能如果设备一般可以降级。第五类昼夜切换后部分光源没跟着变。这是数组没遍历全。检查vehicleSpotLights和lampSpotLights两个数组是不是都参与了切换逻辑别漏了其中一个。如果你在接入或排障过程中卡住可以直接去 https://taotoken.net/api-keys 管理密钥或者翻 https://taotoken.net/doc 的接入文档里面把通道配置和常见返回码讲得比较清楚。需要验证模型本身是否正常用 https://taotoken.net/models 发一句话最快。7. 长期编码和 Agent 场景怎么接着用这个项目做完如果你打算继续做类似的 3D 可视化或者数据大屏建议把 Claude Code 的用法固定下来。长期编码和 Agent 场景重点不是单次生成多漂亮而是上下文稳定、通道稳定、迭代节奏稳定。通道这块TaoToken 的 Coding Plan 适合跑这种多轮迭代的长任务不用每次重新配 Key。你可以从 https://taotoken.net/coding-plan 了解它的额度方式再决定要不要把日常的 AI 编程都挂上去。控制台在 https://taotoken.net/console 密钥管理在 https://taotoken.net/api-keys 接入文档在 https://taotoken.net/doc 这几个地址建议存一下后面换项目也用得上。回到方法论五条原则再强调一遍一小步大于一大步具体大于抽象先跑起来再优化Bug 修复单独一轮给 AI 定好技术约束。你的角色从「码农」变成了「产品经理 架构师 代码审查员」能力排序也变了拆解需求、写清楚 Prompt、审查 AI 代码这三样比手写代码本身更重要。最后给一个实用技巧每轮迭代完把当前能跑的 HTML 存一个版本命名带上轮次比如campus_v1.html、campus_v2.html。这样某一轮 AI 改崩了你能立刻回退到上一个可交付的中间产物而不是从头再来。这个习惯在 AI 编程里比在任何传统开发里都值钱。