- 博客(88)
- 资源 (6)
- 收藏
- 关注
RSS订阅原创 ThreeJs模拟工厂生产过程二
地面实际上就是一个很薄的长方体，长方体的长和宽就是车间的面积，高度设置为1，再加一点颜色，作为地面，这里用了一个蓝色的图片作为贴图，如果找不到合适的，也可以把贴图的去掉，用设置的颜色作为地面颜色就好了。然后我们需要把其中一面墙拆成两个墙，且不连接，我们这里把wall4缩短，再添加出wall5，设置wall4长度减去40，但是wall5的长度一共20，这样可以留出20的宽度作为门的宽度，代码如下。车间的绘制差不多就这样，算有个大概的雏形了。
2024-04-24 10:19:06
156
原创 ThreeJs模拟工厂生产过程一
但是为了避开建模的部分，设备可以先直接用一个长方体代替，传送带根据上节内容已经实现了，生产的产品也先用一个正方体代替，最终再做一个让产品在传送带上移动的动画就好了。然后需要在这个传送带中间添加多个设备，以生产PCB为例，生产工艺分别为，刷锡膏，SMT，PA,QC等，这里放SMT，PA和QC三个工序段。这里已经有了产线最基本的样子，但是还是静态的，需要让红色小方块 都动起来，所以需要添加动画，这里就用最基本的方式实现动画，且每个小正方体移动到产线结尾要再回到产线开头。添加设备后的场景如下。
2024-04-23 10:19:00
217
原创 Threejs实现闪电效果
这样的曲线当做闪电的主分支，然后加点叉就好了，叉肯定也是需要歪歪扭扭的，且要和主线链接，所以应该是随机找主线的某个点进行开叉，并往下走一点歪歪扭扭的曲线，且曲线的长度不一致，然后我就做了一个可以生成小分叉的曲线，小分叉的开始点由主分叉传过来，因为要连接，且个数不一致也由主分支决定长度。这是一次比较失败的功能实现，本来想网上很少有threejs实现闪电效果的，但是我觉得好像可以做出来，就尝试着做了，结果做出来的太丑了，但是不能时间白费，所以记录下，总得有个交代。首先还是搭建出基础的场景。
2024-04-11 16:39:01
191
原创 ThreeJs制作管道水流效果
首先开始创建一个管道，同样是先取一些点，通过这些点连接为曲线，通过曲线创建将这些点连起来的管道TubeGeometry对象，这里要给管道添加贴图，大家可以根据需要选择适合的贴图，我这里用的是一个二维码作为演示，之前的章节中有讲过如何制作管道效果，使用了TubeGeometry对象，先通过多个点绘制曲线，通过这个曲线使用TubeGeometry绘制管道，不过要绘制水流效果就需要有动态的效果，这里通过贴图的位移来实现；这里仔细看，可以发现，水流和管壁之间已经有了一些空隙，空隙的宽度由两个管道的半径差决定。
2024-04-03 16:24:17
256
原创 ThreeJs添加拖动辅助线
之前有写过一篇关于Threejs拖动的时候限制在一个轴上，使用的是原始的拖拽事件，在拖拽事件中设置其他两个轴的拖拽失效，也就是拖拽后重置为开始拖拽时的坐标点，缺点是不那么直观，而且需要写代码实现，最近发现其实是有专用的组件来实现的，也就是我们在大多数建模中使用的方式，有三个箭头，鼠标悬停对应的箭头实现固定单方向的平移。组件名是TransformControls。使用起来也非常简单。然后开始加入拖动组件和拖动辅助组件。由此得到这样一个场景。
2024-04-01 10:18:19
143
原创 Threejs制作骨骼模型
threejs中引入了bone来制作骨骼，不过要注意的是这个Bone并非是一个模型，而是指一个关节，这个不理解的话就很难理解骨骼动画了，比如一根圆柱形分为四段，大臂，小臂，手掌，手指，那么就需要5个节点，分别是肩膀处，胳膊肘，手腕，手指根部，手指尖部，然后移动或者旋转其中一个关节，会影响到边上的两段。这里已经能够看到一些绿色和蓝色组成的线条了，这个线条可以当做是骨头，颜色交汇处就是关节。这里设置让圆柱来回摇摆，并且到一定程度后再设置负值进行反向摇摆，
2024-03-20 14:41:52
296
原创 ThreeJs的音频和位置音频
再来试下位置音频，同样是加载一个监听和一个声音，但是这里为了了解音频的位置，所以先创建一个模型，将音频绑定到模型上，后面就可以通过改变相机的位置，体验下不同距离和位置对听到的声音的影响。这里也可以用一个简单的用html隐藏一个audio标签实现，并用js控制，因为这里不会对音乐做特殊的处理，这里就不演示效果了。然后创建监听和声音，先创建一个监听：AudioListener，再创建一个Audio加载器用来加载声音，AudioLoader，然后播放声音就可以了，效果如下：（视频待审核后上传发布）
2024-03-18 15:55:31
634
4
原创 Threejs制作虚拟房间效果
我们经常在装修的网站可以看到虚拟房间的效果，通过网站展示3D房间的细节，并且点击可以进入到每个房间查看，今天就用threejs来实现类似的效果，其实就是类似天空盒子的功能，将房间的上下左右前后各拍一张图片，并且保证每个图片的交界处是衔接上的，最后组成一个正方体的盒子，将相机设置在盒子的中间，禁止拖动，就可以实现在房间里查看房间周围家具的效果。然后将图片添加到场景中，并作为贴图贴在正方体的6个面上。Threejs查看VR房间。首先第一步创建3D场景。然后找六张房间的图片，
2024-03-18 09:36:34
378
原创 百度地图制作游玩路途
然后开始用js创建地图，创建地图只需要简单的四行代码，第一个是确定地图在哪个div中显示，第创建一个中心点，表示地图打开后显示的中心在哪，第三部设置中心店，并设置缩放级别，这里设置11级别，一共20个级别，越小地图越详细但是看到的范围也越小，这里11算比较适合的。到这里已经有了基础的路线，但是每个地方只能看到途的标识，无法确定这个点的日期和景点名所以需要给每个景点添加备注，利用百度地图的Label添加覆盖物的方式给地图的每个点添加文字描述，文字的内容可以自定义，可以标识日期，游玩时间等。
2024-03-15 13:37:48
532
原创 ThreeJs制作模型图片
大概得实现逻辑是这样的，先找一个图片，像素要小，越小越好，要有花纹，然后用canvas将图片的每个像素拆解出来，拆解后可以获得这个图片每个像素的位置，颜色，用集合保存每个像素的信息，在3D场景中循环，有了位置和颜色后，在循环中创建一个个正方体，将正方体的位置设置为像素的位置，y轴方向为1，创建贴图，并将贴图的颜色改为像素点的颜色，全部循环后就得到一副用正方体拼接出来的图片了。这样就真实点了，可以根据电脑性能来调整去选取的像素点个数，如果电脑足够好，也可以根据上一篇音乐的效果，给这个图片添加音乐效果的跳动。
2024-03-13 17:26:30
373
原创 Threejs实现模型对接音乐节奏
然后在地板上放小方块，如果直接循环放置会放在同一个位置重叠，因为这里要在循环里控制每个小方块之间的距离，大概意思就是每个小方块长宽高为10，每个小方块间隔1，且每铺满11个小方块为一行后就再换一行重头平铺，每个方块的高度设置为0，水平位置为循环中计算出来的位置，最终全部平铺开来，每个都加入到场景中等会用音乐的节奏来控制小方块的跳动，但是经过测试太多的小方块会导致卡顿，（因为模型和修改模型位置和材质都会消耗性能，且因为方块独立跳动没办法进行合并），这里选择用121个小方块，做成11*11的方阵。
2024-03-13 11:29:14
495
原创 Threejs播放模型自带动画
现在的很多建模软件都可以制作动画效果，甚至可以通过各种动画效果直接做动漫，动漫是模型的一种属性，在threejs中同样可以加载此动画，实现动画效果，如果有的时候在threejs中用代码实现模型动画比较困难或者麻烦，可以在模型中做好动画，然后在threejs中通过代码播放此动画来实现，但是此时只是把模型加载进去不会自动播放模型自带的动画，只是一个静止的模型而已，需要动画播放需要加载动画并播放。然后根据这个动画调用动画的组件去播放这部分在之前的关键帧动画中有相关用到，这里是模型自带的就不需要做动画设置了。
2024-03-12 11:24:32
446
原创 Threejs用下个点方法实现模型沿着轨道行驶
不过需要注意的是，在做循环执行的时候，不能判断小车是否走到最后一个点，因为小车走到最后一个点的时候，下一个点是不存在的，所以应该判断小车是否走到倒数第二个点，当小车走到倒数第二个点的时候就要让点的下标重置。否则会发生数组越界。因此上面要判断等于999就重置为0,threejs中有lookAt方法，这个方法不止是针对相机，也可以用于模型让模型对着某个点，因此让小车时刻对着轨迹的方向，只需要获取到小车所在为止的下一个点，并让小车始终把车头对着自己要去的那个点，就可以实现方向的控制。
2024-03-08 14:15:23
563
原创 Threejs用切线实现模型沿着轨道行驶
还是先创建一个场景，添加相机，灯光，渲染器等，然后需要创建一个轨迹，这里用CatmullRomCurve3创建一个3维曲线，这个的好处是等会可以将此曲线拆解成多个同等份的点，因为我们需要不断更新模型在此曲线的位置，实际上就是不停的切换此曲线上连接的多个点，来实现位置的不断更新。曲线和车都加好了，需要开始设置动画了，也是最关键的部分，运动的部分比较简单，因为获取到了曲线的多个连续点，只需要不断地更新车的位置到每个点就好了，保持车头方向需要先获取车所在点向量的切线，位置向量和切线向量相加即为所需朝向的点向量。
2024-03-08 13:04:57
546
原创 ThreeJs限制模型拖动的范围
然后开启拖拽监控，拖拽功能有很多监控函数，包括拖拽前，拖拽中，拖拽后等，这里先用这三个，原理是在拖拽前记住此时的x和y轴位置，在拖拽中时刻修改x轴和y轴的位置为拖拽开始时获取到的位置，同时在拖拽中判断拖动到的位置是否在范围内，如果没有就设置为范围内，使得模型不会超过设定的范围。下面开始主要功能：首先新建几个变量：x轴位置 ，y轴位置，z轴最小范围，z轴最大范围。ThreeJs拖拽功能范围限制。
2024-03-08 10:47:53
407
原创 ThreeJs场景中添加视频
其实添加视频和以前介绍的添加纹理贴图一样，只不过这是添加视频的纹理贴图，让画面动起来，首先还是需要创建一个场景，包括scene，camera，renderer，OrbitControls可以根据需要添加。这节讲如何在threejs中添加一个视频的功能，在某些场景中可能会需要播放视频，比如在场景中方式一个大屏幕，大屏幕上需要播放视频，亦或者在场景中添加电视机的模型，电视机的画面上需要播放一些视频等。创建完场景后，我们在场景中添加一个整体，然后在正方体的各个面都添加视频画面，
2024-03-07 14:48:34
636
2
原创 ThreeJs制作全息投影视频
此时效果如下，虽然div是四个方向了，但是内容不是的，所以还需要旋转div的角度实现都是人物的下方对准中间的空心。好了，效果是完成了，不过没有材料验证，等凑够了材料再看验证结果吧。
2024-03-05 10:36:14
385
原创 ThreeJs同一个场景多个相机的显示
最后为了证实为同一个模型，我们可以将这个模型设置旋转，并不断更新渲染器。再定义四个渲染器，用于分别渲染四个相机中的内容。四个相机通过四个角度观察模型。
2024-03-01 14:31:25
636
原创 Threejs创建天空和太阳
接着在新建一个方法用于渲染天空和太阳，这的天空实际上还是使用的天空盒子，要做个很大的盒子，把整个场景装进去，然后渲染起来类似天空的效果，其次在天空中添加一个太阳的效果，使用Sky的一些属性给太阳的周围添加一些晕轮效果，可以设置太阳浑浊度，散射等，属性的作用我已经在代码中做了详细的注释，大家可以修改他们的值来尝试。最终，在场景中的展示如图所示：个人觉得还是很nice的，可以通过之前制作动画效果的课程，实现太阳的升起和落下，
2024-02-05 10:18:00
652
原创 Threejs制作大海效果
threeJs制作大海效果，实际上是绘制一个平面模型，在平面模型的表面渲染出波浪的效果，因为模型的长和宽要足够的大，有望不到边的效果，如果项目中添加了拖动效果的话，还需要在拖动的Control中添加允许的拖动角度，这样可以防止用户不下心看到了海面的下面就露馅了，哈哈。下面提供了波浪的贴图。好了，下面开始说下怎么实现海面的效果，Threejs官方里包含了组件Water，使用这个组件可以快速绘制大海的效果，包含海面波浪的动态效果，首先我们需要创建一个场景，按照以往的步骤，场景，相机，渲染器等。
2024-02-04 16:51:13
538
原创 ThreeJs通过canvas和Sprite添加标签
这节就讲如何用sprite和canvas添加标签，之前有讲过Sprite绘制下雨的场景，是先加载图片，然后封装为Sprite对象，再随机放置到场景中，但是现在情况很显然不适合使用固定的图片，因为每个货架的名称是动态变化的，需要根据字符串实时生成一个Sprite，这里就用到了Canvas，可以先用canvas设置字符串并绘制成图片，再将图片放置到Sprite中并定位到模型的位置，基于模型的位置往上添加一定的高度，这样就完成了对模型的标识，下面提供核心代码。这种标签的好处是，从任何方向查看都是对着摄像机的。
2024-01-05 17:26:40
538
原创 Docker安装MySQL
之前介绍过使用docker安装nginx，redis，这节介绍docker安装mysql，因为这些都是常用的软件，而正式安装又比较麻烦，在开发或者测试以及临时使用的时候就会很方便。安装MySQL之前先要测试下是否安装好了Docker，通过docker images命令来查看，这是查看docker下的所有镜像，我这里新安装了...
2024-01-03 11:05:00
382
原创 ThreeJS创建关键帧动画
之前有说过两种创建动画的形式，一个是很粗的方式，直接在requestAnimationFrame中修改模型的属性，因为threejs本身就会不断刷新画面，利用不断刷新的时候修改模型属性就实现了每次刷新后修改模型的一些属性，另一种方式是用tweenJs，这个使用起来简单，但是缺点要另外引入tweenjs才可以使用，还有一种是threejs自带的动画实现效果，叫关键帧动画，这节补上。了解关键帧动画之前要了解其中几个重要的概念，
2023-12-29 10:49:34
997
原创 Pixi入门第三章：绘制更多内容
上一个章节绘制了长方形，原型，椭圆形，这节说下绘制线，绘制线和绘制图形的方式差不多，依然是是Graohics对象来绘制，先设置线条的样式，再绘制从某个点到某个点，绘制结束后将这条线加入到stage舞台上。最后，再来尝试绘制一个贝塞尔曲线，贝塞尔曲线分为二阶和三阶，二阶的贝塞尔曲线有一个点来影响线的曲率，三阶贝塞尔曲线有两个点来影响线的曲率。一旦可以绘制线了，其实绘制任何性状都可以了，因为图形就是多个线连起来得到的，比如，我们绘制一个三角形。
2023-12-26 13:21:52
478
原创 Pixi入门第二章：绘制各种图形
新替换的方法最后一个值就是圆角的半径，类似div中的radius值，和radius一样，你如果长方形改为正方形，并把圆角的半径设置为边的一半，你就会得到一个圆形。上一个章节已经大概介绍了Pixi，并做了一个简单的例子，这节正式入门，因为pixi是用来绘制图形的，那么这节就从头开始说用pixi绘制一个简单的图形，先从最简单的长方形开始，当然这是通过骚操作的方式实现的，正儿八经的绘制方法如下，绘制好的效果和上图一模一样，唯一的区别就是长方形的x和y是开始绘制的点，圆的x和y是圆心，
2023-12-25 16:43:58
480
原创 Pixi入门第一章：绘制一个小精灵
Pixi.js迅速受到了开发者的喜爱，因为它具有出色的性能和易用性。安装完成后先引入pixi.js，然后后创建一个pixi的场景，并设置宽高颜色等参数，并添加到body中，再通过图片创建一个图片，pixi里叫sprite，意思是小精灵，创建后设置x，y的值，添加到舞台Stage中（类似three的scene），最终你就可以得到一个简单的pixi页面了，当然直接用canvas也可以很容易实现这些，但是后面的内容就可以慢慢看出pixi的优势了，好了第一章入门就到这里，代码下方放置了效果图可以参考下效果。
2023-12-24 22:06:58
470
原创 ThreeJs实现发光描边
在很多数字孪生场景中会有交互操作，比如选中一个物体，但是为了很好的凸显选中的物体一般会有几种效果，比如将选中的物体向上移动一定的距离，或者是改变选中模型对象的颜色，这两种实现方式都是通过改变模型的属性，一个是改变position的值，另一个是改变material的color属性，今天这里要说的是第三种方式，给物体添加发光描边，也是很多数字孪生场景经常用到的一种方式。每个Pass可以是一些后期处理效果，如添加晕影，模糊，应用绽放，应用胶片颗粒，调整色调，饱和度，对比度等。使用前先引入三个组件，
2023-12-20 14:05:34
930
原创 ThreeJs中使用Cannon实现方块自由落体效果
核心代码在下面了，如果自己尝试有问题可以留言向我要完整的源码。之前有做过小球的掉落效果，不过那个从画面上只能看出来重力加速度和接触地面反弹的效果，可能没有那么直观，也许用一些js加物理公式也能实现类似的效果，这节用小方块来演示，可以很直观的看出物理世界的现象，因为方块是有棱角的，掉落的时候与地面接触是棱或者角的话就会弹开翻转再落地。
2023-12-06 16:57:00
412
原创 ThreeJs中使用Cannon实现小球自由落体效果
之前有做过关于Threejs基础功能的一些演示，这里引入一个新的组件Cannon，这是一个开源3D屋里引擎，可以用来开发和模拟真实世界的物理效果，包括碰撞，重力，约束等，效果如上视频，小球会在y轴上方100的高度，因为收到y轴负方向重力加速度的原因加速下落，在碰到地面后反弹，根据设置的材质反弹系数弹起一定的高度后，再次下落，循环此过程直到不再反弹。
2023-12-01 10:56:03
438
原创 ThreeJs实现简单的动画
下面的源码展示了通过requestAnimationFrame的方式实现动画效果。（mesh.rotation.x += 0.02是改变正方体网格的z轴旋转角度），requestAnimationFrame每执行一次就会旋转一次。效果如下，这里是图片，只是其中一帧的样子，没有动态效果。看到动态效果可以把上面的代码复制到html文件中双击打开在浏览器中执行。如果有疑问可以在评论里留言。
2023-11-24 13:39:24
484
原创 Docker搭建jenkins环境
按照习俗，先介绍下jenkins，Jenkins，是一个开源的、提供友好操作界面的持续集成(CI)工具，主要用于持续、自动的构建的一些定时执行的任务。Jenkins用Java语言编写，可在Tomcat等流行的容器中运行，也可独立运行。然后是为什么要使用jenkins：第一Jenkin是免费开源的，且拥有庞大的社区，也就意味...
2023-11-06 15:43:44
215
原创 docker运行nginx镜像
今天在这里讲如何在docker上运行nignx镜像，并将配置文件和目录挂载到宿主机上，以实现方便统一的管理配置信息。首先第一步需要拉取镜像，我们还是拉取最新的镜像，不需要添加tag版本号，docker pull nginx拉取结束后用docker images 查看是否拉取成功，如图中可以看到nginx的镜像了。docke...
2023-10-17 17:07:20
571
原创 docker运行redis镜像
很多项目会用到redis作为缓存用到项目中，鉴于刚了解过docker，今天这里用docker运行redis镜像，这样下载，安装运行，或者是使用后的删除都会干净，简单。好了，第一步是先拉取镜像，使用docker pull命令，不加版本号就是默认拉取最新一个版本。docker pull redis如图中，就是已经拉取完成了。...
2023-10-17 17:06:36
254
原创 ThreeJs的场景实现鼠标拖动旋转控制
前面一个章节中已经实现在场景中放置一个正方体，并添加灯光使得正方体可见。但是由于是静态的还不能证明是3D的，我们需要添加一些控制器，使得通过鼠标控制正方体可以动起来，实现真正的3D效果，由此引入OrbitControls组件，他实质是改变相机的位置，实现从不同角度看场景中的物体。下面源码中已经将控制的部分加入了，在最下方，注释也写的很详细了。OrbitControls组件如果找不到在线引用的可以到我的csdn中下载。如果有问题，可以在我的评论区留言。
2023-09-28 21:26:17
1194
原创 web开发的前端和后端
web开发一般分为前端和后端开发来个部分，后端负责和数据库交互，并向前端提供接口，后端开发麻烦的地方是并发，各种机制的锁引发的一系列问题，前度负责调用后台提供的接口并渲染在浏览器中，前端开发麻烦的地方是对各种浏览器的兼容性，以及前端各种特效的展示，尤其是现在随着数字孪生的发展，要求在浏览器展示一些3D特效的内容。前端的技术栈包括：html，javaScript，css，jQuery等，高级一些涉及，vue，recat，Angular，ThreeJs，Echarts，webgl，webrtc等。
2023-09-27 16:16:38
312
原创 Docker数据卷挂载
使用docker运行软件或者项目的时候很容易发现一个问题：整个项目都在docker中运行，那么它产生的一些数据也会在docke容器中，那么今后都不能删除这个docker容器了，因为会连带着产生的一些数据全部删除了。不过既然docker这么流行，肯定有方式解决这个问题，那就是将容器外的文件挂载到容器中，其实就是将容器内部的文...
2023-09-21 09:21:18
36
原创 Docker获取镜像和运行镜像
上一节已经介绍怎么安装docker，这节讲如何获取镜像和运行镜像。获取镜像前，首先看下docker是否安装好并运行，使用命令docker -v，如果出现版本号则说明安装并运行成功，如图确认docker安装完成后就可以从中央仓库拉取镜像了，命令是docker pull ，比如想拉取redis，那么命令就是docker pul...
2023-09-20 10:45:09
254
原创 Docker入门和安装
Docker是一个被广泛使用的开源容器引擎，是一种操作系统级别的虚拟化技术，它以一种特殊进程的方式运行于宿主机上，它依赖于liunx内核特性：namespace(名字空间进行资源的隔离)和cgroups(限制、记录任务组所使用的物理资源)，它也可以对应用程序进行打包。docker容器技术目前在开发中应用很广泛，下面我们就来...
2023-09-19 09:32:12
26
兼容手机端的echart例子，数据为静态的，当demo用
2019-09-09
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人