Baker的博客

昨天看到一个网站是2维的柱形图随着音乐节奏起伏，我突然想到二维形状可以起伏，三维应该也可以，最终原理应该都是将音乐频谱分解为数据，通过数据的切换不断地改变图形的形状来实现，因为找了分析音乐频谱的源码，解析完，再通过threejs的动画实现了3D场景下的模型随着音乐的节奏而变化，下面做详细步骤的说明：这只是做...

之前有讲过如何制作管道效果，使用了TubeGeometry对象，先通过多个点绘制曲线，通过这个曲线使用TubeGeometry绘制管道，不过要在管道中绘制水流效果就需要有动态的效果，动态效果这里通过贴图的位移来实现；下面开始详细的绘制步骤：首先新建场景，相机，灯光，渲染器等登录后复制 initScene(){ ...

上节我们已经通过绘制两条长方体和多个圆柱体成功绘制出传送带，今天根据之前的传送带做个简单的工厂车间生产的demo，然后再不断完善它。 首先分析下工厂生产有哪些部分组成，工厂内是产线，产线需要有设备，传送带以及生产的产品。但是为了避开建模的部分，设备可以先直接用一个长方体代替，传送带根据上节内容已经实现了，生产...

上一节已经把产线的基本demo搭建完成，这节先不美化产线，先搭建个车间用来放置这个产线，后期再一起想办法做美化，绘制车间，我们要先绘制地面。地面实际上就是一个很薄的长方体，长方体的长和宽就是车间的面积，高度设置为1，再加一点颜色，作为地面，这里用了一个蓝色的图片作为贴图，如果找不到合适的，也可以把贴图的去掉，用设置的颜...

上节课绘制了车间模型，但是车间里只有一条产线，这节把产线多铺设几条，放满整个车间，但是随着放满车间，也就意味着要创建更多的模型，而更多的模型会导致浏览器卡顿，所以这个节讲如何做模型合并，模型合并不是简单的创建group，把模型放到group中，这样只是把模型分组，但还不是给模型合并，模型合并是把多个模型合...

上节解决了模型多会存在的模型卡顿问题，用了模型整合来结局，这节继续这个模型的完善，很多时候可以在产线看到地上会画警戒线，防止工作人员越界以被机器伤到，所以会在机器的危险区域用警戒线框起来，那么这节做绘制警戒线的功能。 首先我们需要先针对一个产线做警戒线，然后再加到循环中给五个产线都加...

这节算是给这个车间场景收个尾，等了几天并没有人发设备模型给我，只能自己找了一个凑合用了。加载模型之前，首先要把货架上的料箱合并，以防加载模型之后因模型数量多出现卡顿，方法和之前介绍的合并传送带方法相同，代码如下：登录后复制 //初始化料箱 initCube(){ let cubeList = []...

上节利用了A*实现了基础的路径规划，这节把整个功能完善好，A*算法一方面是基于当前点找到可以到达的点，计算从出发点到此点，以及此点到目的地的总成本，比较出最小的那个，再用最小成本的点继续找到它可以到达的点，直到目的地，同时会创建两个集合，一个叫open集合，一个叫close集合，open是用于存放到达过且没有继续探索的点，...

之前有做过关于Threejs基础功能的一些演示，包括绘制简单的模型，以及给这个模型添加一些动画，但是这些都还是停留在绘制的阶段，动画也是匀速移动，而非模仿自然界中的重力加速度以及阻力等效果实现的。今天讲一个可以模拟自然界中一些物理属性的组件，这里引入一个新的组件Cannon，这是一个开源3D物理引擎，可以用来开发和模拟真实...

ThreeJs绘制手串，先分析手串的结构，一根绳子，多个珠子，因此需要封装一个绘制珠子的方法并循环调用绘制出多个珠子，再封装一个绘制绳子的方法，绘制一根圆形闭合的绳子。另外为了方便动态调整绳子，可以定义变量，包括珠子个数，绳子直径，珠子的直径。首先需要绘制ThreeJs的场景，之前的章节都有，就不做赘述，初始化场景，相机，灯光，渲染器等，然后开始绘制绳子，为了方便后续修改，我们把绳子的参数，包括绳子的半径，绳子上珠子的个数，颜色等作为一个变量的属性统一定义。此时就得到一个基础的手串了。

既然Line不行了，那就换一种方式，接下来用Line2来实现线条的宽度调整，Line2的使用需要单独引入，且有自己对应的geometryh和material，它是对Line的一个扩展和优化，可以绘制出更平滑的线条，因此先要在头部引入。渲染器的限制，无论如何设置该值，线宽始终为1。那么说明多数平台上这个参数都是不生效的，但是查找了官方文档后确实是有这个属性的。但是紧接着下一行，由于。其次修改代码为Line2的方式。

TetrahedronGeometry（二十面体几何）是 Three.js 中的一个几何类，用于构建二十面体的几何形状。

上一章节实现了圆柱体的绘制，这节来绘制球体，球体就是圆形旋转得到，如上文一样，先要创建出基础的组件，包括场景，相机，灯光，渲染器。用于创建球体几何形状。球体是一种在三维场景中非常常见的基本形状，可用于表示天体、球体模型等各种对象。可以方便地创建不同大小和精度的球体。在 Three.js 中，

Threejs可以方便地创建各种不同尺寸和外观的圆柱体，可应用于构建机械模型、建筑结构、柱状物体等场景。是用于创建圆柱体几何形状的类。圆柱体在三维图形中是一种常见的基本形状。

上一章节实现了胶囊体的绘制，这节来绘制圆锥体，圆锥体就是三角形旋转获得的，如上文一样，先要创建出基础的组件，包括场景，相机，灯光，渲染器。（圆锥几何体）用于创建圆锥形状的三维几何体。

上一章节实现了圆环结的绘制，这节来绘制胶囊体，胶囊体就是胶囊的形状，上下是一个半球，中间是一个圆柱体，如上文一样，先要创建出基础的组件，包括场景，相机，灯光，渲染器。胶囊形状由一个圆柱体和两个半球组成。它在三维空间中呈现出一种流畅且具有一定实用性的形状。

上一章节实现了圆环的绘制，这节来绘制一个和圆环很相近的立体模型：圆环结，圆环结在真实数字孪生场景应用不多，但会常用于AR宣传，广告，建筑设计等领域，使得看起来更有立体和科技感，如上文一样，先要创建出基础的组件，包括场景，相机，灯光，渲染器。圆环结是由多个相互交织的圆环组成的复杂 3D 结构。我们可以将其看作是多个圆环在特定的位置和角度上进行组合和缠绕而成。Three.js 中的。类专门用于创建圆环结。它接受一些参数来控制圆环结的形状和大小。

ThreeJs除了创建基本的长方体，球形，圆柱等几何体，也可以创建一些特殊的几何体，比如圆环，多边体，这节就来讲怎么用Threejs绘制出圆环。首先依然是要创建出基础的组件，包括场景，相机，灯光，渲染器。radius - 圆环的半径，从圆环的中心到管的中心。中，我们可以通过指定大圆半径、小圆半径、大圆的分段数（这里还加上了鼠标控制，方便创建圆环之后更直观的观察它。其原理是通过数学公式来定义圆环的形状。arc — 中心角。默认为 Math.PI * 2。圆环可以看作是由一个大圆（半径为。）来控制圆环的形状。

然后我们用自己的代码实现，首先需要创建一个场景，包括场景，灯光，相机，渲染器，等，注意这里要添加相机的，因为CubeCamera并不是作为传统相机使用的，所以传统相机还是需要添加的，然后就可以创建物体了，官网例子是一个球体，这里我也用球体，创建球体后，将刚才的WebGLCubeRenderTarget中的贴图属性作为球体的材质贴图，然后将球体添加到场景中，

然后创建RectAreaLight，为了更直观的查看灯光的位置，在添加上RectAreaLightHelper，这是一个专门描绘大小和形状的辅助工具。最终效果如下，上方的白色是窗户，下面的盒子是被照射到的，可以看到盒子面对窗户的方向是亮的，背对着的是黑色，和上面图效果有差距，但是原理是这样子。这部分之前已经有很多，不再赘述了，然后我们需要在场景中放置一个box，用来测试灯光的效果，应该经常看到这样的图片，昏暗的屋里，阳光通过窗户照射进来，将照射到的地方照亮，没有照到的地方依然昏暗，

因为Threejs不提供方形截面的管道，所以使用的是绘制截面，然后拉伸的方式，所以需要先绘制一个方形，当然在此之前还是要先创建一个场景，包括灯光，相机，渲染器等，之前章节已有过就不再贴代码了，下面先通过Shape创建一个截面。通过ExtrudeGeometry拉伸的方法，将shape截面和曲线curve传入后，进行拉伸，并设置路径的精度，就可以得到一个几何体geometry，再添加一个材质，创建网格模型，添加到场景中。就可以得到下面的3D模型，最终的效果如下，不过贴图还是根据实际场景选择，效果会更好。

之前用threejs实现的动画都是自然播放的，并没有干涉其播放过程，但是很多场景会需要手动干涉，比如做一个3D的SOP，用户通过3D动画的播放，360度查看设备的安装过程，并手动控制动画的继续和暂停来学习。这节介绍如何手动控制动画播放，包括暂停继续，以及控制速度。在上面加载模型的时候，我们创建一个一个action来播放动画，其实控制动画播放也是通过此action的方法，设置action的paused属性为true就可以暂停动画，设置为false就可以继续播放动画了。这里以一个小零件为例，

很多场景中会需要同一个模型很多次，但是如果多次加载同一个模型会占用很高的带宽，导致加载很慢，因此就需要使用clone，也就是加载一个模型后，其他需要使用的地方使用clone的方式复制出多个同样的模型，再改变复制出来的模型位置，达到一次加载，多次使用。但另一个情况是克隆的模型是新的模型，在threejs的场景中是一个完整独立的，具有一个正常模型所有的属性，很大，加载和渲染需要花费很多的时间，那么就又需要对克隆出的模型进行合并，成为一个整体的模型放到threejs的场景中。如果有疑问或者需要源码可以给我留言。

这篇文章主要以3D模型为主，通过blender绘制的模型，用Threejs加载到场景中，通过移动一些模型，做出动画效果，也是数字孪生中做常见的一种方式，但是缺点是需要建模人员辅助来制作，首先还是需要新建一个threejs的场景，包括场景，相机，渲染器等。然后可以再添加一辆带车产品的叉车，在边上的路线区，为了让后期产品可以和叉车一起运动，这里做成group，将两个模型放到同一个group中，这样后期只需要移动这个group，那么叉车和产品就都可以运动了。然后需要在场景中添加车和产品物料，

上节利用了A*实现了基础的路径规划，这节把整个功能完善好，A*算法一方面是基于当前点找到可以到达的点，计算从出发点到此点，以及此点到目的地的总成本，比较出最小的那个，再用最小成本的点继续找到它可以到达的点，直到目的地，同时会创建两个集合，一个叫open集合，一个叫close集合，open是用于存放到达过且没有继续探索的点，close集合是存放到达过且继续探索的点，简单的说A*算法会一边探索的同时会把新探索到的点放到open集合中，一边把探索过的点加入到close集合中。下面我们用图例的方式演示整个过程。

下面来说下大概得逻辑，假设有30*30的方格，从1,1点要到25,20点，会先从1,1出发，查询1,1能到达的点，假设1,1能够到达（0,1),(1,0),(1,2),(2,1)这四个点，那么求出四个点中哪个点距离目标点(25,20)的曼哈顿距离最近，得到这个这里距离最近的点之后，再找出这个点能够到达的点，从它能够到达的点中再求出四个点中哪个点距离目标点(25,20)的曼哈顿距离最近。可以同样用上个章节的加入element的输入框来实现动态规划，并在每次规划后清除上一次规划的路线。

