大模型应用开发：如何在网页中嵌入3D人物

要实现的效果如图所示：

左侧是插入的3D人物，类似AI智能助手的角色。

我们这里是通过React做的。需要用到以下工具或者网站：

1. readyplayer.me/ 自定义3D人物
2. Blender 3维设计软件，3D文件格式转化，主要是fbx和glb的互转
3. www.mixamo.com/ 人物动画绑定
4. react + three + @react-three/fiber + @react-three/drei 用于web渲染3D

以下是实现步骤：

设计3D人物

打开readyplayer，可以上传图片或者选择自定义用来定义一个3D人物，这个过程跟很多游戏中的捏脸功能是差不多的。设计好之后导出这个模型，导出的格式是glb的，如果不需要模型动画，这个时候就可以直接将模型引入到react项目中。

模型文件格式转化

通过将模型导入到blender中，把glb格式的文件导出为fbx，导出时需要勾选保留贴图材质信息，模式选择复制。
注意：在导出前，需要将贴图进行解压到当前文件夹中，不然在把导出的fbx模型上传到mixamo网站时，显示的会是白模。

动画绑定

上传模型，选择动画，导出。 导出的文件是fbx格式，需要再次通过blender转化为glb格式。

页面渲染

1. 安装3D渲染组件

npm install  @react-three/fiber three @react-three/drei

2. 3d模型方式项目文件夹中，比如src/assets/assistant.glb
3. 导出模型文件
   util.js

import assistantModel from '../assets/assistant.glb'

export const agentModel = assistantModel

5. 页面渲染
model.tsx

import {Canvas, extend, useFrame} from '@react-three/fiber';
import {OrbitControls, useAnimations, useGLTF} from '@react-three/drei';
import { agentModel } from '../../utils'
function Model({ url }) {
    const { scene, animations  } = useGLTF(url); // 加载 glTF 模型
    const { actions, mixer } = useAnimations(animations, scene); // 提取动画

    useEffect(() => {
        if (actions) {
            actions['Armature|mixamo.com|Layer0'].play(); // 播放指定动画
        }
    }, [actions]);

    useFrame((state, delta) => {
        mixer.update(delta); // 更新动画
    });
    return <primitive object={scene} position={[0, -1, 0]}/>;
}
import { PlaneGeometry } from 'three';
import {useEffect} from "react"; // 注意: PlaneGeometry 代替 PlaneBufferGeometry

// 扩展 three.js
extend({ PlaneGeometry });
export default function AgentModel() {
    return (
        <Canvas
            camera={{ position: [0, 2, 5], fov: 30 }}
            shadows>
            <OrbitControls />
            <ambientLight intensity={0.5} />
            <directionalLight position={[5, 5, 5]} />
            <Model url={agentModel}/>
        </Canvas>
    );
}

如何学习AI大模型？

我在一线互联网企业工作十余年里，指导过不少同行后辈。帮助很多人得到了学习和成长。

我意识到有很多经验和知识值得分享给大家，也可以通过我们的能力和经验解答大家在人工智能学习中的很多困惑，所以在工作繁忙的情况下还是坚持各种整理和分享。但苦于知识传播途径有限，很多互联网行业朋友无法获得正确的资料得到学习提升，故此将并将重要的AI大模型资料包括AI大模型入门学习思维导图、精品AI大模型学习书籍手册、视频教程、实战学习等录播视频免费分享出来。

第一阶段： 从大模型系统设计入手，讲解大模型的主要方法；

第二阶段： 在通过大模型提示词工程从Prompts角度入手更好发挥模型的作用；

第三阶段： 大模型平台应用开发借助阿里云PAI平台构建电商领域虚拟试衣系统；

第四阶段： 大模型知识库应用开发以LangChain框架为例，构建物流行业咨询智能问答系统；

第五阶段： 大模型微调开发借助以大健康、新零售、新媒体领域构建适合当前领域大模型；

第六阶段： 以SD多模态大模型为主，搭建了文生图小程序案例；

第七阶段： 以大模型平台应用与开发为主，通过星火大模型，文心大模型等成熟大模型构建大模型行业应用。

👉学会后的收获：👈
• 基于大模型全栈工程实现（前端、后端、产品经理、设计、数据分析等），通过这门课可获得不同能力；

• 能够利用大模型解决相关实际项目需求： 大数据时代，越来越多的企业和机构需要处理海量数据，利用大模型技术可以更好地处理这些数据，提高数据分析和决策的准确性。因此，掌握大模型应用开发技能，可以让程序员更好地应对实际项目需求；

• 基于大模型和企业数据AI应用开发，实现大模型理论、掌握GPU算力、硬件、LangChain开发框架和项目实战技能， 学会Fine-tuning垂直训练大模型（数据准备、数据蒸馏、大模型部署）一站式掌握；

• 能够完成时下热门大模型垂直领域模型训练能力，提高程序员的编码能力： 大模型应用开发需要掌握机器学习算法、深度学习框架等技术，这些技术的掌握可以提高程序员的编码能力和分析能力，让程序员更加熟练地编写高质量的代码。

1.AI大模型学习路线图
2.100套AI大模型商业化落地方案
3.100集大模型视频教程
4.200本大模型PDF书籍
5.LLM面试题合集
6.AI产品经理资源合集

👉获取方式：
😝有需要的小伙伴，可以保存图片到wx扫描二v码免费领取【保证100%免费】🆓