Day 4 · 调用群核 Aholo API

昨天生成的模型，现在还只能在 Lux3D 里看。今天把它放进你自己的网页，让同学打开就能转着看、读到你的说明。如果你手里是一个 3DGS 场景，也可以从展示它开始。不会写代码也没关系，下面有一份能直接用的网页模板，剩下的让 AI 帮你改。

读完你能：

• 把 Lux3D 导出的 GLB 模型或 Aholo Reality 的场景放进自己的网页，用手机也能打开。
• 给 AI 编程工具写一份清楚、不泄露密钥、做完能检查的需求，让它在模板上继续改。
• 需要时去哪里申请 API key、去哪里查文档，让 AI 用群核的接口造资产或重建场景。

01先看清手里是哪一种素材

接着昨天的例子：你想做一个校园文创展示页，已经用 Lux3D 生成了一只纪念杯。今天的目标只有一个：让它出现在网页里，能转到背面看。上传、批量生成、用户登录这些，今天都先不做。

两种素材，放进网页的办法不一样：

注意 Lux3D 别用默认的 ZIP 下载：里面的 MODEL.glb 放进网页会整只发灰，颜色在另外几张贴图里。选 GLB 就是一个文件，贴图都在里面。

两者不能混用：别把 GLB 交给 3DGS 的查看器，也别用 three.js 的模型加载器去开 3DGS 场景。Aholo API 则是另一回事：它让程序把素材交给群核去处理（文字或图片生成模型、上传视频重建场景），再把结果拿回来。只是展示已经做好的东西，今天用不到它。

下面这些是今天会用到的官方资料，先收藏好，等会儿直接把链接发给 AI：

• Aholo 空间智能实验室：开发者首页，和 Lux3D 是同一个群核账号、同一份积分。
• API 快速开始 · 怎样带上 API key · API 参考：接口要什么、返回什么。
• Skills 和 MCP：给 AI 编程工具装上的群核能力包，装好后 AI 自己会调用接口。
• Aholo Viewer 文档：想自己写代码控制 3DGS 场景（不用嵌入代码）时再看。
• three.js 的 GLTFLoader 文档：加载 GLB 模型用的。

02让模型出现在网页里，再让 AI 帮你改

不会写网页，也能做。打开一个 AI 编程工具（比如 Trae 或 Claude Code），把模型文件、相关文档和一份需求交给它，让它写代码；你打开看效果，哪里不对就告诉它，它再改。这种用自然语言让 AI 写代码、边试边改的方式，叫 Vibe Coding。

为了让你第一步不卡住，我们先给一份已经测过能用的模板：新建一个文件夹，把昨天下载的 GLB 改名为 model.glb 放进去，再在同一个文件夹里新建 index.html，粘贴下面的代码。

