--- theme: channing-cyan highlight: solarized-light --- ## 前言根据WMS系统基础仓库数据以及RCS调度坐标系统，生成3D可视化仓库地图，能够实时监控仓库库位坐标、调度任务状态、车辆位置等信息。社区对于threejs的实战案例太少，于是，花了一个月的时间，手撕了这个需求。此篇重点不会对threejs做深入讲解，毕竟我也是刚上车不到一个月的菜鸟。 ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/077a38f6efc84f998e0d22b60521a265~tplv-k3u1fbpfcp-watermark.image#?w=190\&h=160\&s=23148\&e=png\&b=fdfdfd) 但是，我会将重点放在项目搭建的思路、设计技巧上，轻松带大家快速的玩转three.js。后期如果有比较多感兴趣的朋友，再出专文做具体拆解讲解 ✿✿ヽ(°▽°)ノ✿ 开源地址：如果有帮助，请给个star吧～ ## 项目介绍先看效果吧\~ gif图大小有限，长视频可访问: [3D数字孪生-仓库](https://www.bilibili.com/video/BV1Dk4y1n7Vi/?share_source=copy_web\&vd_source=7a8fbd9ad91326e19ebaebb4c6766dd6) ![20230616110946\_rec\_.gif](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c8264497242542a09db1edd5571aa9f9~tplv-k3u1fbpfcp-watermark.image#?w=1916\&h=910\&s=15586249\&e=gif\&f=175\&b=d2d7d9) 除了小车模型，所有可见的场景，都是基于代码实现，这也为新手带来更多探索和实战案例，后期再考虑使用blander创建场景和模型。那么，进入正题吧！ ## 功能介绍以下是根据项目目标拆解的关键动作，目的是解释我如何进行组件拆解，以便于进行功能组件的详细拆分和设计。 1. 场景渲染灯光渲染、相机渲染、天空盒、建筑物、树... 2. 仓库渲染仓库模型渲染仓库基础元件：货架、区域、巷道、货位...、车辆模型渲染、任务动画。 ## 技术准备在开始之前，你得有threejs基本api的了解，特别是场景、灯光、相机、控制器、几何体、材质和纹理。基本上你在准备设计一个东西的时候，自然而然都会去看和了解，所以，没必要刻意的去刷它的api。在你不知道自己要干什么之前，你去看它的文档，是很劝退的。因为里面涉及到很多与你以往工作毫无相关的知识（对于新手）。 ### 技术架构接下来才是发力点，希望你能跟得上 😄，如果对于技术层不是特别感兴趣的朋友，可以跳过这个章节。 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/585e0b30d09541dfa82b3dbf9a22175b~tplv-k3u1fbpfcp-watermark.image#?w=1514\&h=1326\&s=158468\&e=png\&b=ffffff) 关于技术架构，不会在这个篇幅展开，粗略的说一下吧。项目基于 `turborepo` 与 `pnpm` 搭建，采用`nomorepo`管理策略的一套技术方案，感兴趣的小伙伴可以参考：[基于 pnpm + changesets 的 monorepo 最佳实践](https://juejin.cn/post/7181409989670961207) *** **重点**\*：接下来，只针对组件包中，`three`子包做讲解 *** ### three子包设计在设计3D场景中，除了`threejs`本身的依赖包外，还使用到的依赖包有： `react-three/filber`、`react-three/drei`。这些额外的依赖包有什么好处呢？它是利用了React的虚拟DOM和组件化开发模式，将Three.js的渲染过程封装为React组件，它可以像react-echart一样，申明式的来构建我们的3D组件结构。这样，我们创建一个3D的场景实例，就可以是这样： ```tsx import { Canvas } from '@react-three/fiber'; import BaseSence from './components/BaseSence'; import Factory from './components/Factory'; import Gizmo from './components/Help'; // 创建Canva组件 const Canva = (props) => { return ( <> {/* */}

); }; export default Canva; ``` 是不是简单极了～，当然，更简单的还在后面。 three包中的目录结构 ```bash ├─three | ├─.eslintrc.js | ├─index.ts | ├─package.json | ├─Canva | | ├─index.tsx | | ├─components | | | ├─Help.tsx | | | ├─index.ts | | | ├─Tools | | | | └index.tsx | | | ├─Factory | | | | ├─index.tsx | | | | ├─data | | | | | ├─animation.ts | | | | | ├─area.ts | | | | | ├─conveyerBelt.ts | | | | | ├─goods.ts | | | | | ├─shelf.ts | | | | | ├─stereoscopicShelf.ts | | | | | └tunnel.ts | | | | ├─components | | | | | ├─Ground.tsx | | | | | ├─WarehouseMap.tsx | | | | | ├─area.tsx | | | | | ├─conveyerBelt.tsx | | | | | ├─forkTruck.tsx | | | | | ├─fourWayCar.tsx | | | | | ├─goods.tsx | | | | | ├─house.tsx | | | | | ├─lifter.tsx | | | | | ├─mxwCar.tsx | | | | | ├─shelf.tsx | | | | | ├─stereoscopicShelf.tsx | | | | | ├─stereoscopicTrack.tsx | | | | | ├─text.tsx | | | | | ├─tunnel.tsx | | | | | ├─annotation | | | | | | ├─index.less | | | | | | └index.tsx | | | ├─BaseSence | | | | ├─index.tsx | | | | ├─components | | | | | ├─Buidings.tsx | | | | | ├─Camera.tsx | | | | | ├─CtrlPointerLock.tsx | | | | | ├─Grid.tsx | | | | | ├─Ground.tsx | | | | | ├─Lights.tsx | | | | | ├─Sky.tsx | | | | | ├─others | | | | | | ├─Tree.tsx | | | | | | ├─dance.tsx | | | | | | └treeGroup.tsx ``` 组件分层比较多，下面我用思维导图介绍下它的结构： ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ddc27bf71a0c4d678d47d4440631bc5a~tplv-k3u1fbpfcp-watermark.image#?w=2680\&h=1074\&s=200999\&e=png\&b=ffffff) 那么接下来，我将细化的展示，每个核心组件，它的作用。如果Camera=>index.tsx组件中，我们将场景中所有组件去除，它是这样o(*￣︶￣*)o ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/10e480906d4b4e26ab9491c0981cc94c~tplv-k3u1fbpfcp-watermark.image#?w=1918\&h=910\&s=35266\&e=png\&b=000000) ```tsx import { Canvas } from '@react-three/fiber'; import React, { useState, useContext } from 'react'; import BaseSence from './components/BaseSence'; import Factory from './components/Factory'; import Gizmo from './components/Help'; import { ThreeMobx, ThreeStoreContext, observer } from 'mobx-threejs-store'; import Tools from './components/Tools'; // 创建Canva组件 const Canva = (props) => { return ( <> {/* */}

); }; export default Canva; ``` 是的没错，你看到的只是一块黑屏，因为你只是声明了一个空间，里面什么都没有。接下来，我们尝试吧 Gizmo 组件打开，会发生什么呢？ ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3b8ce8609bed40be8f25fb00b32ad1e6~tplv-k3u1fbpfcp-watermark.image#?w=1907\&h=898\&s=38599\&e=png\&b=020202) ```tsx {/* 帮助类 */} - {/* */} + ``` 这时候，在我们的页面右下方，就会出现一个坐标转换器啦。到此，说明我们对3D的整个场景初始化是成功的，接下来，我们试着在场景中添加灯光与辅助线。 ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/98c2a405711d4314b40c176d9c7fb8bb~tplv-k3u1fbpfcp-watermark.image#?w=1919\&h=907\&s=80696\&e=png\&b=020202) 同样，我们在Canvas=>index.tsx中打开如下代码： ```tsx {/* 场景类 */} - {/* */} + ``` 在BaseSence=>index.tsx文件中，我们打开灯光与辅助线。 ```tsx // 基础场景 import React, {useContext} from 'react'; import Camera from './components/Camera'; import GridModule from './components/Grid'; import Lights from './components/Lights'; import SkyBox from './components/Sky'; import Man from './components/others/dance'; import TreeGroup from './components/others/treeGroup'; import Buildings from './components/Buidings'; import { ThreeStoreContext, observer } from 'mobx-threejs-store'; // 创建Canva组件 const BaseSence = () => { const threeStore = useContext(ThreeStoreContext); return ( {/* */} {/* */} {/* 其他 */} {/* */} {/* 建筑 */} {/* */} {/* 树 */} {/* */} ); }; export default observer(BaseSence); ``` 到此为止，我们在场景里面，添加了坐标转换器、辅助线、与灯光。当然，跟原生 `THREEJS`写法不同的是，不用再显现的初始化我们的`WebGLRenderer``和PerspectiveCamera`，这些，在我们引用Canvas组件时，就默认帮我们创建了。当然，在`filber`的`Canvas`组件中，我们也可以自己扩展覆盖它的默认属性。比如，接下来，我就会自己创建一个相机以及相机控制器，来切换我们的场景控制。上面的场景，并没有办法自由的切换场景相机，因为默认是没有帮我们初始化相机的控制器的。我们打开BaseSence=>index.tsx文件中，Camera组件： ```tsx - {/* */} + ``` ![20230616103608\_rec\_.gif](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8e705caa400644188e0db93c97230eeb~tplv-k3u1fbpfcp-watermark.image#?w=1916\&h=910\&s=1137094\&e=gif\&f=59\&b=020202) 这时候，我们的场景就可以动起来啦 ✿✿ヽ(°▽°)ノ✿ 看下camera组件中的代码： ```tsx // 添加场景相机 import { CameraControls, FirstPersonControls, MapControls, } from '@react-three/drei'; import React, { useContext, useEffect } from 'react'; import { observer, ThreeStoreContext } from 'mobx-threejs-store'; const Camera = (props: any) => { const mobxStore = useContext(ThreeStoreContext); const flyCtrl = () => { return ( {/* */} ); }; const ctrl = () => { return ( {/* 相机控制器 */} ); }; return <>{mobxStore.threeStore.cameraCtrls.choiceCtrls === '1' ? ctrl() : flyCtrl()}; }; export default observer(Camera); ``` 是不是比你预想的还要简单\~ 里面做了个切换的控制，因为在外层，我们设置了一个开关，控制不同的相机控制效果。用于切换`CameraControls`与`FirstPersonControls` 接下来，我们在场景中添加天空盒。与上面的步骤相同，打开 BaseSence=>index.tsx ```tsx - {/* */} + ``` ![20230616104847\_rec\_.gif](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/aa007feedafd4e32b30bc17e1ddadfb4~tplv-k3u1fbpfcp-watermark.image#?w=1916\&h=910\&s=7341572\&e=gif\&f=86\&b=dbe7ee) ```tsx // BaseSence => components => Sky.tsx import { Sky } from '@react-three/drei'; import React from 'react'; const SkyBox = (props) => { return ( ); }; export default SkyBox; ``` (*^▽^*)，一切，似乎都没你想象的那么难，对吧！其它的都是同理，想要什么，就添加什么，最重要的是，在设计初期，得很清晰的划分好自己的思路和结构，在玩`threejs`的过程中，框架与思路搭建，就显现的更明显，有利于我们更好的管理模块的职责和控制。我的建议是，搭好框架，生产零件，组装，美化再加工，像极了在工地建的框架楼！！！ *** 至此，我们已经搭建好了基础的仓库所需的环境，在建造工厂的过程中，已经迈出了一大步。 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a44939e702f24006ac8e2db7ff6bbd42~tplv-k3u1fbpfcp-watermark.image#?w=474\&h=474\&s=345444\&e=png\&b=e9d2c4) ## 后续规划 * [3D数字孪生 - Three.js 项目介绍与基础环境搭建（一）](https://juejin.cn/post/7244894506305536057 "https://juejin.cn/post/7244894506305536057") * [3D数字孪生 - Three.js 项目实战之场景光源（二）](https://juejin.cn/post/7246316652048269373 "https://juejin.cn/post/7246316652048269373") * [3D数字孪生 - Three.js 项目实战之场景材质（三）](https://juejin.cn/post/7246657502842945597 "https://juejin.cn/post/7246657502842945597") * [3D数字孪生 - Three.js 项目实战之相机（四）](https://juejin.cn/post/7248545082130169893 "https://juejin.cn/post/7248545082130169893") * [3D数字孪生 - Three.js 项目实战之相机控制器（五）](https://juejin.cn/post/7250318500882432057 "https://juejin.cn/post/7250318500882432057") * [3D数字孪生 - 智能仓储管理平台-开源啦💐](https://juejin.cn/post/7303048156967026714)