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

相关文章

Python将博客内容html导出为Markdown格式

《Python将博客内容html导出为Markdown格式》Python将博客内容html导出为Markdown格式,通过博客url地址抓取文章,分析并提取出文章标题和内容,将内容构建成html,再转... 目录一、为什么要搞?二、准备如何搞?三、说搞咱就搞!抓取文章提取内容构建html转存markdown

在React中引入Tailwind CSS的完整指南

《在React中引入TailwindCSS的完整指南》在现代前端开发中,使用UI库可以显著提高开发效率,TailwindCSS是一个功能类优先的CSS框架,本文将详细介绍如何在Reac... 目录前言一、Tailwind css 简介二、创建 React 项目使用 Create React App 创建项目

vue使用docxtemplater导出word

《vue使用docxtemplater导出word》docxtemplater是一种邮件合并工具,以编程方式使用并处理条件、循环,并且可以扩展以插入任何内容,下面我们来看看如何使用docxtempl... 目录docxtemplatervue使用docxtemplater导出word安装常用语法 封装导出方

Linux换行符的使用方法详解

《Linux换行符的使用方法详解》本文介绍了Linux中常用的换行符LF及其在文件中的表示,展示了如何使用sed命令替换换行符,并列举了与换行符处理相关的Linux命令,通过代码讲解的非常详细,需要的... 目录简介检测文件中的换行符使用 cat -A 查看换行符使用 od -c 检查字符换行符格式转换将

使用Jackson进行JSON生成与解析的新手指南

《使用Jackson进行JSON生成与解析的新手指南》这篇文章主要为大家详细介绍了如何使用Jackson进行JSON生成与解析处理,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录1. 核心依赖2. 基础用法2.1 对象转 jsON(序列化)2.2 JSON 转对象(反序列化)3.

使用Python实现快速搭建本地HTTP服务器

《使用Python实现快速搭建本地HTTP服务器》:本文主要介绍如何使用Python快速搭建本地HTTP服务器,轻松实现一键HTTP文件共享,同时结合二维码技术,让访问更简单,感兴趣的小伙伴可以了... 目录1. 概述2. 快速搭建 HTTP 文件共享服务2.1 核心思路2.2 代码实现2.3 代码解读3.

Elasticsearch 在 Java 中的使用教程

《Elasticsearch在Java中的使用教程》Elasticsearch是一个分布式搜索和分析引擎,基于ApacheLucene构建,能够实现实时数据的存储、搜索、和分析,它广泛应用于全文... 目录1. Elasticsearch 简介2. 环境准备2.1 安装 Elasticsearch2.2 J

使用C#代码在PDF文档中添加、删除和替换图片

《使用C#代码在PDF文档中添加、删除和替换图片》在当今数字化文档处理场景中,动态操作PDF文档中的图像已成为企业级应用开发的核心需求之一,本文将介绍如何在.NET平台使用C#代码在PDF文档中添加、... 目录引言用C#添加图片到PDF文档用C#删除PDF文档中的图片用C#替换PDF文档中的图片引言在当

Java中List的contains()方法的使用小结

《Java中List的contains()方法的使用小结》List的contains()方法用于检查列表中是否包含指定的元素,借助equals()方法进行判断,下面就来介绍Java中List的c... 目录详细展开1. 方法签名2. 工作原理3. 使用示例4. 注意事项总结结论:List 的 contain

C#使用SQLite进行大数据量高效处理的代码示例

《C#使用SQLite进行大数据量高效处理的代码示例》在软件开发中,高效处理大数据量是一个常见且具有挑战性的任务,SQLite因其零配置、嵌入式、跨平台的特性,成为许多开发者的首选数据库,本文将深入探... 目录前言准备工作数据实体核心技术批量插入:从乌龟到猎豹的蜕变分页查询:加载百万数据异步处理:拒绝界面