1. 浏览器里逛 3D 作品集先把 GPT-6 与 Rodin 的调用统一到 TaoToken在浏览器里做一个可逛、可交互的 3D 作品集真正的分水岭不是 three.js 场景多漂亮而是 GPT-6 与 Hyper3D Rodin 的调用链有没有被纳入统一 Token 账本。TaoToken 在这里只做一件事承接 GPT-6 参考图/交互逻辑与 Rodin 3D 模型生成的模型调用消耗。开始联调前先到 TaoToken 官网 拿 Key再把后端请求地址设为https://taotoken.net/api。原案例的路径很清晰GPT-6 先产出参考图和交互骨架Hyper3D Rodin 生成场景里的 3D 资产BANG 再按结构把资产拆成独立零件让动画可以精确到零件级作者还把整套流程沉淀成 skill。这个链路里最容易翻车的不是建模而是浏览器联调时模型请求东一个 Key、西一个 Base URL导致前端事件、模型加载和调用日志对不上。本文按可复现工程来拆先统一 TaoToken 的 Key 与 Base URL再配 Claude Code、Codex、CC Switch最后用前端埋点把事件和调用日志对齐。2. 复现目标拆解35 个精细建模、零件级动画与 Token 消耗点先把目标说清楚最终产物不是一张渲染图而是一个能在浏览器里漫游、点击、触发动画的 3D 作品集。场景里有 35 个精细建模模型不是整块黑盒而是经过 BANG 按结构拆成独立零件所以前端可以做到“门把手单独旋转、齿轮逐级咬合、机械臂按关节展开”这类零件级动画。要做到这一点资产管线必须和前端交互事件绑定而不是等模型加载完再临时找节点。拆解到模型调用层主要有两类消耗GPT-6 侧生成参考图、拆分交互逻辑、产出前端事件命名与状态机草稿。建议把提示词模板固定下来避免同一场景反复重试。Rodin 侧生成 3D 模型、再生成或调整拆件后的资产。35 个模型如果逐个重跑Token 消耗和等待时间都会放大所以先把低精度草模确认再跑精细版本。这里不要把 TaoToken 理解成“替代建模工具”。它负责的是模型调用入口和 Token 消耗记录方便你在 GPT-6 与 Rodin 之间统一 Key、统一请求地址、统一日志字段。这样浏览器里出现“模型没加载出来”时你能快速判断是前端加载失败、Rodin 生成失败还是 Key 调用被拒绝。建议在项目根目录建立.env.local只放服务端可读变量TAOTOKEN_BASE_URLhttps://taotoken.net/api TAOTOKEN_API_KEYYOUR_API_KEY SCENE_MODEL_COUNT35如果你的作品集是纯静态部署不要把TAOTOKEN_API_KEY直接打包进前端。正确做法是让前端请求自己的/api/taotoken-proxy由服务端代理携带 Key 访问 TaoToken。浏览器只拿 requestId 和业务结果拿不到 Key 本体。3. 浏览器联调前的 TaoToken 准备Key 放服务端Base URL 统一成 https://taotoken.net/api在开始接前端事件之前先到 TaoToken 官网 创建或查看 Key。创建 Key 的入口在控制台顺序建议是先确认模型对话里的 GPT-6、Rodin 调用参数再创建 API Key最后把 Base URL 写入服务端环境变量。模型对话入口可以用 TaoToken 模型对话 做一次最小调用确认返回结构、错误码和耗时字段。配置时只认一个 Base URLhttps://taotoken.net/api注意这是工具配置用的地址不要在后面拼 UTM也不要写成带?utm_source...的形式。代码里建议这样读取// 本地 Node 服务示例运行在服务端不暴露给浏览器 const baseURL process.env.TAOTOKEN_BASE_URL; // https://taotoken.net/api const apiKey process.env.TAOTOKEN_API_KEY; // YOUR_API_KEY if (!baseURL || !apiKey) { throw new Error(缺少 TAOTOKEN_BASE_URL 或 TAOTOKEN_API_KEY); } export async function callTaotoken(payload, requestId) { const startedAt Date.now(); const response await fetch(${baseURL}/chat/completions, { method: POST, headers: { Content-Type: application/json, Authorization: Bearer ${apiKey}, X-Request-Id: requestId }, body: JSON.stringify(payload) }); const latency Date.now() - startedAt; const data await response.json().catch(() ({})); if (!response.ok) { console.error([taotoken] request failed, { requestId, status: response.status, latency, data }); throw new Error(TaoToken request failed: ${response.status}); } console.log([taotoken] request ok, { requestId, latency, model: payload.model, usage: data.usage }); return data; }上面代码里的/chat/completions是否适用要看你在模型对话页验证的调用方式。核心是 Base URL 始终为https://taotoken.net/api路径由 SDK 或接口文档决定。不要一会儿写https://taotoken.net/api/v1一会儿写https://taotoken.net/api/chat否则 404 会混在模型加载错误里很难定位。4. Claude Code 配置settings.json 与 ANTHROPIC_* 只属于 Claude Code如果你在 Claude Code 里做 3D 作品集的工程化脚本、批量整理资产元数据或生成前端事件常量可以让 Claude Code 走 TaoToken 的调用入口。Claude Code 侧使用settings.json或环境变量字段是ANTHROPIC_*。这套字段只用于 Claude Code不要复制到 Codex 的config.toml里。项目内.claude/settings.json可以这样写{ env: { ANTHROPIC_BASE_URL: https://taotoken.net/api, ANTHROPIC_API_KEY: YOUR_API_KEY } }如果你的 Claude Code 版本从 shell 读取变量也可以在本地终端执行export ANTHROPIC_BASE_URLhttps://taotoken.net/api export ANTHROPIC_API_KEYYOUR_API_KEY然后在本地终端运行claude --version验证时重点看三类信息能否连上配置的 Base URL、Key 是否被接受、返回是否包含预期模型字段。如果出现 401先检查YOUR_API_KEY是否替换如果出现 404先检查ANTHROPIC_BASE_URL是否误加了路径。更多 Claude Code 的配置细节可以放到文末的文档入口里对照。准备 Key 和查看配置说明时也可以从 TaoToken 官网 进入控制台。这里再次强调Claude Code 用ANTHROPIC_*Codex 不要用ANTHROPIC_*。两套工具的环境变量命名不同混用最常见的结果就是 Codex 读不到 Key或者把请求发到错误的 Base URL。5. Codex 配置config.toml 写法与不要误用 ANTHROPIC_*Codex 侧使用config.toml。如果你希望 Codex 在本地协助维护 3D 作品集的构建脚本、检查资源清单、生成浏览器事件对照表可以把模型供应商指向 TaoToken。配置时使用 Codex 自己的 provider 结构不要把ANTHROPIC_*写进去。~/.codex/config.toml示例model gpt-6 model_provider taotoken [model_providers.taotoken] name TaoToken base_url https://taotoken.net/api env_key TAOTOKEN_API_KEY wire_api chat环境变量在本地终端设置export TAOTOKEN_API_KEYYOUR_API_KEY如果 Codex 版本要求wire_api用responses按你本地版本调整但base_url保持为https://taotoken.net/api不要带 UTM也不要随手拼/v1。Codex 配置和 Claude Code 配置是两条线Claude Code 看ANTHROPIC_*Codex 看config.toml里的model_providers。把这两条线分开排障时就能快速定位。配置完成后在本地终端执行 Codex 的版本或帮助命令确认配置文件被读取。若返回 401检查TAOTOKEN_API_KEY是否与env_key对应若返回模型不存在检查model名称是否与模型对话页展示的一致。这个步骤不要跳过因为后面 35 个模型的批处理脚本都会复用同一份调用配置。6. CC Switch 三件套供应商名、Base URL、API Key 的切换模板如果你用 CC Switch 管理多个编码工具的配置建议把 TaoToken 单独建一个供应商条目。CC Switch 的“三件套”可以按下面映射填写供应商名称TaoTokenBase URLhttps://taotoken.net/apiAPI KeyYOUR_API_KEY有些版本还会让你选默认模型或工具类型那就再补一项Claude Code 场景选 Claude Code 对应模型Codex 场景选 Codex 的 GPT-6 配置。关键是不要在一个共用条目里同时塞ANTHROPIC_*和 Codex 的model_providers否则切换后很容易出现“看起来切了实际没生效”的问题。切换完成后本地终端重新打开或在 IDE 里重启对应插件。验证顺序建议如下# 在本地终端执行不要在生产服务器上直接跑批 echo $ANTHROPIC_BASE_URL echo $TAOTOKEN_API_KEY然后在各自工具里发一个最小请求。Claude Code 侧看ANTHROPIC_BASE_URL是否为https://taotoken.net/apiCodex 侧打开~/.codex/config.toml看base_url是否一致。两边都通过后再进入 3D 作品集的前端联调。7. 前端事件、模型加载与 Key 调用日志对照这个作品集最容易出问题的地方是浏览器里的表现和模型调用日志各自为政。比如用户点击机械臂前端以为要播放part_arm_joint_02但 Rodin 返回的模型节点名是arm_joint_2又比如模型其实还没下载完Key 调用日志却显示 GPT-6 已经返回了交互状态。解决方式是用同一个requestId贯穿前端事件、模型加载和 TaoToken 调用。前端埋点可以这样写// 浏览器端日志总线只记录 requestId不记录 Key const logBus []; function emit(type, payload {}) { const event { type, ts: performance.now(), ...payload }; logBus.push(event); console.log([portfolio], event); return event; } export async function requestInteractionPlan(sceneId, partId) { const requestId crypto.randomUUID(); emit(portfolio:interaction:start, { requestId, sceneId, partId }); emit(taotoken:request:start, { requestId, sceneId, model: gpt-6, purpose: interaction-plan }); const response await fetch(/api/taotoken-proxy, { method: POST, headers: { Content-Type: application/json, X-Request-Id: requestId }, body: JSON.stringify({ sceneId, partId, prompt: 为 ${sceneId} 的 ${partId} 生成零件级交互动画参数 }) }); const data await response.json(); emit(taotoken:request:end, { requestId, status: response.status, usage: data.usage }); emit(portfolio:interaction:ready, { requestId, sceneId, partId, action: data.action }); return data; }模型加载侧也挂同一个 requestIdexport async function loadPartModel({ requestId, modelUrl, partId }) { emit(model:load:start, { requestId, modelUrl, partId }); const model await loader.loadAsync(modelUrl); emit(model:load:success, { requestId, partId, children: model.children.length }); return model; }最后把日志整理成对照表方便复现。你可以在浏览器控制台按 requestId 过滤也可以在服务端日志里按X-Request-Id搜索前端事件模型加载日志TaoToken 调用日志说明portfolio:interaction:start无无用户点击零件准备请求交互参数taotoken:request:start无requestId开始服务端代理即将访问https://taotoken.net/apimodel:load:start开始加载可能并行35 个模型建议分批避免阻塞主线程model:load:success子节点数、包围盒无确认 BANG 拆出的零件节点是否可索引taotoken:request:end无usage、延迟、状态码记录 GPT-6 或 Rodin 的 Token 消耗portfolio:interaction:ready无无前端拿到动作参数准备播放零件动画只要这张表能在本地复现后面加模型、换零件、调动画时就不用靠猜。特别注意日志里不要打印YOUR_API_KEY的完整值最多记录 Key 的后四位或别名。服务端代理只记录requestId、模型名、耗时、状态码和用量。8. 联调排障401、404、CORS、模型加载慢与日志错位浏览器联调时最常见的问题不是 3D 渲染而是配置层。可以按下面顺序排查第一401 或鉴权失败。检查服务端是否真的带上了Authorization: Bearer YOUR_API_KEY以及环境变量是否被正确加载。Claude Code 侧检查ANTHROPIC_API_KEYCodex 侧检查TAOTOKEN_API_KEYCC Switch 侧检查切换后是否重启终端。不要把 Claude Code 的ANTHROPIC_*写进 Codex 的config.toml。第二404 或路径错误。Base URL 统一为https://taotoken.net/api不要在工具配置里带 UTM也不要随意追加/v1。如果你的 SDK 或接口文档明确要求追加路径以文档为准但不要同时保留多个版本。出现 404 时先看日志里的完整 URL再对照模型对话页的请求方式。第三CORS 或前端直连失败。浏览器直接请求模型接口通常会把 Key 暴露在前端也容易遇到跨域限制。推荐让浏览器只请求自家/api/taotoken-proxy由服务端携带 Key 访问 TaoToken。这样前端事件日志和 Key 调用日志可以在服务端用requestId对齐。第四模型加载慢。35 个精细建模如果一次性加载首屏会非常重。建议按场景分区、按零件优先级分批加载先加载轮廓和可点击外壳再加载内部零件。Rodin 生成阶段也先出低精度版本确认交互点后再生成高精度资产。TaoToken 侧要记录每次调用的耗时和 Token 用量找出是生成慢还是加载慢。第五日志错位。前端用performance.now()服务端用 UTC 时间两者不要直接比较绝对时间。用requestId串联时间只用于分析延迟。每次用户点击零件都生成新的requestId模型加载如果复用同一批资产就用sceneId partId作为二级索引。9. 从一下午原型到可维护 skill把 3D 作品集流程固化原案例能把流程打包成 skill说明它已经不只是“一次演示”而是可以重复执行的资产管线。你可以把这条管线拆成四段参考图与交互逻辑、Rodin 资产生成、BANG 零件拆分、浏览器事件绑定。每一段都保留输入输出清单例如sceneId、partId、modelUrl、requestId、usage。这样下次新增一个模型时只需要替换输入不需要重写整套联调逻辑。在配置层建议固定三件事TaoToken 的 Key 存在服务端Base URL 始终写https://taotoken.net/apiClaude Code、Codex、CC Switch 各自使用正确字段。浏览器侧则固定前端事件命名和日志格式让 35 个模型、零件级动画和 Token 消耗都能被同一套日志追踪。做到这一步作品集才真正可维护。如果你准备按这条链路复现建议顺序是先在模型对话页验证 GPT-6 与 Rodin 的调用参数再选 Coding Plan 估算 35 个模型的批量生成成本然后创建 API Key 写入服务端最后按 Claude Code 文档把配置同步到本地与团队环境。模型对话https://taotoken.net/models/detail/chat?utm_sourcetaotoken_aicg_blog_endutm_contentcta_chat_3d_portfolioCoding Planhttps://taotoken.net/coding-plan?utm_sourcetaotoken_aicg_blog_endutm_contentcta_coding_plan_3d_portfolioAPI Keyshttps://taotoken.net/console/api-keys?utm_sourcetaotoken_aicg_blog_endutm_contentcta_api_keys_3d_portfolioClaude Code 文档https://taotoken.net/doc/ClaudeCodeAnthropic?utm_sourcetaotoken_aicg_blog_endutm_contentcta_claude_code_doc_3d_portfolio
浏览器里逛 3D 作品集，TaoToken 只管 GPT-6 与 Rodin 的调用
1. 浏览器里逛 3D 作品集先把 GPT-6 与 Rodin 的调用统一到 TaoToken在浏览器里做一个可逛、可交互的 3D 作品集真正的分水岭不是 three.js 场景多漂亮而是 GPT-6 与 Hyper3D Rodin 的调用链有没有被纳入统一 Token 账本。TaoToken 在这里只做一件事承接 GPT-6 参考图/交互逻辑与 Rodin 3D 模型生成的模型调用消耗。开始联调前先到 TaoToken 官网 拿 Key再把后端请求地址设为https://taotoken.net/api。原案例的路径很清晰GPT-6 先产出参考图和交互骨架Hyper3D Rodin 生成场景里的 3D 资产BANG 再按结构把资产拆成独立零件让动画可以精确到零件级作者还把整套流程沉淀成 skill。这个链路里最容易翻车的不是建模而是浏览器联调时模型请求东一个 Key、西一个 Base URL导致前端事件、模型加载和调用日志对不上。本文按可复现工程来拆先统一 TaoToken 的 Key 与 Base URL再配 Claude Code、Codex、CC Switch最后用前端埋点把事件和调用日志对齐。2. 复现目标拆解35 个精细建模、零件级动画与 Token 消耗点先把目标说清楚最终产物不是一张渲染图而是一个能在浏览器里漫游、点击、触发动画的 3D 作品集。场景里有 35 个精细建模模型不是整块黑盒而是经过 BANG 按结构拆成独立零件所以前端可以做到“门把手单独旋转、齿轮逐级咬合、机械臂按关节展开”这类零件级动画。要做到这一点资产管线必须和前端交互事件绑定而不是等模型加载完再临时找节点。拆解到模型调用层主要有两类消耗GPT-6 侧生成参考图、拆分交互逻辑、产出前端事件命名与状态机草稿。建议把提示词模板固定下来避免同一场景反复重试。Rodin 侧生成 3D 模型、再生成或调整拆件后的资产。35 个模型如果逐个重跑Token 消耗和等待时间都会放大所以先把低精度草模确认再跑精细版本。这里不要把 TaoToken 理解成“替代建模工具”。它负责的是模型调用入口和 Token 消耗记录方便你在 GPT-6 与 Rodin 之间统一 Key、统一请求地址、统一日志字段。这样浏览器里出现“模型没加载出来”时你能快速判断是前端加载失败、Rodin 生成失败还是 Key 调用被拒绝。建议在项目根目录建立.env.local只放服务端可读变量TAOTOKEN_BASE_URLhttps://taotoken.net/api TAOTOKEN_API_KEYYOUR_API_KEY SCENE_MODEL_COUNT35如果你的作品集是纯静态部署不要把TAOTOKEN_API_KEY直接打包进前端。正确做法是让前端请求自己的/api/taotoken-proxy由服务端代理携带 Key 访问 TaoToken。浏览器只拿 requestId 和业务结果拿不到 Key 本体。3. 浏览器联调前的 TaoToken 准备Key 放服务端Base URL 统一成 https://taotoken.net/api在开始接前端事件之前先到 TaoToken 官网 创建或查看 Key。创建 Key 的入口在控制台顺序建议是先确认模型对话里的 GPT-6、Rodin 调用参数再创建 API Key最后把 Base URL 写入服务端环境变量。模型对话入口可以用 TaoToken 模型对话 做一次最小调用确认返回结构、错误码和耗时字段。配置时只认一个 Base URLhttps://taotoken.net/api注意这是工具配置用的地址不要在后面拼 UTM也不要写成带?utm_source...的形式。代码里建议这样读取// 本地 Node 服务示例运行在服务端不暴露给浏览器 const baseURL process.env.TAOTOKEN_BASE_URL; // https://taotoken.net/api const apiKey process.env.TAOTOKEN_API_KEY; // YOUR_API_KEY if (!baseURL || !apiKey) { throw new Error(缺少 TAOTOKEN_BASE_URL 或 TAOTOKEN_API_KEY); } export async function callTaotoken(payload, requestId) { const startedAt Date.now(); const response await fetch(${baseURL}/chat/completions, { method: POST, headers: { Content-Type: application/json, Authorization: Bearer ${apiKey}, X-Request-Id: requestId }, body: JSON.stringify(payload) }); const latency Date.now() - startedAt; const data await response.json().catch(() ({})); if (!response.ok) { console.error([taotoken] request failed, { requestId, status: response.status, latency, data }); throw new Error(TaoToken request failed: ${response.status}); } console.log([taotoken] request ok, { requestId, latency, model: payload.model, usage: data.usage }); return data; }上面代码里的/chat/completions是否适用要看你在模型对话页验证的调用方式。核心是 Base URL 始终为https://taotoken.net/api路径由 SDK 或接口文档决定。不要一会儿写https://taotoken.net/api/v1一会儿写https://taotoken.net/api/chat否则 404 会混在模型加载错误里很难定位。4. Claude Code 配置settings.json 与 ANTHROPIC_* 只属于 Claude Code如果你在 Claude Code 里做 3D 作品集的工程化脚本、批量整理资产元数据或生成前端事件常量可以让 Claude Code 走 TaoToken 的调用入口。Claude Code 侧使用settings.json或环境变量字段是ANTHROPIC_*。这套字段只用于 Claude Code不要复制到 Codex 的config.toml里。项目内.claude/settings.json可以这样写{ env: { ANTHROPIC_BASE_URL: https://taotoken.net/api, ANTHROPIC_API_KEY: YOUR_API_KEY } }如果你的 Claude Code 版本从 shell 读取变量也可以在本地终端执行export ANTHROPIC_BASE_URLhttps://taotoken.net/api export ANTHROPIC_API_KEYYOUR_API_KEY然后在本地终端运行claude --version验证时重点看三类信息能否连上配置的 Base URL、Key 是否被接受、返回是否包含预期模型字段。如果出现 401先检查YOUR_API_KEY是否替换如果出现 404先检查ANTHROPIC_BASE_URL是否误加了路径。更多 Claude Code 的配置细节可以放到文末的文档入口里对照。准备 Key 和查看配置说明时也可以从 TaoToken 官网 进入控制台。这里再次强调Claude Code 用ANTHROPIC_*Codex 不要用ANTHROPIC_*。两套工具的环境变量命名不同混用最常见的结果就是 Codex 读不到 Key或者把请求发到错误的 Base URL。5. Codex 配置config.toml 写法与不要误用 ANTHROPIC_*Codex 侧使用config.toml。如果你希望 Codex 在本地协助维护 3D 作品集的构建脚本、检查资源清单、生成浏览器事件对照表可以把模型供应商指向 TaoToken。配置时使用 Codex 自己的 provider 结构不要把ANTHROPIC_*写进去。~/.codex/config.toml示例model gpt-6 model_provider taotoken [model_providers.taotoken] name TaoToken base_url https://taotoken.net/api env_key TAOTOKEN_API_KEY wire_api chat环境变量在本地终端设置export TAOTOKEN_API_KEYYOUR_API_KEY如果 Codex 版本要求wire_api用responses按你本地版本调整但base_url保持为https://taotoken.net/api不要带 UTM也不要随手拼/v1。Codex 配置和 Claude Code 配置是两条线Claude Code 看ANTHROPIC_*Codex 看config.toml里的model_providers。把这两条线分开排障时就能快速定位。配置完成后在本地终端执行 Codex 的版本或帮助命令确认配置文件被读取。若返回 401检查TAOTOKEN_API_KEY是否与env_key对应若返回模型不存在检查model名称是否与模型对话页展示的一致。这个步骤不要跳过因为后面 35 个模型的批处理脚本都会复用同一份调用配置。6. CC Switch 三件套供应商名、Base URL、API Key 的切换模板如果你用 CC Switch 管理多个编码工具的配置建议把 TaoToken 单独建一个供应商条目。CC Switch 的“三件套”可以按下面映射填写供应商名称TaoTokenBase URLhttps://taotoken.net/apiAPI KeyYOUR_API_KEY有些版本还会让你选默认模型或工具类型那就再补一项Claude Code 场景选 Claude Code 对应模型Codex 场景选 Codex 的 GPT-6 配置。关键是不要在一个共用条目里同时塞ANTHROPIC_*和 Codex 的model_providers否则切换后很容易出现“看起来切了实际没生效”的问题。切换完成后本地终端重新打开或在 IDE 里重启对应插件。验证顺序建议如下# 在本地终端执行不要在生产服务器上直接跑批 echo $ANTHROPIC_BASE_URL echo $TAOTOKEN_API_KEY然后在各自工具里发一个最小请求。Claude Code 侧看ANTHROPIC_BASE_URL是否为https://taotoken.net/apiCodex 侧打开~/.codex/config.toml看base_url是否一致。两边都通过后再进入 3D 作品集的前端联调。7. 前端事件、模型加载与 Key 调用日志对照这个作品集最容易出问题的地方是浏览器里的表现和模型调用日志各自为政。比如用户点击机械臂前端以为要播放part_arm_joint_02但 Rodin 返回的模型节点名是arm_joint_2又比如模型其实还没下载完Key 调用日志却显示 GPT-6 已经返回了交互状态。解决方式是用同一个requestId贯穿前端事件、模型加载和 TaoToken 调用。前端埋点可以这样写// 浏览器端日志总线只记录 requestId不记录 Key const logBus []; function emit(type, payload {}) { const event { type, ts: performance.now(), ...payload }; logBus.push(event); console.log([portfolio], event); return event; } export async function requestInteractionPlan(sceneId, partId) { const requestId crypto.randomUUID(); emit(portfolio:interaction:start, { requestId, sceneId, partId }); emit(taotoken:request:start, { requestId, sceneId, model: gpt-6, purpose: interaction-plan }); const response await fetch(/api/taotoken-proxy, { method: POST, headers: { Content-Type: application/json, X-Request-Id: requestId }, body: JSON.stringify({ sceneId, partId, prompt: 为 ${sceneId} 的 ${partId} 生成零件级交互动画参数 }) }); const data await response.json(); emit(taotoken:request:end, { requestId, status: response.status, usage: data.usage }); emit(portfolio:interaction:ready, { requestId, sceneId, partId, action: data.action }); return data; }模型加载侧也挂同一个 requestIdexport async function loadPartModel({ requestId, modelUrl, partId }) { emit(model:load:start, { requestId, modelUrl, partId }); const model await loader.loadAsync(modelUrl); emit(model:load:success, { requestId, partId, children: model.children.length }); return model; }最后把日志整理成对照表方便复现。你可以在浏览器控制台按 requestId 过滤也可以在服务端日志里按X-Request-Id搜索前端事件模型加载日志TaoToken 调用日志说明portfolio:interaction:start无无用户点击零件准备请求交互参数taotoken:request:start无requestId开始服务端代理即将访问https://taotoken.net/apimodel:load:start开始加载可能并行35 个模型建议分批避免阻塞主线程model:load:success子节点数、包围盒无确认 BANG 拆出的零件节点是否可索引taotoken:request:end无usage、延迟、状态码记录 GPT-6 或 Rodin 的 Token 消耗portfolio:interaction:ready无无前端拿到动作参数准备播放零件动画只要这张表能在本地复现后面加模型、换零件、调动画时就不用靠猜。特别注意日志里不要打印YOUR_API_KEY的完整值最多记录 Key 的后四位或别名。服务端代理只记录requestId、模型名、耗时、状态码和用量。8. 联调排障401、404、CORS、模型加载慢与日志错位浏览器联调时最常见的问题不是 3D 渲染而是配置层。可以按下面顺序排查第一401 或鉴权失败。检查服务端是否真的带上了Authorization: Bearer YOUR_API_KEY以及环境变量是否被正确加载。Claude Code 侧检查ANTHROPIC_API_KEYCodex 侧检查TAOTOKEN_API_KEYCC Switch 侧检查切换后是否重启终端。不要把 Claude Code 的ANTHROPIC_*写进 Codex 的config.toml。第二404 或路径错误。Base URL 统一为https://taotoken.net/api不要在工具配置里带 UTM也不要随意追加/v1。如果你的 SDK 或接口文档明确要求追加路径以文档为准但不要同时保留多个版本。出现 404 时先看日志里的完整 URL再对照模型对话页的请求方式。第三CORS 或前端直连失败。浏览器直接请求模型接口通常会把 Key 暴露在前端也容易遇到跨域限制。推荐让浏览器只请求自家/api/taotoken-proxy由服务端携带 Key 访问 TaoToken。这样前端事件日志和 Key 调用日志可以在服务端用requestId对齐。第四模型加载慢。35 个精细建模如果一次性加载首屏会非常重。建议按场景分区、按零件优先级分批加载先加载轮廓和可点击外壳再加载内部零件。Rodin 生成阶段也先出低精度版本确认交互点后再生成高精度资产。TaoToken 侧要记录每次调用的耗时和 Token 用量找出是生成慢还是加载慢。第五日志错位。前端用performance.now()服务端用 UTC 时间两者不要直接比较绝对时间。用requestId串联时间只用于分析延迟。每次用户点击零件都生成新的requestId模型加载如果复用同一批资产就用sceneId partId作为二级索引。9. 从一下午原型到可维护 skill把 3D 作品集流程固化原案例能把流程打包成 skill说明它已经不只是“一次演示”而是可以重复执行的资产管线。你可以把这条管线拆成四段参考图与交互逻辑、Rodin 资产生成、BANG 零件拆分、浏览器事件绑定。每一段都保留输入输出清单例如sceneId、partId、modelUrl、requestId、usage。这样下次新增一个模型时只需要替换输入不需要重写整套联调逻辑。在配置层建议固定三件事TaoToken 的 Key 存在服务端Base URL 始终写https://taotoken.net/apiClaude Code、Codex、CC Switch 各自使用正确字段。浏览器侧则固定前端事件命名和日志格式让 35 个模型、零件级动画和 Token 消耗都能被同一套日志追踪。做到这一步作品集才真正可维护。如果你准备按这条链路复现建议顺序是先在模型对话页验证 GPT-6 与 Rodin 的调用参数再选 Coding Plan 估算 35 个模型的批量生成成本然后创建 API Key 写入服务端最后按 Claude Code 文档把配置同步到本地与团队环境。模型对话https://taotoken.net/models/detail/chat?utm_sourcetaotoken_aicg_blog_endutm_contentcta_chat_3d_portfolioCoding Planhttps://taotoken.net/coding-plan?utm_sourcetaotoken_aicg_blog_endutm_contentcta_coding_plan_3d_portfolioAPI Keyshttps://taotoken.net/console/api-keys?utm_sourcetaotoken_aicg_blog_endutm_contentcta_api_keys_3d_portfolioClaude Code 文档https://taotoken.net/doc/ClaudeCodeAnthropic?utm_sourcetaotoken_aicg_blog_endutm_contentcta_claude_code_doc_3d_portfolio