企业官网建设流程全解析

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 为什么需要统一 Key

Claude 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_source=taotoken_aicg_blog_end&utm_medium=csdn&utm_campaign=rewrite&utm_content=，注册和查看文档都从这里进。

Key 的创建在控制台的 API Keys 页面完成，地址是https://taotoken.net/console/api-keys?utm_source=taotoken_aicg_blog_end&utm_content=api_keys&utm_campaign=rewrite。创建后立刻复制保存，页面刷新后通常不再完整显示。

注意：Key 属于敏感凭证，不要写进会提交到 Git 的配置文件里。本地开发建议用环境变量或单独的本地配置文件，并在 .gitignore 里排除。

2.3 确认模型可用性

在正式配置 Claude Code 之前，建议先去模型对话页面做一次最小验证，确认你的 Key 能正常调用目标模型。模型对话入口是https://taotoken.net/chat?utm_source=taotoken_aicg_blog_end&utm_content=model_chat&utm_campaign=rewrite。发一句简单的话，比如"回复 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 里设置 Key，macOS 和 Linux 用 export，Windows PowerShell 用$env:。

# macOS / Linux，写入 ~/.zshrc 或 ~/.bashrc 后 source 生效 export TAOTOKEN_API_KEY="你的实际Key"

# Windows PowerShell，当前会话生效 $env:TAOTOKEN_API_KEY="你的实际Key"

设置完可以用echo $TAOTOKEN_API_KEY（PowerShell 用echo $env:TAOTOKEN_API_KEY）确认变量已注入。如果输出为空，说明变量没生效，Claude Code 启动时会因为拿不到 Token 而请求失败。

3.4 权限配置的取舍

permissions.allow这一块值得单独说。默认情况下 Claude Code 每次写文件、跑命令都会请求确认，这在生成 3D 大屏这种需要反复改文件、反复起本地服务的场景里会非常打断节奏。我放开了 Read、Write、Edit 和npm run *、node *，基本覆盖了前端项目的日常操作。但如果你在敏感项目里工作，建议收紧到只放开 Read 和 Edit，Bash 命令保持手动确认。

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、lampSpotLights），Prompt 里明确数据结构关系，AI 能统一控制 16+16 个光源。

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。如果只放开了 Read，Claude 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_source=taotoken_aicg_blog_end&utm_content=coding_plan&utm_campaign=rewrite，适合需要稳定通道和统一 Key 管理的场景。接入过程中遇到配置问题，可以查接入文档https://taotoken.net/doc?utm_source=taotoken_aicg_blog_end&utm_content=doc&utm_campaign=rewrite，里面有各工具的配置示例。如果你用的是 Claude Code 的 Anthropic 兼容模式，专门的配置说明在https://taotoken.net/doc/claudecode-anthropic?utm_source=taotoken_aicg_blog_end&utm_content=claudecode_anthropic&utm_campaign=rewrite。

回到最开始那个问题：AI 编程不是在"写代码"，而是在"写需求"。你的角色从码农变成了产品经理加架构师加代码审查员。能力排序变了，拆解需求、写清楚 Prompt、审查 AI 代码这三项，比手写代码的熟练度更重要。2 小时完成传统需要 3 到 5 天的 3D 大屏开发，靠的不是 AI 有多神，而是你把需求拆得够细、约束给得够准。