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

系列文章

示例项目(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 应用程序!

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/806835.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

实现ElasticSearch搜索自动补全【同附Java代码实现和拼音分词器安装】

文章目录 1、简介2、拼音分词器3、自定义分词器4、自动补全查询5、实现酒店搜索框自动补全5.1、修改酒店映射结构5.2、修改HotelDoc实体5.3、重新导入5.4、自动补全查询的JavaAPI5.5、实现搜索框自动补全 6、资料分享链接 ​&#x1f343;作者介绍&#xff1a;双非本科大三网络…

linux查看网络连接数

目录 netstat top netstat 1.netstat查看当前主机上网络连接信息&#xff0c;端口号&#xff0c;pid,程序名等等 #直接查看 netstat -anp #一般使用的时候&#xff0c;可能要筛选 #比如8080端口是否被占用 netstat -anp | grep 8080 #minio服务占用了那些端口 netstat -anp …

unity数组

数组的定义 动态初始化:在定义数组时只指定数组的长度&#xff0c;由系统自动为元素赋初值的方式。 静态初始化:定义数组的同时就为数组的每个元素赋值 数组的静态初始化有两种方式 1、类型门数组名new 类型[]{元素&#xff0c;元素&#xff0c;…}; 2、类型[数组名{元素&am…

ubuntu20挂载webdav

WebDAV 是个好东西&#xff0c;尤其是配个自己的 NAS 使用&#xff0c;熟悉以后就再也离不开它啦 sudo apt-get update sudo apt-get install davfs2 上下左右键可以切换到“是”选项 2.创建目录挂载点 sudo mkdir /mnt/webdav 3.配置 davfs2 编辑 davfs2.conf 文件以配置 da…

Node.js 的 5 个常见服务器漏洞

Node.js 是一个强大且广泛使用的 JavaScript 运行时环境&#xff0c;用于构建服务器端应用程序。然而&#xff0c;与任何其他软件一样&#xff0c;Node.js 也有自己的一些漏洞&#xff0c;如果处理不当&#xff0c;可能会导致安全问题。请注意&#xff0c;这些漏洞并不是 Node.…

基于springboot的扶贫产品和扶贫物资捐赠系统(含源码+sql+视频导入教程+文档+PPT)

&#x1f449;文末查看项目功能视频演示获取源码sql脚本视频导入教程视频 1 、功能描述 基于springboot的扶贫产品和扶贫物资捐赠系统2拥有管理员和用户角色 管理员&#xff1a;用户管理、扶贫项目管理、物资管理、扶贫产品管理、捐赠管理、资讯管理等 用户&#xff1a;捐赠…

nginx+uWsgi应用部署方式

uWSGI 是一个快速的、纯C语言开发的、自维护的、对开发者友好的 WSGI 服务器&#xff0c;旨在提供专业的 Python web应用发布和开发。可使用 C/C/Objective-C 来为 uWSGI 编写插件。在这里要区分三个概念&#xff1a; WSGI&#xff1a;全称是Web Server Gateway Interface&…

Visual Studio C++ 正确创建项目与更改文件名

1、创建项目 1&#xff09;打开Visual Studio&#xff0c;选择创建新项目。 2&#xff09;创建空项目 3&#xff09;配置新项目&#xff0c;注意不要勾选 " 将解决方案和项目放在同一目录中 " 。并将位置的文件夹设为与解决方案同名&#xff0c;方便管理。项目名称则…

spispi

硬件部分可参考我另一篇文章 http://t.csdnimg.cn/4j3qT 接线图 这是课程的相关接线图&#xff0c;独立看门狗和窗口看门狗都适用本图 独立看门狗部分 一、配置流程 1.开启时钟 在数据手册里面有这么一段解释&#xff0c;就是说如果我们开启了看门狗&#xff0c;那么LSI就…

PTA 2813:画家问题(熄灯问题)

有一个正方形的墙&#xff0c;由NN个正方形的砖组成&#xff0c;其中一些砖是白色的&#xff0c;另外一些砖是黄色的。Bob是个画家&#xff0c;想把全部的砖都涂成黄色。但他的画笔不好使。当他用画笔涂画第(i,j)个位置的砖时&#xff0c; 位置(i−1,j)、 (i1,j)、(i,j−1)、(i…

掌握判断IPv4地址是否正确的方法

在数字通信和互联网领域中&#xff0c;IPv4地址作为标识网络设备的核心元素&#xff0c;其正确性至关重要。一个有效的IPv4地址能够确保设备在网络中的正常通信和交互&#xff0c;而错误的IPv4地址则可能导致连接失败、通信中断甚至网络安全问题。因此&#xff0c;掌握判断IPv4…

SQL注入sqli_labs靶场第二题

解题思路与第一题相同 ?id1 and 11 和?id1 and 12进行测试如果11页面显示正常和原页面一样&#xff0c;并且12页面报错或者页面部分数据显示不正常&#xff0c;那么可以确定此处为数字型注入。 联合查询&#xff1a; 猜解列名数量&#xff1a;3 ?id1 order by 4 判断回显…

防止邮箱发信泄露服务器IP教程

使用QQ邮箱,网易邮箱,189邮箱,新浪邮箱,139邮箱可能会泄露自己的服务器IP。 泄露原理&#xff1a;服务器通过请求登录SMTP邮箱服务器接口&#xff0c;对指定的收件人发送信息。 建议大家使用商业版的邮箱&#xff0c;比如阿里云邮箱发信等 防止邮件发信漏源主要关注的是确保邮件…

机器学习和深度学习--李宏毅 (笔记与个人理解)Day7

Day7 Regression Case study &#xff08;预测宝可梦的cp&#xff09; Regression 可以做什么&#xff1f; 股票预测 自动驾驶 推荐 预测宝可梦的cp&#xff08;能力类似这样的属性把&#xff09; 这里突然想到&#xff0c;是不是可以用洛克王国和赛尔号做事情哈哈 注意&#…

6种xinput1_3.dll丢失的解决办法,并探讨xinput1_3.dll丢失的原因及其属性。

xinput1_3.dll扮演着Visual C运行时库中不可或缺的角色&#xff0c;众多电脑软件都需依赖它以确保正常运行。 当您启动软件时&#xff0c;若遇到xinput1_3.dll无法执行代码的提示&#xff0c;可能会导致软件无法如常启动或运行。本文将向您介绍6种解决方案&#xff0c;并探讨xi…

Java基于微信小程序的乐室预约系统(V2.0),附源码

博主介绍&#xff1a;✌IT徐师兄、7年大厂程序员经历。全网粉丝15W、csdn博客专家、掘金/华为云//InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精彩专栏推荐订阅&#x1f447;&#x1f3…

WEB前端-倒计时练习

<body><div>距离2024年7月3日还有&#xff1a;<br><span id"d">0</span>天<span id"h">0</span>小时<span id"m">0</span>分钟<span id"s">0</span>秒</div>…

文章解读与仿真程序复现思路——电力系统自动化EI\CSCD\北大核心《新型电力系统多阶段输-储协同分布鲁棒规划》

本专栏栏目提供文章与程序复现思路&#xff0c;具体已有的论文与论文源程序可翻阅本博主免费的专栏栏目《论文与完整程序》 论文与完整源程序_电网论文源程序的博客-CSDN博客https://blog.csdn.net/liang674027206/category_12531414.html 电网论文源程序-CSDN博客电网论文源…

【PHP系统学习】——Laravel框架数据库的连接以及数据库的增删改查的详细教程

&#x1f468;‍&#x1f4bb;个人主页&#xff1a;开发者-曼亿点 &#x1f468;‍&#x1f4bb; hallo 欢迎 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! &#x1f468;‍&#x1f4bb; 本文由 曼亿点 原创 &#x1f468;‍&#x1f4bb; 收录于专栏&#xff1a…

蓝桥杯——考勤刷卡

题目 小蓝负责一个公司的考勤系统,他每天都需要根据员工刷卡的情况来确定 每个员工是否到岗。 当员工刷卡时,会在后台留下一条记录,包括刷卡的时间和员工编号,只 要在一天中员工刷过一次卡,就认为他到岗了。 现在小蓝导出了一天中所有员工的刷卡记录,请将所有到岗员工的员工编…