如何使用 react 和 three.js 在网站渲染自己的3D模型

狂奔滴小马

发布于 2022-03-30 15:09:03

9K1

发布于 2022-03-30 15:09:03

文章被收录于专栏：前端专享

哈喽，大家好，我是小马，今天翻译一篇文章《How to Use Three.js And React to Render a 3D Model of Your Self》，内容是当下最流行的 three.js，根据本文步骤，你将零基础学会在网页中渲染 3D 模型。

正文开始

在本文中，我将介绍如何在 react 项目中使用 react-three-fiber 创建的一个 3D 软件程序，配置 3D 参数(如 Blender 或 Maya ) 。在本文结束时，您将能够在您的网站上渲染一个 3D 模型 (gltf / glb)。

获取自己的 3D 模型

为了获得自己的 3D 模型，我们使用 Ready Player Me 这个网站，一个免费的 3D 形象创建器来自 Wolf3D，允许任何人在几分钟内创建自己的外观表现，不需要任何 3D 建模经验，你只需要做的是快速自拍，然后等待程序根据你的肖像自动生成自定义 3D 形象。

然后你可以自由地使用一系列合适的发型、肤色、面部特征、服装选择和其他可定制的属性对自己的角色进行调整。

登录这个网站后 Ready Player Me, 你只需要遵循以下步骤，你就可以开始进行。

选择体型

上传你自己的照片

定制您的外观

下载您的模型

在 React 中渲染模型

为了在 react 程序中渲染这个模型，我们将使用 react-three-fiber** 一个**Threejs React 渲染器

项目开发

首先让我们创建一个项目

npx create-react-app my-3d-model
#or
yarn create react-app my-3d-model

然后安装 @react-three/fiber 和 @react-three/drei

npm install three @react-three/fiber @react-three/drei
#or
yarn add three @react-three/fiber @react-three/drei

将模型转换为 React 组件

完成之后，继续并运行以下命令，使用 gltfjsx 转换成 react 组件格式。

npx gltfjsx model.glb

转换后的内容类似于以下代码

import React, { useRef } from 'react'
import { useGLTF } from '@react-three/drei'

export default function Model({ ...props }) {
  const group = useRef()
  const { nodes, materials } = useGLTF('/model.glb')
  return (
    <group ref={group} {...props} dispose={null}>
      <primitive object={nodes.Hips} />
      <skinnedMesh
        geometry={nodes.Wolf3D_Body.geometry}
        material={materials.Wolf3D_Body}
        skeleton={nodes.Wolf3D_Body.skeleton}
      />
      <skinnedMesh
        geometry={nodes.Wolf3D_Glasses.geometry}
        material={materials.Wolf3D_Glasses}
        skeleton={nodes.Wolf3D_Glasses.skeleton}
      />
      <skinnedMesh
        geometry={nodes.Wolf3D_Hair.geometry}
        material={materials.Wolf3D_Hair}
        skeleton={nodes.Wolf3D_Hair.skeleton}
      />
      <skinnedMesh
        geometry={nodes.Wolf3D_Outfit_Bottom.geometry}
        material={materials.Wolf3D_Outfit_Bottom}
        skeleton={nodes.Wolf3D_Outfit_Bottom.skeleton}
      />
      <skinnedMesh
        geometry={nodes.Wolf3D_Outfit_Footwear.geometry}
        material={materials.Wolf3D_Outfit_Footwear}
        skeleton={nodes.Wolf3D_Outfit_Footwear.skeleton}
      />
      <skinnedMesh
        geometry={nodes.Wolf3D_Outfit_Top.geometry}
        material={materials.Wolf3D_Outfit_Top}
        skeleton={nodes.Wolf3D_Outfit_Top.skeleton}
      />
      <skinnedMesh
        name="EyeLeft"
        geometry={nodes.EyeLeft.geometry}
        material={nodes.EyeLeft.material}
        skeleton={nodes.EyeLeft.skeleton}
        morphTargetDictionary={nodes.EyeLeft.morphTargetDictionary}
        morphTargetInfluences={nodes.EyeLeft.morphTargetInfluences}
      />
      <skinnedMesh
        name="EyeRight"
        geometry={nodes.EyeRight.geometry}
        material={nodes.EyeRight.material}
        skeleton={nodes.EyeRight.skeleton}
        morphTargetDictionary={nodes.EyeRight.morphTargetDictionary}
        morphTargetInfluences={nodes.EyeRight.morphTargetInfluences}
      />
      <skinnedMesh
        name="Wolf3D_Head"
        geometry={nodes.Wolf3D_Head.geometry}
        material={materials.Wolf3D_Skin}
        skeleton={nodes.Wolf3D_Head.skeleton}
        morphTargetDictionary={nodes.Wolf3D_Head.morphTargetDictionary}
        morphTargetInfluences={nodes.Wolf3D_Head.morphTargetInfluences}
      />
      <skinnedMesh
        name="Wolf3D_Teeth"
        geometry={nodes.Wolf3D_Teeth.geometry}
        material={materials.Wolf3D_Teeth}
        skeleton={nodes.Wolf3D_Teeth.skeleton}
        morphTargetDictionary={nodes.Wolf3D_Teeth.morphTargetDictionary}
        morphTargetInfluences={nodes.Wolf3D_Teeth.morphTargetInfluences}
      />
    </group>
  )
}

