谁能帮我做网站,百度推广登录平台怎么收费,做公司网站用什么系统,雅安做网站系列文章
示例项目(gitcode)#xff1a;https://gitcode.com/qq_41456316/simple-react-three-demo 文章目录 系列文章前言一、three.js是什么#xff1f;二、使用 React 和 three.js 加载 glTF 3D 模型的步骤步骤 1#xff1a;创建 React 应用步骤 2#xff1a;安装 thre…系列文章
示例项目(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是什么
ReactReact 是一个由 Facebook 推出的用于构建用户界面的 JavaScript 库。它以其简单性、灵活性和高效性而闻名被广泛应用于 Web 开发中。 three.jsthree.js 是一个基于 WebGL 的 JavaScript 3D 库提供了在浏览器中创建和展示 3D 场景的丰富功能和 API。 glTFglTF (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}idcontainerstyle{{ ...defaultStyle, ...style }}/);
}export default ThreeContainer;
步骤 5在应用中使用组件
在您的应用中使用这个组件来展示 3D 模型修改src/App.js内容如下
import ./App.css;
import ThreeContainer from ./components/ThreeContainer;function App() {return (divThreeContainer //div);
}export default App;
步骤 6运行效果
npm start运行项目效果如下
总结
通过本文我们学习了如何在 React 应用中使用 three.js 加载 glTF 3D 模型。这是一个简单而强大的方法使您能够将引人入胜的 3D 内容整合到您的 Web 应用中为用户提供更丰富、更交互的体验。希望这篇指南能够帮助您开始使用 three.js 和 React 来创建令人惊叹的 3D Web 应用程序
以上就是本次博文的全部内容希望能对您有所帮助。如果您对任何内容有疑问或需要进一步了解请随时在评论区留言我会尽力为您解答。感谢您的阅读