<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>我的 3D 作品</title>
  <style>html,body{margin:0;height:100%;background:#f4f1ea}#app{width:100%;height:100%}</style>
  <script type="importmap">
    { "imports": { "three": "https://cdn.jsdelivr.net/npm/three@0.180.0/build/three.module.js",
                   "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.180.0/examples/jsm/" } }
  </script>
</head>
<body>
  <div id="app"></div>
  <script type="module">
    import * as THREE from 'three';
    import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
    import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
    import { RoomEnvironment } from 'three/addons/environments/RoomEnvironment.js';

    const app = document.getElementById('app');
    const renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.setPixelRatio(devicePixelRatio);
    renderer.setSize(app.clientWidth, app.clientHeight);
    app.appendChild(renderer.domElement);

    const scene = new THREE.Scene();
    scene.background = new THREE.Color(0xf4f1ea);
    scene.environment = new THREE.PMREMGenerator(renderer).fromScene(new RoomEnvironment(), 0.04).texture;
    const camera = new THREE.PerspectiveCamera(40, app.clientWidth / app.clientHeight, 0.001, 100);
    const controls = new OrbitControls(camera, renderer.domElement);
    controls.enableDamping = true;

    // Lux3D 的模型按真实尺寸、单位是米，所以按模型大小自动摆相机
    new GLTFLoader().load('./model.glb', (gltf) => {
      const model = gltf.scene;
      scene.add(model);
      const box = new THREE.Box3().setFromObject(model);
      const size = box.getSize(new THREE.Vector3()).length();
      const center = box.getCenter(new THREE.Vector3());
      camera.position.copy(center).add(new THREE.Vector3(0, size * 0.3, size * 1.3));
      controls.target.copy(center);
      controls.update();
    });

    addEventListener('resize', () => {
      camera.aspect = app.clientWidth / app.clientHeight;
      camera.updateProjectionMatrix();
      renderer.setSize(app.clientWidth, app.clientHeight);
    });
    renderer.setAnimationLoop(() => { controls.update(); renderer.render(scene, camera); });
  </script>
</body>
</html>

注意：直接双击 index.html 是看不到模型的，浏览器不允许本地网页读取旁边的文件。在 AI 编程工具里对它说「在这个文件夹启动一个本地预览」，或者自己在文件夹里运行 npx serve，再用浏览器打开它给的地址。看到杯子、能拖动转到背面，第一步就成了。我们用 Lux3D 导出的纪念杯在电脑和手机尺寸下都试过这份模板。

接下来让 AI 在这个基础上改。需求要小。群核团队做过一个「空间博物馆」：三维展厅的墙上挂着一排空间封面，点进去就能浏览对应的空间。你今天只做它的最小版本：一张封面，点开能看到你的那件资产，不用先搭整个展厅。

复制下面的需求，把方括号里的内容换成你自己的，连同文件夹一起交给 AI：

这个文件夹里的 model.glb 是我用群核 Lux3D 生成并导出的 3D 模型，index.html 已经能用 three.js 把它显示出来。请在它的基础上，帮我做一个[校园文创展示页]。

给谁看：[想挑一件校园纪念品的同学]。
第一版只做：一张封面图和作品名，点开后显示这个模型，能拖动从正面、侧面、背面看，旁边显示我写的一段说明：[你的说明]。
不要做：登录、上传、地图、批量生成；不要用代码自己画一个模型来代替 model.glb。

请先在本机启动预览，告诉我打开哪个地址、怎样检查。手机上也要能打开和拖动。

AI 做完，你亲手打开网页，转几个角度看看。如果只有封面、模型一片白、或者打不开，就把你做了什么、看到了什么告诉同一个 AI，比如：「点了封面还是只有图片，没有能转的模型，请检查 model.glb 有没有加载成功。」

手里是 3DGS 场景的同学，做法更简单：把需求里的「model.glb」换成「这段 Aholo Reality 嵌入代码」，粘上你复制的那段代码，让 AI 把它放进封面点开后的页面就行。

最后，请一位同学用他的手机打开试试。你的电脑上能看，不代表他的手机也行；想让别人也能打开，可以让 AI 教你把文件夹发布成一个公开网址。如果贴图丢了或者转不动，先修好再加新功能。

03给作品加一个值得点的操作

能展示了以后，想一想：同学为什么要打开你的网页？是挑一件文创、回看一次旅行，还是玩一小段游戏？给它加上一个值得点的互动，今天就能知道这个想法做不做得出来。下面是两个可以借鉴的例子。

想做游戏：先让一座塔站稳

前面提到的塔防小游戏，是把一处真实空间重建成游戏场景，让玩家在地面上摆塔、挡住敌人。你可以借这个思路做校园小游戏：在自己熟悉的地方放一个游戏物体。

3DGS 场景看起来有地面，但程序并不知道地面在哪，这个案例是另外铺了一层网格当「地板」来处理碰撞的。你的第一步可以只放一个物体，看它的高度对不对、挪动后会不会陷进地里；站稳了，再加敌人和计分。

想做空间相册：先打开一处回忆

「旅行足迹」是一个用 Aholo 重建场景做的三维相册：在地球仪上点一个城市，就能走进在那里重建的场景。你可以把它缩成「校园里的一处回忆」：一张地点封面、一个场景、一段你自己写的话。今天先确认点开后真能看到那个地方。

04想让 AI 直接调用群核：申请 API key

两种情况需要用到 API：作品里要几十件道具，想让 AI 批量调用 Lux3D 生成；或者作品的核心是「同学上传自己拍的视频，网页还给他一个能浏览的三维空间」。这时先申请一个 API key，它相当于你账号的钥匙，调用一次就从你的积分里扣一次。

有了 key，最省事的办法是给 AI 编程工具装群核的 Skill，它会自己读文档、上传文件、等结果，不用你去研究接口。装法见 Skills 文档：

• 批量生成模型：skillhub install lux3d，然后说「用 Lux3D 把 ./图片 文件夹里的每张图生成 GLB 模型，存到 ./assets」。
• 视频重建场景：skillhub install aholo-3dgs-reconstruction，然后说「用 Aholo 把 ./video.mp4 重建成 3DGS，类型选物体，质量先用 low，完成后把查看地址给我」。
• 用 Codex 的话：左侧「Plugins」里搜索「Aholo Lux3D」安装官方插件，效果同上（群核官方课程演示过，会先报积分、等你批准再生成）。

我们实测过这两条：重建这条从上传到创建任务不到一秒，结果会出现在你 Aholo Reality 的「我的项目」里，和网页上传的一样；免费账号同时只能跑一个生成任务，提交多了会被拒绝，但不扣积分。不用 Skill 也可以，把上面的 快速开始 和 API 参考 链接交给 AI，让它照着写。

想做成让别人上传视频的网站，先猜一猜：只给 AI 一段视频和一个 key，它就知道怎么接通吗？在下面的流程链上点亮你已经准备好的环节，亮着「下一步」的就是该先补的那一项。

这种网站要有一个服务器替网页调用接口，key 只放在服务器上。第一版两个页面就够了：一个上传页提交视频，一个结果页打开重建好的场景。按这个顺序检查：视频真的提交上去了 → 拿到了重建结果 → 结果能用嵌入代码或 Viewer 打开、能转动。哪一步卡住了，就把那一步的现象（去掉 key）告诉 AI，让它排查。

想深入：大场景打开慢，或想在里面行走怎么办？

大场景可以先加载一个粗略版本，再根据你看的方向补充细节，这种做法叫细节层次（LOD）。它需要按 Viewer 文档提前处理场景文件。建议先用一个小场景跑通，再处理大的。

想在场景里走动，还需要碰撞数据：给地面、墙和门配上网格或体素做的「碰撞面」，否则人物会穿墙、掉下去。做好后沿着地面和门口实际走一遍检查。如果只是转着看，就不用做走动。