然后添加绘制线的方法，将路径上多个点用线连起来，我们再给每个点添加一个小圆球，我这里是要求线不能太长所以会有多个小圆球，但并非每个小圆球都是拐弯点，顺便再添加一个擦除的方法，在绘制的时候把线和点的name设置为相同的，后期擦除的时候就只需要比较同一个name了。为了方面后期调试，这里给页面添加上几个输入框，分别输入起始点的xy和目标点的xy，再加一个路径规划的按钮，输入起始点和目的地后点击路径规划，会擦除上一次的路径，再将本次的路径显示在地图上。再继续沿着x和y向目的地移动，最终到达目标。

简单的说就是可以动态控制点的移动形成动画效果，所以我们在加载模型后需要获取到这个数组，不过大家在实践的时候要注意下自己用的模型有没有这个属性以及属性值分别控制的是什么，如果没有合适的模型可以私信我，我把我用的这个模型给你。获取到数组后，在动画函数中不断调整值来实现动画效果，比如实现眨眼，那就是要修改一个参数，不断变大，当眼睛闭上时，再延迟一点时间不不断变小把眼睛睁开，这里我直接放代码。说话的效果和眨眼类似，不过说话嘴型是变化较快，且没有太多规则的，所以这里用随机数，让控制嘴巴的点随机变化，

