企业官网建设流程全解析

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 Code

Claude Code 是 CLI 形式的 AI 编程助手，直接在终端里用。它默认会去读配置文件里的模型通道信息，所以我们要做的第一件事，就是把这个通道指向 TaoToken 的统一入口。TaoToken 官网是 https://taotoken.net/?utm_source=taotoken_aicg_blog_end&utm_medium=csdn&utm_campaign=rewrite&utm_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. 使用DirectionalLight+AmbientLight+HemisphereLight，开启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. 喷泉系统：在学生中心前面(X=0, Z=11.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-10px），Chart.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 粒子喷泉、16+16 个光源）稳定在 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 编程里比在任何传统开发里都值钱。