这个 1024，我用华为云码道做了一颗能定制的网页芯片

关注

原创 2026-10-18 23:53:28 1.7w 阅读 AI 写同款· GEO 优化 ›

国内如何合规使用多模态大模型：Gemini替代方案与国产模型选型指南多模态大模型是当前AI应用的核心技术形态，其原理在于联合建模文本、图像等异构数据，通过跨模态对齐与融合实现语义理解与生成。这类模型的技术价值体现在高精度图文理解、结构化信息抽取和低延迟推理能力上，广泛应用于智能客服、医疗影像分析、政务文档处理及教育内容生成等场景。面对Gemini等境外闭源模型在国内不可直接访问的现实，开发者需转向能力对等、中文优化、合规可控的替代路径——Qwen-VL、Kimi Chat、GLM-4V等国产多模态模型已在真实业务中验证其在PDF解析、表格识别、中文术语理解等关键指标上达到甚阅读详情

一键开通华为云码道 CodeArts 代码智能体：https://developer.huaweicloud.com/codeartsco.html?source=dmzntgwatomgit1&sourcead=dmzntgwatomgithd

今年的 1024，我想做一个可以放进网站首屏的小作品：一颗带金属边框、引脚和电路走线的芯片，中心写上自己的文字，按下按钮，再看它逐步亮起来。

名字就叫「打造你自己的 AI 芯片」。先说清楚，这里的“打造”是网页视觉定制，不是设计真实芯片，也没有运行 AI 推理或模拟算力。我们能改的是铭文、署名、材质和光效，得到的是一套 Three.js 动效，以及把它接入网页的方法。

我用华为云码道 CodeArts 代码智能体完成这次开发。下面是实际运行页面的「首屏预览」：左侧留给标题和按钮，右侧放芯片，旁边的调节栏只属于演示页面。

在这里插入图片描述

这次我给项目定了一个很实际的目标：调完以后，能把芯片动效带到自己的页面里。否则，用户在演示页上改了半天文字，最后只能截图，使用场景还是有点窄。

先约定怎么接入，再让码道开始写

我提交给码道的需求里，专门写了“不使用 iframe”。标题、介绍、链接和按钮仍然由网站自己管理，组件只负责芯片、电路与光效。JavaScript 把 Canvas 挂到指定容器里，就像给首屏加一层三维画面。

这是我在 Agent 中提交完整需求的截图。当时还附了一张设计参考图，用来说明黑金配色、分层结构和首屏布局，不把它当成已经做好的模型。

在这里插入图片描述

我把交付内容分成了三个部分，它们各有用途：

交付内容	用来做什么	当前源码位置
演示调节页	修改文字、选材质、看动效、生成接入配置	`src/demo/`
芯片动效模块	创建三维场景，处理动画、尺寸变化与资源释放	`src/chip-hero/`
独立 Banner 示例	展示普通 HTML 页面如何使用构建后的模块	`examples/banner/`

演示页使用 Vue 3、TypeScript 和 Vite，渲染核心使用 Three.js。现在仓库里的核心目录没有导入 Vue，独立示例也没有通过 iframe 嵌入整个演示页面。这一点很重要：接入者需要的是芯片，不需要把右侧调节面板也搬进自己的网站。

仓库创建和初始化同样交给 AtomGit 平台的码道完成。随后，Agent 把参数校验、程序纹理、几何结构、时间线、渲染控制器、演示页和独立示例拆成了任务。

在这里插入图片描述

同学们如果也打算做可复用动效，我建议早点说清楚“演示界面”和“交付组件”的区别。先把它们混在一个页面里，等到最后再拆，按钮、样式和状态往往已经互相依赖了。

我想看清芯片，而不只是看见一团光

首版出来以后，我继续提了两个具体问题：芯片不能放大缩小，观察角度也不够正；另外，细节还需要增加。

这些意见都保留在会话里。码道随后检查了滚轮、缩放、指针交互和相机方向相关代码。

在这里插入图片描述

我的想法很简单：既然允许用户定制中心铭文，就得让人看得清那几个字。芯片在画面里太小，再多的细节也用不上。后面的操作录屏里，已经可以看到修改铭文和放大观察的过程。

在这里插入图片描述

这段 GIF 是操作录屏，应用本身没有提供 GIF 导出。录屏中把核心文字改成“哈哈”以后，芯片上的文字也跟着变化；放大以后，中心模块、金属外框和四周引脚更容易分辨。

当前代码中的滚轮缩放改变的是相机与主体的距离，观察方向更接近从上方正面看芯片，同时仍保留一点透视。它不是任意角度的三维建模查看器，也没有实现手机双指捏合。

芯片细节则分成了两种做法。外框、封装台阶、内部模块和引脚使用几何体；板上的线路、金属拉丝、铭文等使用程序纹理。例如，外框由四条窄金属结构围成，中间留空；引脚通过 InstancedMesh 批量构造，而不是每根都单独维护一套模型。

这样能保留可辨认的层次，也不必为了每一条细线都建立模型。它仍然是艺术化的芯片形象，里面的分区不代表真实晶体管布局，不能从画面推断制程或者性能。

点亮动作有先后，亮完还要收回来

比起让整个模型一直闪，我更希望点亮动作有个过程：电路先有变化，内部模块接着响应，最后才轮到核心。点亮之后，亮度再回落，让文字和结构重新看得清。