有了这个空间后，需要先引入mmd的加载器，用来加载PMD的模型文件。也包括MMD的动画助手插件用来渲染动画，两个插件加载不分先后顺序，第一个是把模型加载进来，第二个是做出动画效果。第一个也就是模型地址，第二个是动作文件地址，第三个是加载函数，第四个是加载进度，如果模型大的话可以在这里获取到加载进度，做成进度条，最后一个是加载错误的处理方法，接着我们可以加入相机动画，制作比较动感的视觉效果，就像动画中也会有镜头拉近，拉远，等各个角度的变换拍摄，加载好相机动画后就可以看到相机也会不断地切换角度拍摄。

然后需要添加管道给这两个设备连接起来，并且其中一个为蓝色一个为红色，之前有讲过Threejs绘制管道效果，可以就把那部分拿过来使用，配置好每个坐标点，这里用两个方法一个绘制冷水，一个绘制热水，并且让水流动起来，这部分开发可以参考之前的章节，不过要调整水管的接入点，如果想要直角管，可以在点数组中添加两个拐弯点的坐标，就可以避免后续的点的影响，以达到直角管道的效果。然后添加两个设备，一个冷却设备，一个服务器主机柜，要注意调整位置，保持一个在房间内一个在房间外，后续会通过冷凝管连接两个设备。