useGLTF.preload('/model.glb')

创建场景

import React, { Suspense } from 'react'
import { Canvas } from '@react-three/fiber'
import { OrbitControls } from '@react-three/drei'

export default function App() {
  return (
    <Canvas
      camera={{ position: [2, 0, 12.25], fov: 15 }}
      style={{
        backgroundColor: '#111a21',
        width: '100vw',
        height: '100vh',
      }}
    >
      <ambientLight intensity={1.25} />
      <ambientLight intensity={0.1} />
      <directionalLight intensity={0.4} />
      <Suspense fallback={null}>// your model here</Suspense>
      <OrbitControls />
    </Canvas>
  )
}

将模型添加到场景中

首先将模型 (glb 文件) 添加到 public文件夹下，使用 gltfjsx 生成的文件将其放入 src 下的 components 文件夹

import React, { Suspense } from 'react'
import { Canvas } from '@react-three/fiber'
import { OrbitControls } from '@react-three/drei'
import Model from './Model' /* highlight-line */

export default function App() {
  return (
    <Canvas
      camera={{ position: [2, 0, 12.25], fov: 15 }}
      style={{
        backgroundColor: '#111a21',
        width: '100vw',
        height: '100vh',
      }}
    >
      <ambientLight intensity={1.25} />
      <ambientLight intensity={0.1} />
      <directionalLight intensity={0.4} />
      <Suspense fallback={null}>
        <Model position={[0.025, -0.9, 0]} /> /* highlight-line */
      </Suspense>
      <OrbitControls />
    </Canvas>
  )
}

修改 app.js