代码把这段动作集中在一条时间线上。src/chip-hero/defaults.ts 中定义了阶段边界，animation.ts 根据当前活跃时间计算线路、触点、模块和核心的状态：

阶段	代码设定的时间区间	动作安排
待机建立	0～0.35 秒	建立低亮度状态
走线通电	0.35～1.1 秒	光段沿线路向芯片入口移动
分区唤醒	1.1～1.7 秒	内部模块错开响应
核心点亮	1.7～2.1 秒	核心文字区域提亮
回落稳定	2.1～2.8 秒	从峰值亮度回落
稳态脉冲	2.8 秒以后	周期性地安排低强度脉冲

这些数字是动画的配置时间，不是芯片启动耗时，更不是网页性能测试。实际页面下方也有对应的阶段提示，第一张运行图停在「稳态脉冲」。

主循环里有一段很短、但需要注意单位的代码，摘自 src/chip-hero/controller.ts：

if (shouldAnimate()) {
  activeTime += Math.min(0.12, Math.max(0, dt / 1000));
}

这里的 dt 是毫秒，时间线使用秒，所以先除以 1000；单次推进再限制到最多 0.12 秒，避免某一帧间隔过长时动画突然跳过一大段。后面的状态计算读取这个活跃时间，而不是简单地“每渲染一帧，进度加一”。

右侧的「流光速度」也有明确范围：当前实现用它调节稳态光段的行进速度，不是把整段开场通电动作一起加速。把这些控制项分清楚，调参数时才知道自己改的是哪一部分。

从演示页拿走的是模块和配置

定制面板里有黑金、银蓝、暖铜三种主题，核心铭文最多 8 个字素，署名最多 12 个字素。底部还提供 HTML、JavaScript、CSS 和配置 JSON 标签，方便查看接入内容。

那么，真正接到普通网页时需要做什么？

仓库的 examples/banner/main.js 从构建产物导入 createChipHero。下面是其中的实际调用片段：effect 和 hero 是前面找到的特效容器与 Banner 节点，状态与错误处理函数也已在示例中定义。

chip = createChipHero(
  effect,
  lastOptions ?? {
    text: 'AI',
    signature: '小林',
    theme: 'black-gold',
    placement: 'right',
    background: 'transparent',
  },
  {
    pointerTarget: hero,
    onStatusChange: showStatus,
    onError: (error) => showError(`[${error.code}] ${error.message}`),
  },
);

placement: 'right' 用来给左侧文案留位置，background: 'transparent' 用来配合宿主背景。组件内部创建 Canvas，并挂到传入的容器；标题、按钮仍然是外面的 HTML，不会变成画布里一块只能看的文字。

接入也有几个实际条件：网站需要允许运行自定义 JavaScript，能够托管构建后的模块，并给特效容器设置真实高度。不是把这段代码粘到任何文章编辑器里，都能自动得到一个可运行的芯片。

独立 Banner 示例依赖构建产物，运行顺序是先在项目目录执行 npm install、npm run build，再执行 npm run preview。预览服务启动后，通过 /examples/banner/ 路径查看示例；具体端口以终端输出为准。

页面离开或组件卸载时，还需要调用 chip.destroy()。当前实现会取消动画帧、断开观察器、移除监听，并释放模型、场景和渲染器资源。对一个准备嵌进其他网站的动效来说，能移除和能创建同样需要考虑。

这里还有一处接入细节值得继续调整：现在独立示例把滚轮监听放在整个 Banner 上，缩放处理会阻止默认滚动。芯片是方便放大了，但放进长页面时，会影响鼠标停在 Banner 区域的正常滚动。后续更适合把缩放限制在专门的观察区域，或只在明确的交互模式下启用。

导出范围和测试范围，都写具体一点

演示页提供「保存芯片 PNG」，旁边说明了导出范围：当前三维画布，不包含网页标题、按钮和宿主背景。如果想拿到一张带完整首屏文案的宣传图，那是另一种导出需求，不能混在这个按钮里理解。

码道的首轮交付记录报告，94 项单元测试和 22 项浏览器冒烟检查通过；同一阶段还记录了提交 2a2a21b，将 50 个文件推送到 origin/main。随后，我要求把仓库改为公开，Agent 返回了 visibility: public 的结果。

在这里插入图片描述

仓库地址：cannonmonster011 / chip-hero。本文涉及的接入方式、时间线和缩放实现，都可以在仓库对应文件中找到。

这份测试结果需要和它的条件一起看。仓库 docs/TEST_REPORT.md 记录的浏览器环境是 Chromium 加 SwiftShader 软件渲染；PNG 检查验证了下载触发，但没有验证导出图片的像素内容和透明通道。报告也列明，真实 GPU 帧率、物理触屏设备以及 Safari、Firefox 尚未覆盖。

因此，我不会把“94 + 22 项通过”写成“所有设备都能稳定 60 帧”。这份报告来自首轮交付，也早于后面的细节优化，不能直接当作每次修改后的完整回归结果。

这次让我觉得项目开始有用的地方，是把中心的“AI”改成自己的文字之后，还能继续拿到接入代码。个人主页、技术活动页或者项目介绍页，都可以围绕这颗芯片安排自己的标题和内容。至于模型细节，我还想继续打磨，但首屏的文字得能读、按钮得能用、页面得能正常滚动，这几件事需要和视觉效果一起检查。