【Threejs】怎么在React里用Threejs写代码？

站长

2023年09月04日 18:31 · 阅读数 39

前言

在之前我们已经尝试使用原生的方式创建一个场景，添加物体，设置相机等，每一步都需要自己考虑，很繁琐，在这个工具满天飞的时代，怎么能没有threejs配合的工具呢，这次我们就用 react-three/drei + react-three/fiber + leva 来尝试一下构建项目。下面的代码为片段式，如果有哪个地方不是很清晰，可以留言或者私信，我看到会尽快补充上。

前期技术准备

在开始之前，假设你已经有了对threejs基本api的了解，包含但不限于 场景、灯光、相机、控制器、几何体、材质和纹理等。另外就是：react 的基础，当前项目是以react 框架为依托来完成的，如果前面的两项都还没有准备好，那么可能后面的内容看起来有些吃力（大佬除外 🐶）。

当前项目用到的技术：

react
threejs
react-router-demo
react-three/drei
react-three/fiber
leva

我们上一节也通过一些方式拿到了一些模型，在本次文章中，我们就尝试拿这些模型来创建一下，看看使用工具是否能真的减少我们的工作量，以及有哪些好玩的方式。下面就先介绍一下项目里用到的几个工具：

`Three.js`扩展库: `react-three/drei`

react-three/drei 是一个用于在 React 应用中使用 Three.js 库的扩展库。Three.js 是一个用于在 Web 上创建和展示 3D 图形的 JavaScript 库，它提供了各种功能，包括创建 3D 场景、渲染器、灯光、相机、物体和材质等。

react-three/drei 提供了一系列用于简化在 React 中使用 Three.js 的组件和工具。它包含了很多实用的组件，如模型加载器、相机控制器、动画组件、环境贴图和阴影组件等，使开发者可以更轻松地在 React 项目中创建和管理 Three.js 3D 场景。

下面几个是比较常用的方法：

useFBX 获取FBX格式模型里的详细细节，包括名称、骨骼、定位、旋转角度等

const skinfbx = useFBX(`animations/${skin}.fbx`);

useGLTF 获取GLB或者GLTF类型的模型

const { nodes, materials } = useGLTF(`models/${skin}.glb`);

useAnimations 获取到模型自带的动画信息

const { actions } = useAnimations([...skinfbx.animations], group);
...
// 执行动画
actions['name'].reset().play();

// 停止动画
actions['name'].reset().stop();

Threejs 快速创建场景：react-three/fiber:

它是一个由 React 团队为了在 React 应用中使用 Three.js 而开发的实验性项目。它通过将 Three.js 的场景、摄像机和渲染器与 React 的组件模型结合起来，提供了一种声明式、可组合的方式来创建和控制 Three.js 的场景和对象。可以将 Three.js 的组件视为 React 组件，并使用 React 的生命周期、状态和更新机制来控制场景中的对象和动画。文档地址

快速创建一个场景：

 <Canvas shadows camera={{ position: [0, 2, 5], fov: 40 }}></Canvas>

当前我对于这个项目的探索的还不够深入，用到的方法也比较少，后面如果有机会，再深入研究。

`GUI` 交互式的控制面板：`leva`