SuperAPI AI 工具集

embed-three-ws-avatar

前端与建站

查看项目

更新于 10-16 02:31

技能介绍

用途:通过 <agent-3d> Web Component 在任意网站嵌入 three.ws 的绑定骨骼、可动画的 3D 虚拟形象(GLB),无框架依赖,适用于纯 HTML、React、Vue、Svelte、Angular、WordPress、Webflow、Shopify、Framer 和 Notion 嵌入。资源由 three.ws CDN 提供,带 access-control-allow-origin: *,可从任意源加载。

主要能力:支持 body(GLB 绝对 URL)、brain(对话引擎,none 为静默装饰,free 为宿主付费免费 LLM 通道,其他值为具体模型 id)、mode、kiosk/viewer、poster、eager、background、name-plate、clip、framing、responsive 等属性;提供 agent:ready、agent:error、agent:load-progress 及 brain/voice 相关事件;命令式 API 包括 wave、playClip、lookAt、setMood、say、speak、pause、resume、destroy;可通过 --agent-accent 等 CSS 自定义属性主题化。

使用方式:引入 https://three.ws/agent-3d/1.5.2/agent-3d.js(带 integrity 与 crossorigin),或使用同路径的 UMD 构建 agent-3d.umd.cjs。生产环境应固定精确版本并配合 SRI,避免使用 latest。GLB 可来自 three.ws 的 create-3d-avatar、generate-3d-model、rig-a-model 技能,或通过 Avatar Studio iframe 导出。

适用场景:网页中的 3D 虚拟形象展示、对话式虚拟助手、品牌互动组件等。

限制:<agent-3d> 不支持 auto-rotate 属性;Avatar Studio 协议目前仅支持导出,无法将已有 GLB 导入再编辑;SPA 卸载时需调用 destroy 以避免 WebGL 上下文泄漏。具体收费、价格与平台支持细节暂未提供。