总的来说比之前好看一些了，但是数字孪生的场景是为了模拟真实情况并查看数据的，所以我们要给设备加点数据才行，之前用了精灵组件简单的做了个设备工序名，这里为了显示更复杂的样式引用CSS2DRender，他的好处是可以做一个html的div显示在设备上，样式与原生的方法一样，这样就可以设置好看的标签样式了。首先我们下载好模型放到本地，我下载的是gltf的格式，之前用引入人的模型已经导入此组件，不用再次导入了，我们只需要在绘制模型的外面加载模型，并在循环中克隆加载到的模型，并根据模型的大小进行缩放和位置偏移。

下面就需要设计如何循环生成货物并放置到货架的储位上了，我们在创建货架的时候创建了shiftList集合，里面放的是货架，那么我们只需要先循环货架，在循环货架中循环货架的层和列，在三层循环的循环体内调用创建货物的方法就好了，代码如下:新建一个3*3*2的几何体，添加贴图加载器，在贴图加载器中加载贴图，加载后创建贴图材质，然后通过几何体和材质创建一个网格模型并添加到场景中，上个章节给车间添加了线边仓，也就是货架，但是货架上是空的，这节给货架添加货物，货架的结构是循环出来的，那么货物也就可以循环生成出来，

之前的章节中有绘制过仓库，我们可以参考那个章节的功能，先分析功能，假设我们需要绘制一个两排，五层，三列的货架，。那么首先应该需要循环三次，第一层循环是循环两次，产生两排货架，并保证每次循环，x或者y轴存在偏移来保持货架不重叠，偏移的距离要大于货架的长度或者宽度，第二层循环用来循环是循环五次，产生货架的层数，货架的层数要考虑到层板厚度的影响，层数的偏移要大于今后放置物品的高度，第三层循环是循环每层的列数，循环列数要注意的是考虑到立柱的宽度，也就是货架腿的宽度，最终产生完整的货架。

