React 使用 three.js 加载 gltf 3D模型 | three.js 入门

2024-04-14 23:36

本文主要是介绍React 使用 three.js 加载 gltf 3D模型 | three.js 入门,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

系列文章

  1. React 使用 three.js 加载 gltf 3D模型 | three.js 入门
  2. React + three.js 3D模型骨骼绑定
  3. React + three.js 3D模型面部表情控制
  4. React + three.js 实现人脸动捕与3D模型表情同步
  5. 结合 react-webcam、three.js 与 electron 实现桌面人脸动捕应用

示例项目(gitcode):https://gitcode.com/qq_41456316/simple-react-three-demo

文章目录

  • 系列文章
  • 前言
  • 一、three.js是什么?
  • 二、使用 React 和 three.js 加载 glTF 3D 模型的步骤
    • 步骤 1:创建 React 应用
    • 步骤 2:安装 three.js
    • 步骤 3:准备 glTF 3D 模型文件
    • 步骤 4:创建组件加载 3D 模型
    • 步骤 5:在应用中使用组件
    • 步骤 6:运行效果
    • 总结
      • 程序预览


前言

在当今的软件开发中,3D 技术已经成为了一个备受关注的领域。无论是游戏、虚拟现实还是增强现实,3D 技术都扮演着至关重要的角色。而在 Web 开发领域,随着 WebGL 和 WebGPU 技术的发展,通过浏览器来展示和交互 3D 模型也变得越来越普遍。在这篇博文中,我们将探讨如何在 React 项目中使用 three.js 加载 glTF 格式的 3D 模型,并为您提供 three.js 的入门指南。


一、three.js是什么?

React:React 是一个由 Facebook 推出的用于构建用户界面的 JavaScript 库。它以其简单性、灵活性和高效性而闻名,被广泛应用于 Web 开发中。
three.js:three.js 是一个基于 WebGL 的 JavaScript 3D 库,提供了在浏览器中创建和展示 3D 场景的丰富功能和 API。
glTF:glTF (GL Transmission Format) 是一种用于将 3D 模型和场景进行传输的开放标准格式,旨在提供高效的文件大小和快速加载速度。

二、使用 React 和 three.js 加载 glTF 3D 模型的步骤

步骤 1:创建 React 应用

首先,确保您已经安装了 Node.js 和 npm。然后,使用 Create React App 来创建一个新的 React 应用:

npx create-react-app simple-react-three-demo
cd simple-react-three-demo

步骤 2:安装 three.js

在 React 应用的根目录下,通过 npm 安装 three.js:

npm install three

步骤 3:准备 glTF 3D 模型文件

您可以在网上找到许多免费的 glTF 3D 模型资源。确保您已经下载了您想要使用的 glTF 模型,并将其放置在您的 React 项目的 public 文件夹中。示例中使用模型文件的下载地址如下

https://sketchfab.com/3d-models/just-a-girl-b2359160a4f54e76b5ae427a55d9594d

步骤 4:创建组件加载 3D 模型

在src文件夹创建components文件夹,创建文件ThreeContainer.js,在文件中创建一个ThreeContainer组件来加载和展示 glTF 3D 模型:

import React, { useEffect, useRef } from "react";
import * as THREE from "three";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
// import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";function ThreeContainer({ style }) {const defaultStyle = {height: "100vh",width: "100vw",backgroundColor: "transparent",};const isContainerRunning = useRef(false);const containerRef = useRef(null);useEffect(() => {if (!isContainerRunning.current && containerRef.current) {isContainerRunning.current = true;const containerWidth = containerRef.current.offsetWidth;const containerHeight = containerRef.current.offsetHeight;const loader = new GLTFLoader();const scene = new THREE.Scene();const camera = new THREE.PerspectiveCamera(75, // 视野角度containerWidth / containerHeight, //宽高比0.1, // 近裁剪面1000 // 远裁剪面);// 生成渲染器const renderer = new THREE.WebGLRenderer({ alpha: true });renderer.setSize(containerWidth * 0.9995, containerHeight * 0.9995);containerRef.current.appendChild(renderer.domElement);// const controls = new OrbitControls(camera, renderer.domElement);loadModel(loader, scene);animate(isContainerRunning, camera, renderer, scene);function animate(runningFlag, camera, renderer, scene) {if (runningFlag.current) {requestAnimationFrame(() =>animate(runningFlag, camera, renderer, scene));const radius = 140;const angle = Date.now() * 0.0005;const x = Math.cos(angle) * radius;const z = Math.sin(angle) * radius;camera.position.set(x, 70, z);camera.lookAt(0, 50, 0);renderer.render(scene, camera);}}function loadModel(loader, scene) {loader.load("just_a_girl/scene.gltf",function (gltf) {scene.add(gltf.scene);},// called while loading is progressingfunction (xhr) {console.log((xhr.loaded / xhr.total) * 100 + "% loaded");},// called when loading has errorsfunction (error) {console.log("An error happened");});}}}, []);return (<divref={containerRef}id="container"style={{ ...defaultStyle, ...style }}/>);
}export default ThreeContainer;

