AI 助理
备案控制台
开发者社区 人工智能 文章 正文

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

2022-06-20 2364
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 在本文中，我将介绍如何在 react 项目中使用 react-three-fiber 创建的一个3D 软件程序，配置3D 参数(如Blender或Maya)

哈喽，大家好，我是小马，今天翻译一篇文章 《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项目

创建一个新的blender项目截图

删除所有对象中的物体

删除所有对象中的物体截图

将 glb 文件导入 blender

将 glb 文件导入 blender截图

将 glb 文件导入 blender第二步截图

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

选择模型导入截图

将模型转换为 fbx 格式

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

选择模型

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

选择 3D 模型

将模型导出为FBX

将模型导出为FBX第一步

将模型导出为FBX第二步

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

添加动画 mixamo

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

将模型上传到 mixamo

将模型上传到 mixamo 截图

将模型上传到 mixamo 截图第二步

选择动画并下载动画模型

选择动画

下载动画模型

将动画模型转换回glb格式

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

将动画模型导入 blender

将动画模型导入 blender 截图

将动画模型导出为 glb

将动画模型导出为 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');

最终展示效果

最终展示效果.gif

源码链接

https://codesandbox.io/s/3d-model-animation-d41e9u

以上就是本文全部内容，希望这篇文章对大家有所帮助，也可以参考我往期的文章或者在评论区交流你的想法和心得，欢迎一起探索前端。

本文首发掘金平台，来源小马博客

文章标签：
前端开发
图形学
关键词：
JavaScript 3d
JavaScript渲染
JavaScript模型
JavaScript网站
react JavaScript
狂奔滴小马
目录
相关文章
光明顶阳顶天
|
11月前
|
JavaScript 前端开发 Go
CSS 与 JS 对 DOM 解析和渲染的影响
【10月更文挑战第16天】CSS 和 JS 会在一定程度上影响 DOM 解析和渲染，了解它们之间的相互作用以及采取适当的优化措施是非常重要的。通过合理的布局和加载策略，可以提高网页的性能和用户体验，确保页面能够快速、流畅地呈现给用户。在实际开发中，要根据具体情况进行权衡和调整，以达到最佳的效果。
光明顶阳顶天
326 57
小白学大数据
|
4月前
|
数据采集 Web App开发 JavaScript
Python爬虫如何获取JavaScript动态渲染后的网页内容？
Python爬虫如何获取JavaScript动态渲染后的网页内容？
小白学大数据
373 6
蓝易云
|
5月前
|
编解码 JavaScript 前端开发
【Java进阶】详解JavaScript的BOM（浏览器对象模型）
总的来说，BOM提供了一种方式来与浏览器进行交互。通过BOM，你可以操作窗口、获取URL、操作历史、访问HTML文档、获取浏览器信息和屏幕信息等。虽然BOM并没有正式的标准，但大多数现代浏览器都实现了相似的功能，因此，你可以放心地在你的JavaScript代码中使用BOM。
蓝易云
150 23
大树营养快线
|
11月前
|
前端开发 JavaScript
React学习之——条件渲染
【10月更文挑战第16天】React 中没有像Vue中v-if这种指令。React 中的条件渲染和 JavaScript 中的一样，使用 JavaScript 运算符 if 或者条件运算符去创建元素来表现当前的状态，然后让 React 根据它们来更新 UI。
大树营养快线
115 3
游客mass6jalwg5qm
|
5月前
|
前端开发 JavaScript NoSQL
使用 Node.js、Express 和 React 构建强大的 API
本文详细介绍如何使用 Node.js、Express 和 React 构建强大且动态的 API。从开发环境搭建到集成 React 前端，再到利用 APIPost 高效测试 API，适合各水平开发者。内容涵盖 Node.js 运行时、Express 框架与 React 库的基础知识及协同工作方式，还涉及数据库连接和前后端数据交互。通过实际代码示例，助你快速上手并优化应用性能。
游客mass6jalwg5qm
187 6
奔跑的数据
|
6月前
|
数据采集 前端开发 JavaScript
金融数据分析：解析JavaScript渲染的隐藏表格
本文详解了如何使用Python与Selenium结合代理IP技术，从金融网站（如东方财富网）抓取由JavaScript渲染的隐藏表格数据。内容涵盖环境搭建、代理配置、模拟用户行为、数据解析与分析等关键步骤。通过设置Cookie和User-Agent，突破反爬机制；借助Selenium等待页面渲染，精准定位动态数据。同时，提供了常见错误解决方案及延伸练习，帮助读者掌握金融数据采集的核心技能，为投资决策提供支持。注意规避动态加载、代理验证及元素定位等潜在陷阱，确保数据抓取高效稳定。
奔跑的数据
163 17
蚝油菜花
|
7月前
|
人工智能 自然语言处理 前端开发
Flame：开源AI设计图转代码模型！生成React组件，精准还原UI+动态交互效果
Flame 是一款开源的多模态 AI 模型，能够将 UI 设计图转换为高质量的现代前端代码，支持 React 等主流框架，具备动态交互、组件化开发等功能，显著提升前端开发效率。
蚝油菜花
835 1
蚝油菜花
|
8月前
|
敏捷开发 人工智能 JavaScript
Figma-Low-Code：快速将Figma设计转换为Vue.js应用，支持低代码渲染、数据绑定
Figma-Low-Code 是一个开源项目，能够直接将 Figma 设计转换为 Vue.js 应用程序，减少设计师与开发者之间的交接时间，支持低代码渲染和数据绑定。
蚝油菜花
509 3
Figma-Low-Code：快速将Figma设计转换为Vue.js应用，支持低代码渲染、数据绑定
阿里云开发者
|
8月前
|
人工智能 JavaScript 前端开发
一段 JavaScript 代码，集成网站AI语音助手
根据本教程，只需通过白屏化的界面操作，即可快速构建一个专属的AI智能体。
阿里云开发者
352 4
夏天49597
|
10月前
|
前端开发 JavaScript 测试技术
React 中集成 Chart.js 图表库
本文介绍了如何在 React 项目中集成 Chart.js 创建动态图表，涵盖基础概念、安装步骤、代码示例及常见问题解决方法，帮助开发者轻松实现数据可视化。
夏天49597
292 11