上节中，我们给车间添加了警戒线，越来越接近雏形了，不过目前车间都还是物品，没有人，这不正常，这节就给车间添加一个人，还得是来回走动的人，如果需要人来回走动的话就需要去找一个带有走路动画的模型，让把人添加到适当的位置，然后循环播放走路动画的同时，不断的修改人的位置，首先找到人的模型，加载进来。不过主要的设备没用模型代替，显得还是很demo，不过我只是个普通程序员不会3D建模，哪位建模大佬能私聊发个合适的设备模型给我，我就感激不尽了。

上节解决了模型多会存在的模型卡顿问题，用了模型整合来结局，这节继续这个模型的完善，很多时候可以在产线看到地上会画警戒线，防止工作人员越界以被机器伤到，所以会在机器的危险区域用警戒线框起来，那么这节做绘制警戒线的功能。因为上下的警戒线是相同的，所以这里绘制好顶部的警戒线，下面的直接clone一下，再改个位置就好了，贴图我找了一个黄色的图片，作为纹理贴图，这样我认为效果会好点。这样所有的警戒线都加好了，车间也更完善了一点，好了警戒线的添加方法就到这里，如果需要添加其他的警戒线也是用类似的方法就好了。

上节课绘制了车间模型，但是车间里只有一条产线，这节把产线多铺设几条，放满整个车间，但是随着放满车间吗，也就意味着要创建更多的模型，而更多的模型会导致浏览器卡顿，所以这个节讲如何做模型合并，模型合并不是简单的创建group，把模型放到group中，这样只是把模型分组，但还不是给模型合并，模型合并是吧多个模型合并成一个模型。代码如下，最终实现每个传送带中的圆柱形合并为一个模型，分析页面，主要卡顿的原因是传送带的模型比较多，因为中间每个圆柱都是一个单独的模型，所以下面针对传送带的圆柱进行模型合并，

地面实际上就是一个很薄的长方体，长方体的长和宽就是车间的面积，高度设置为1，再加一点颜色，作为地面，这里用了一个蓝色的图片作为贴图，如果找不到合适的，也可以把贴图的去掉，用设置的颜色作为地面颜色就好了。然后我们需要把其中一面墙拆成两个墙，且不连接，我们这里把wall4缩短，再添加出wall5，设置wall4长度减去40，但是wall5的长度一共20，这样可以留出20的宽度作为门的宽度，代码如下。车间的绘制差不多就这样，算有个大概的雏形了。

但是为了避开建模的部分，设备可以先直接用一个长方体代替，传送带根据上节内容已经实现了，生产的产品也先用一个正方体代替，最终再做一个让产品在传送带上移动的动画就好了。然后需要在这个传送带中间添加多个设备，以生产PCB为例，生产工艺分别为，刷锡膏，SMT，PA,QC等，这里放SMT，PA和QC三个工序段。这里已经有了产线最基本的样子，但是还是静态的，需要让红色小方块 都动起来，所以需要添加动画，这里就用最基本的方式实现动画，且每个小正方体移动到产线结尾要再回到产线开头。添加设备后的场景如下。

Threejs绘制传送带

这样的曲线当做闪电的主分支，然后加点叉就好了，叉肯定也是需要歪歪扭扭的，且要和主线链接，所以应该是随机找主线的某个点进行开叉，并往下走一点歪歪扭扭的曲线，且曲线的长度不一致，然后我就做了一个可以生成小分叉的曲线，小分叉的开始点由主分叉传过来，因为要连接，且个数不一致也由主分支决定长度。这是一次比较失败的功能实现，本来想网上很少有threejs实现闪电效果的，但是我觉得好像可以做出来，就尝试着做了，结果做出来的太丑了，但是不能时间白费，所以记录下，总得有个交代。首先还是搭建出基础的场景。