切換語言為:簡體

大模型應用開發:如何在網頁中嵌入3D人物

  • 爱糖宝
  • 2024-10-14
  • 2044
  • 0
  • 0

要實現的效果如圖所示:

大模型應用開發:如何在網頁中嵌入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專案中。

大模型應用開發:如何在網頁中嵌入3D人物

模型檔案格式轉化

透過將模型匯入到blender中,把glb格式的檔案匯出為fbx,匯出時需要勾選保留貼圖材質資訊,模式選擇複製。
注意:在匯出前,需要將貼圖進行解壓到當前資料夾中,不然在把匯出的fbx模型上傳到mixamo網站時,顯示的會是白模。

動畫繫結

大模型應用開發:如何在網頁中嵌入3D人物 上傳模型,選擇動畫,匯出。 匯出的檔案是fbx格式,需要再次透過blender轉化為glb格式。

頁面渲染

  1. 安裝3D渲染元件

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

  1. 3d模型方式專案資料夾中,比如src/assets/assistant.glb

  2. 匯出模型檔案
    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>
    );
}

0則評論

您的電子郵件等資訊不會被公開,以下所有項目均必填

OK! You can skip this field.