TypeScriptAI大前端
网页嵌入 3D 人物实现指南：基于 React 与 Three.js
本文介绍了在网页中嵌入 3D 人物的完整流程。通过 ReadyPlayerMe 设计角色，利用 Blender 和 Mixamo 处理动画绑定及格式转换（GLB/FBX），最后使用 React、Three.js 及 @react-three/fiber 库进行渲染。重点讲解了依赖安装、模型加载、动画播放控制及光照设置等关键技术点，帮助开发者快速构建类似 AI 智能助手的 3D 虚拟形象。
本文介绍了在网页中嵌入 3D 人物的完整流程。通过 ReadyPlayerMe 设计角色，利用 Blender 和 Mixamo 处理动画绑定及格式转换（GLB/FBX），最后使用 React、Three.js 及 @react-three/fiber 库进行渲染。重点讲解了依赖安装、模型加载、动画播放控制及光照设置等关键技术点，帮助开发者快速构建类似 AI 智能助手的 3D 虚拟形象。
在 Web 应用中集成 3D 虚拟形象已成为提升用户体验的重要手段，特别是在 AI 助手、虚拟客服等场景中。本文将详细介绍如何在网页中嵌入一个可交互的 3D 人物模型。我们将使用 React 作为前端框架，结合 Three.js 及其生态库（@react-three/fiber, @react-three/drei）进行渲染，并通过 ReadyPlayerMe、Blender 和 Mixamo 完成模型的创建与动画绑定。
要实现该效果，需要掌握以下工具和库：
首先，我们需要创建一个基础 3D 模型。推荐使用 ReadyPlayerMe 平台。
.glb。.glb 文件引入项目；若需动画，请继续下一步。注意：导出的 GLB 文件通常包含网格、材质和纹理信息，是 Web 端加载性能较好的格式。
为了让模型动起来，我们需要将其上传至 Mixamo 并下载带动画的文件，随后可能需要再次转换格式。
在将模型导入 Blender 或上传至 Mixamo 之前，务必确保贴图资源完整。
.glb 文件。.fbx。.fbx 文件再次导出为 .glb 格式，以便后续在 React 中使用。初始化 React 项目并安装必要的 3D 渲染依赖。
npm install three @react-three/fiber @react-three/drei
确保项目中已配置好静态资源加载器（如 Vite 或 Webpack），以便直接导入 .glb 文件。
在 src/utils 目录下创建 model.js 或 model.ts，统一管理模型路径。
import assistantModel from '../assets/assistant.glb';
export const agentModel = assistantModel;
创建 Model.tsx 组件，负责加载模型和处理动画逻辑。
import { Canvas, extend, useFrame } from '@react-three/fiber';
import { OrbitControls, useAnimations, useGLTF } from '@react-three/drei';
import { useEffect } from 'react';
import { agentModel } from '../../utils/model';
// 扩展 Three.js 几何体（如需特殊平面）
import { PlaneGeometry } from 'three';
extend({ PlaneGeometry });
function Model({ url }) {
// 加载 glTF/GLB 模型
const { scene, animations } = useGLTF(url);
// 提取动画数据
const { actions, mixer } = useAnimations(animations, scene);
useEffect(() => {
if (actions) {
// 播放指定名称的动画
// 注意：动画名称取决于 Mixamo 导出时的命名，通常为 'Armature|mixamo.com|Layer0'
const actionName = Object.keys(actions)[0];
if (actionName) {
actions[actionName].play();
}
}
}, [actions]);
// 每一帧更新动画混合器
useFrame((state, delta) => {
if (mixer) {
mixer.update(delta);
}
});
return <primitive object={scene} position={[0, -1, 0]} />;
}
export default function AgentModel() {
return (
<Canvas
camera={{ position: [0, 2, 5], fov: 30 }}
shadows
style={{ width: '100%', height: '100%' }}
>
<OrbitControls enableZoom={false} />
<ambientLight intensity={0.5} />
<directionalLight position={[5, 5, 5]} intensity={1} />
<pointLight position={[-5, 5, -5]} intensity={0.5} />
<Model url={agentModel} />
</Canvas>
);
}
[0, 2, 5] 设置摄像机位置，使人物位于画面中心偏下。useAnimations 返回的 actions 对象键名，不同来源的模型动画名称可能不同。这通常是因为贴图路径错误或材质未正确加载。
.glb 文件中的纹理被正确打包（Embedded Textures）。actions 对象是否为空。mixer.update() 在 useFrame 中被调用。.glb 体积。通过上述步骤，我们成功在 React 网页中嵌入了一个带有动画的 3D 人物。这一方案适用于 AI 对话助手、虚拟导购等多种场景。核心在于利用成熟的工具链（ReadyPlayerMe/Mixamo）生成资产，并通过 React Three Fiber 实现高效的 WebGL 渲染。开发者可根据实际需求调整光照、视角及交互逻辑，打造沉浸式的 Web 3D 体验。
微信公众号「极客日志」，在微信中扫描左侧二维码关注。展示文案：极客日志 zeeklog
生成新的随机RSA私钥和公钥pem证书。 在线工具，RSA密钥对生成器在线工具，online
基于 Mermaid.js 实时预览流程图、时序图等图表，支持源码编辑与即时渲染。 在线工具，Mermaid 预览与可视化编辑在线工具，online
将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具，Base64 字符串编码/解码在线工具，online
将字符串、文件或图像转换为其 Base64 表示形式。 在线工具，Base64 文件转换器在线工具，online
将 Markdown（GFM）转为 HTML 片段，浏览器内 marked 解析；与 HTML转Markdown 互为补充。 在线工具，Markdown转HTML在线工具，online
将 HTML 片段转为 GitHub Flavored Markdown，支持标题、列表、链接、代码块与表格等；浏览器内处理，可链接预填。 在线工具，HTML转Markdown在线工具，online