body {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

添加 css

结果展示 codesandbox.io

给模型添加动画

给 3D 模型添加动画, 需要在你的电脑上安装 blender

将模型导入到 blender

Blender 是免费的开源 3D 软件，它支持整个 3D 管道建模、索具、动画、模拟、渲染、合成和运动跟踪，甚至视频编辑和游戏创作，了解更多信息。

创建一个新的 blender 项目

删除所有对象中的物体

将 glb 文件导入 blender

选择您的模型，然后单击 Import glTF 2.0

将模型转换为 fbx 格式

在将添加任何动画添加到我们的模型之前，我们需要首先将其转换为FBX格式。

选择模型

要在 blender 中选择 3D 模型，只需单击键盘a或者您可以使用鼠标选择。

将模型导出为 FBX

确保选择的 Path Mode 是 Copy, 然后点击 Embed textures 这个选项.

添加动画 mixamo

Mixamo 是一项免费的在线服务，用于自动装配和动画 3d 角色.它由 Mixamo 公司开发，由 Adobe 于 2015 年收购。Mixamo 允许用户上传 FBX、OBJ 或 Zip 文件，然后网站尝试在两分钟内自动操纵角色。

将模型上传到 mixamo

选择动画并下载动画模型

将动画模型转换回 glb 格式

为了能够在 react 中使用需要转换会 glb 格式。

将动画模型导入 blender

将动画模型导出为 glb

在 react 中渲染动画模型

在 public 文件夹下替换这个 model.glb 文件使用动画模型，然后在 src/Model.js 修改以下代码.

import React, { useRef, useEffect } from 'react' /* highlight-line */
import { useGLTF, useAnimations } from '@react-three/drei' /* highlight-line */

export default function Model({ ...props }) {
  const group = useRef()
  const { nodes, materials, animations } = useGLTF('/model.glb')

  const { actions } = useAnimations(animations, group) /* highlight-line */

  // 'Armature|mixamo.com|Layer0' is the name of the animation we need to run.
  // console.log(actions);

  useEffect(() => {
    /* highlight-line */
    actions['Armature|mixamo.com|Layer0'].play() /* highlight-line */
  }) /* highlight-line */

  return (
    <group ref={group} {...props} dispose={null}>
      <primitive object={nodes.Hips} />
      <skinnedMesh
        geometry={nodes.Wolf3D_Body.geometry}
        material={materials.Wolf3D_Body}
        skeleton={nodes.Wolf3D_Body.skeleton}
      />
      <skinnedMesh
        geometry={nodes.Wolf3D_Glasses.geometry}
        material={materials.Wolf3D_Glasses}
        skeleton={nodes.Wolf3D_Glasses.skeleton}
      />
      <skinnedMesh
        geometry={nodes.Wolf3D_Hair.geometry}
        material={materials.Wolf3D_Hair}
        skeleton={nodes.Wolf3D_Hair.skeleton}
      />
      <skinnedMesh
        geometry={nodes.Wolf3D_Outfit_Bottom.geometry}
        material={materials.Wolf3D_Outfit_Bottom}
        skeleton={nodes.Wolf3D_Outfit_Bottom.skeleton}
      />
      <skinnedMesh
        geometry={nodes.Wolf3D_Outfit_Footwear.geometry}
        material={materials.Wolf3D_Outfit_Footwear}
        skeleton={nodes.Wolf3D_Outfit_Footwear.skeleton}
      />
      <skinnedMesh
        geometry={nodes.Wolf3D_Outfit_Top.geometry}
        material={materials.Wolf3D_Outfit_Top}
        skeleton={nodes.Wolf3D_Outfit_Top.skeleton}
      />
      <skinnedMesh
        name="EyeLeft"
        geometry={nodes.EyeLeft.geometry}
        material={nodes.EyeLeft.material}
        skeleton={nodes.EyeLeft.skeleton}
        morphTargetDictionary={nodes.EyeLeft.morphTargetDictionary}
        morphTargetInfluences={nodes.EyeLeft.morphTargetInfluences}
      />
      <skinnedMesh
        name="EyeRight"
        geometry={nodes.EyeRight.geometry}
        material={nodes.EyeRight.material}
        skeleton={nodes.EyeRight.skeleton}
        morphTargetDictionary={nodes.EyeRight.morphTargetDictionary}
        morphTargetInfluences={nodes.EyeRight.morphTargetInfluences}
      />
      <skinnedMesh
        name="Wolf3D_Head"
        geometry={nodes.Wolf3D_Head.geometry}
        material={materials.Wolf3D_Skin}
        skeleton={nodes.Wolf3D_Head.skeleton}
        morphTargetDictionary={nodes.Wolf3D_Head.morphTargetDictionary}
        morphTargetInfluences={nodes.Wolf3D_Head.morphTargetInfluences}
      />
      <skinnedMesh
        name="Wolf3D_Teeth"
        geometry={nodes.Wolf3D_Teeth.geometry}
        material={materials.Wolf3D_Teeth}
        skeleton={nodes.Wolf3D_Teeth.skeleton}
        morphTargetDictionary={nodes.Wolf3D_Teeth.morphTargetDictionary}
        morphTargetInfluences={nodes.Wolf3D_Teeth.morphTargetInfluences}
      />
    </group>
  )
}

useGLTF.preload('/model.glb')

最终展示效果