步骤 5:在应用中使用组件

在您的应用中使用这个组件来展示 3D 模型,修改src/App.js内容如下:

import "./App.css";
import ThreeContainer from "./components/ThreeContainer";function App() {return (<div><ThreeContainer /></div>);
}export default App;

步骤 6:运行效果

npm start运行项目,效果如下
请添加图片描述

总结

通过本文,我们学习了如何在 React 应用中使用 three.js 加载 glTF 3D 模型。这是一个简单而强大的方法,使您能够将引人入胜的 3D 内容整合到您的 Web 应用中,为用户提供更丰富、更交互的体验。希望这篇指南能够帮助您开始使用 three.js 和 React 来创建令人惊叹的 3D Web 应用程序!

以上就是本次博文的全部内容,希望能对您有所帮助。如果您对任何内容有疑问或需要进一步了解,请随时在评论区留言,我会尽力为您解答。感谢您的阅读!

程序预览

这篇关于React 使用 three.js 加载 gltf 3D模型 | three.js 入门的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/904332

相关文章

解决Maven项目idea找不到本地仓库jar包问题以及使用mvn install:install-file

《解决Maven项目idea找不到本地仓库jar包问题以及使用mvninstall:install-file》:本文主要介绍解决Maven项目idea找不到本地仓库jar包问题以及使用mvnin... 目录Maven项目idea找不到本地仓库jar包以及使用mvn install:install-file基

Python使用getopt处理命令行参数示例解析(最佳实践)

《Python使用getopt处理命令行参数示例解析(最佳实践)》getopt模块是Python标准库中一个简单但强大的命令行参数处理工具,它特别适合那些需要快速实现基本命令行参数解析的场景,或者需要... 目录为什么需要处理命令行参数?getopt模块基础实际应用示例与其他参数处理方式的比较常见问http

C 语言中enum枚举的定义和使用小结

《C语言中enum枚举的定义和使用小结》在C语言里,enum(枚举)是一种用户自定义的数据类型,它能够让你创建一组具名的整数常量,下面我会从定义、使用、特性等方面详细介绍enum,感兴趣的朋友一起看... 目录1、引言2、基本定义3、定义枚举变量4、自定义枚举常量的值5、枚举与switch语句结合使用6、枚

使用Python从PPT文档中提取图片和图片信息(如坐标、宽度和高度等)

《使用Python从PPT文档中提取图片和图片信息(如坐标、宽度和高度等)》PPT是一种高效的信息展示工具,广泛应用于教育、商务和设计等多个领域,PPT文档中常常包含丰富的图片内容,这些图片不仅提升了... 目录一、引言二、环境与工具三、python 提取PPT背景图片3.1 提取幻灯片背景图片3.2 提取

使用Python实现图像LBP特征提取的操作方法

《使用Python实现图像LBP特征提取的操作方法》LBP特征叫做局部二值模式,常用于纹理特征提取,并在纹理分类中具有较强的区分能力,本文给大家介绍了如何使用Python实现图像LBP特征提取的操作方... 目录一、LBP特征介绍二、LBP特征描述三、一些改进版本的LBP1.圆形LBP算子2.旋转不变的LB

Maven的使用和配置国内源的保姆级教程

《Maven的使用和配置国内源的保姆级教程》Maven是⼀个项目管理工具,基于POM(ProjectObjectModel,项目对象模型)的概念,Maven可以通过一小段描述信息来管理项目的构建,报告... 目录1. 什么是Maven?2.创建⼀个Maven项目3.Maven 核心功能4.使用Maven H

Python中__init__方法使用的深度解析

《Python中__init__方法使用的深度解析》在Python的面向对象编程(OOP)体系中,__init__方法如同建造房屋时的奠基仪式——它定义了对象诞生时的初始状态,下面我们就来深入了解下_... 目录一、__init__的基因图谱二、初始化过程的魔法时刻继承链中的初始化顺序self参数的奥秘默认

SpringBoot使用GZIP压缩反回数据问题

《SpringBoot使用GZIP压缩反回数据问题》:本文主要介绍SpringBoot使用GZIP压缩反回数据问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录SpringBoot使用GZIP压缩反回数据1、初识gzip2、gzip是什么,可以干什么?3、Spr

HTML5中的Microdata与历史记录管理详解

《HTML5中的Microdata与历史记录管理详解》Microdata作为HTML5新增的一个特性,它允许开发者在HTML文档中添加更多的语义信息,以便于搜索引擎和浏览器更好地理解页面内容,本文将探... 目录html5中的Mijscrodata与历史记录管理背景简介html5中的Microdata使用M

html5的响应式布局的方法示例详解

《html5的响应式布局的方法示例详解》:本文主要介绍了HTML5中使用媒体查询和Flexbox进行响应式布局的方法,简要介绍了CSSGrid布局的基础知识和如何实现自动换行的网格布局,详细内容请阅读本文,希望能对你有所帮助... 一 使用媒体查询响应式布局        使用的参数@media这是常用的