系列文章
- React 使用 three.js 加载 gltf 3D模型 | three.js 入门
- React + three.js 3D模型骨骼绑定
- React + three.js 3D模型面部表情控制
- React + three.js 实现人脸动捕与3D模型表情同步
- 结合 react-webcam、three.js 与 electron 实现桌面人脸动捕应用
示例项目(gitcode)：https://gitcode.com/qq_41456316/simple-react-three-demo
文章目录
前言
在当今的软件开发中，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 文件夹中。示例中使用模型文件的下载地址如下
步骤 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 progressing
function (xhr) {
console.log((xhr.loaded / xhr.total) * 100 + "% loaded");
},
// called when loading has errors
function (error) {
console.log("An error happened");
}
);
}
}
}, []);
return (
<div
ref={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 应用程序！
以上就是本次博文的全部内容，希望能对您有所帮助。如果您对任何内容有疑问或需要进一步了解，请随时在评论区留言，我会尽力为您解答。感谢您的阅读！
程序预览
