最近在用pixi绘制地图的时候需要做带箭头的线，用来从一个点执行另一个点，表示此段路线可行，但是发现pixie是没有自带的绘制带箭头线段的，那就只能自己绘制了，在此记录一下，pixi底层是用的canvas，所以绘图和方法和canvas很像，先通过PIXI创建Graphics对象。，绘制一条线段，这里绘制从（50，50）到（35
上节利用了A*实现了基础的路径规划，这节把整个功能完善好，A*算法一方面是基于当前点找到可以到达的点，计算从出发点到此点，以及此点到目的地的总成本，比较出最小的那个，再用最小成本的点继续找到它可以到达的点，直到目的地，同时会创建两个集合，一个叫open集合，一个叫close集合，open是用于存放到达过且没有继续探索的点，close集合是存放到达过且继续探索的点，简单的说A*算法会一边探索的同时会
这节一起用Vanna来实现自然语言转SQL，之前的大模型一直停留在问答阶段，答案基本都是大模型提供的，至多是加点本地知识库，text，pdf等文档，丰富大模型的内容，但是想要大模型与一些管理系统对接还是无能为力，这节就一起尝试下用Vanna对接数据库，将自然语言转成标准的SQL对数据库进行查询。这也是很多管理系统的开发者最需要落地实践的内容。 &nbs
最近在做一个路径规划的例子，大概场景是在一个xy坐标系中，有几个障碍物，一个车要绕过这些障碍物到达目的地，本来用java来实现，但是java调试太不直观了，我就想起用threejs把场景简单搭建出来，规划好的路线也直接展示出来，就可以实时查看路径规划的怎么样了。先来一张效果图：首先是添加threejs场景，包括灯光，相机，渲染器，也包括地板，然后得到一个空的场景
在物联网项目中，我们经常用到MQTT协议，用MQTT协议做交互就需要部署一个MQTT服务，而mosquitto是一个常用的MQTT应用服务， Mosquitto是一个实现了消息推送协议MQTT v3.1的开源消息代理软件。MQTT（Message Queuing Telemetry Transport）是
上个章节通过加载PMD模型和VMD的动作播放MMD的动画，这节通过js控制让模型实现眨眼，说话。我们还是拿上个模型来操作，首先是创建好Threejs的场景，包括灯光，相机，渲染器等。 initScene(){ this.scene = new THREE.Scene(); this.clock = new THREE.Clock(); const
MMD全称MikuMikuDance，是一个简单的做动画的程序，做MMD之前先了解下什么是PMD。 PMD（Polygon Model Data）文件是一种用于描述三维模型的文件格式。PMD 文件通常用于 MikuMikuDance（MMD）软件，它是一款在日本非常流行的三维角色动画制作工具。PMD 文件
根据已经学习的Threejs内容这节再做一个机房冷却的结构原理图，不过因为内容比较简单，只需要一个章节就可以了，大概分为机柜，冷却塔和之间的冷凝管和导热管。先来一张效果图：从效果图可以看到，需要两个模型：一个冷却设备，一个服务器机箱，我这里是从网上找来的，如果大家有需要可以私信联系我发给你，首先我们搭建一个空的threejs场景， initScene(){ this.scene = n
这节算是给这个车间场景收个尾，等了几天并没有人发设备模型给我，只能自己找了一个凑合用了。加载模型之前，首先要把货架上的料箱合并，以防加载模型之后因模型数量多出现卡顿，方法和之前介绍的合并传送带方法相同，代码如下： //初始化料箱 initCube(){ let cubeList = []; const textureLoader = new THREE
接下来会做一个MES场景下的数字孪生，可以先开始做车间相关的模型，一般车间会有设备，传送带，线边仓，产线工作人员，工作站等，我们这节从传送带做起，不过还是尽量少用模型，用纯代码实现，因为一方面方便不会3D建模的人员开发，另一方面可以动态使用，可以调节长度和宽度等，下面这节就做一个简单的传送带，这是所有车间都会有的东西首先添加一个场景，相机，灯光等。initScene(){//初始化场景
这是一次比较失败的功能实现，本来想网上很少有threejs实现闪电效果的，但是我觉得好像可以做出来，就尝试着做了，结果做出来的太丑了，但是不能时间白费，所以记录下，总得有个交代。首先还是搭建出基础的场景，包括场景，相机，渲染器等initScene(){ this.scene = new THREE.Scene(); const axesHelper = new THREE.
管道水流效果
ThreeJs拖拽组件的使用
今天讲threejs里比较复杂的一个功能，骨骼动画，骨骼动画也是应用场景很多的一种，因为无论是机器还是人都会存在骨骼动画，尤其是对设备或者人细节化的展示时候，以前的动画都是一个独立的模型进行移动或者旋转，但是物理世界中很多都是一个物体的移动是受制于另一个物体的，比如一个人的胳膊运动，大臂带动小臂，小臂上下摆动却不影响大臂，但是小臂的一头却固定在大臂上。
Threejs的场景有时候需要引入声音，比如下雨声音，撞击声音等，这需要用到Threejs的两个类Audio和PositionalAudio，第一个Audio是普通的声音，比如下雨，在整个场景中听到的都是下雨的声音，而且每个位置的声音都一样大小，那么就需要用Audio，也可以作为3D场景的背景音乐来用，但是如果是某个位置发生了撞击，那么应该是距离越远，听到撞击的声音越小，也就是要把声源的位置固定，
最近和朋友筹划五一去青海玩，但是不在一起，导致景点顺序和地点一直说不清，全靠截图后画线，为了直观统一的展示，做了这个百度地图的路径显示，暂时只是为了这次出行做了计划，后续会把他做成一个可以在线编辑的小工具，方便大家使用。首先需要到百度地图的控制台申请一个key有了key之后创建一个html页面，创建地图，因为只是一个页面的单应用没必要创建项目和后台，创建html
这个标题名字可能有歧义，只是不知道如何更好的表达，总之就是将图片的像素转换成3D场景的模型，并设置这个模型的颜色，放到像素点对应的位置从而拼接成一个图片，起因是上文中用js分解了音乐，实现了模型跳动效果，既然音频可以分解，那图片应该也可以，所以就有个这篇博客。 大概得实现逻辑是这样的，先找一个图片，像素要小，越小越好，要有花纹，然后
昨天看到一个网站是2维的柱形图随着音乐节奏起伏，我突然想到二维形状可以起伏，三维应该也可以，最终原理应该都是将音乐频谱分解为数据，通过数据的切换不断地改变图形的形状来实现，因为找了分析音乐频谱的源码，解析完，再通过threejs的动画实现了3D场景下的模型随着音乐的节奏而变化，下面做详细步骤的说明：这只
现在的很多建模软件都可以制作动画效果，甚至可以通过各种动画效果直接做动漫，动漫是模型的一种属性，在threejs中同样可以加载此动画，实现动画效果，如果有的时候在threejs中用代码实现模型动画比较困难或者麻烦，可以在模型中做好动画，然后在threejs中通过代码播放此动画来实现，如果想看一个模型有几个动画可以在加载模型后打印出来明细查看 const loader =
上一文中实现了用模型所在点的切线方式确定模型的朝向，这个章节是对上个章节的补充，用一种更简单的方式实现小车沿着轨道方向移动，如上文前半部分内容，需要创建场景，轨道，加载车的模型，一切就绪。 threejs中有LookAt方法，这个方法不止是针对相机，也可以用于模型让模型对着某个点，因此让小车时刻对着轨迹的方向，只需要获取到小车所在
这次讲一个经常遇到的使用场景，让模型沿着轨迹运动，这个场景需要解决两个问题，第一是让模型沿着轨迹运动，第二是在沿着轨迹运动的同时，要保持模型的头部也时刻保持前方，而不是单纯的只是更新模型位置。 还是先创建一个场景，添加相机，灯光，渲染器等，然后需要创建一个轨迹，这里用CatmullRomC
之前有讲过ThreeJs中对模型的拖动功能，使用DragControl组件，将模型放到组件的集合中，就可以拖动点击的模型了，这节细化下怎么控制拖动，比如之拖动z轴，或者限制拖动x轴的范围在某个区间： 首先还是新建一个Threejs场景，并添加好需
这节讲如何在threejs中添加一个视频的功能，在某些场景中可能会需要播放视频，比如在场景中方式一个大屏幕，大屏幕上需要播放视频，亦或者在场景中添加电视机的模型，电视机的画面上需要播放一些视频等。 initScene(){ scene = new THREE.Scene(); }, initCamera(){ this.camera = new THR
之前有讲过在同一个场景中添加多台相机以从不同角度查看模型，后来发现全息投影需要的内容就是从不同角度拍摄四个视频，播放之后放上一个透明的四棱锥形状，实现全息投影的效果，我觉得可以用threejs来做一个全息投影的视频，因为threejs支持交互，所以后期还可以根据需要做一个可以互动的全息投影视频，下面我们接着上次的方法来写： &n
在threeJs开发数字孪生中，我们正常是需要使用一个相机，画面显示的内容也就是这个相机拍摄到的内容，但是是否可以添加多个相机，可以同时从不同角度观察模型呢，实际上是可以的，不过多个相机的拍摄到的画面肯定需要在多个容器中显示，也就是需要创建多个渲染器，每个渲染器渲染对应的相机拍摄到的画面，下面是代码实现：假设我们需要从前后左右四个角度查看，那么我们要先定义四个html标签，
之前有介绍过threeJs做3D场景的教程，但是发现web3D还是有很多局限性的，尤其是在绘制地图一方面，3D场景必须通过射线选取物体，而且会因为相机视角的问题出现偏差，另一方面3D在渲染性能上消耗远大于2D的场景，在动态绘制线的时候会出现卡顿等情况，所以最终又选择一个2D的框架开始学习，这里选用pixi.js。 下面来段仪式性的介绍：&nbs
在很多数字孪生场景中会有交互操作，比如选中一个物体，但是为了很好的凸显选中的物体一般会有几种效果，比如将选中的物体向上移动一定的距离，或者是改变选中模型对象的颜色，这两种实现方式都是通过改变模型的属性，一个是改变position的值，另一个是改变material的color属性，今天这里要说的是第三种方式，给物体添加发光描边，也是很多数字孪生场景经常用到的一种方式。发光描边
之前有说过两种创建动画的形式，一个是很粗的方式，直接在requestAnimationFrame中修改模型的属性，因为threejs本身就会不断刷新画面，利用不断刷新的时候修改模型属性就实现了每次刷新后修改模型的一些属性，另一种方式是用tweenJs，这个使用起来简单，但是缺点要另外引入tweenjs才可以使用，还有一种是threejs自带的动画实现效果，叫关键帧动画，这
之前有做过关于Threejs基础功能的一些演示，包括绘制简单的模型，以及给这个模型添加一些动画，但是这些都还是停留在绘制的阶段，动画也是匀速移动，而非模仿自然界中的重力加速度以及阻力等效果实现的。今天讲一个可以模拟自然界中一些物理属性的组件，这里引入一个新的组件Cannon，这是一个开源3D物理引擎，可以用来开发和模拟真实世界的物理效果，包括碰撞，重力，约束等，Cannon.js的特点如下：轻量级
之前有讲过使用天空盒子来绘制天空效果，简单的讲就是做一个正方体将整个场景包含在里面，正方体的六个面用贴图无缝衔接上，然后渲染出天空的效果。这节讲用threejs自带的Sky组件实现天空效果，这样不仅省的自己去找图片，而且会加上太阳的效果，显得更逼真和漂亮，上一篇文章绘制了大海，这这个Sky就基于海面上创建天空效果，如果需要前面的代码可以参照这篇文章Threejs绘制海面 &
Copyright © 2005-2024 51CTO.COM 版权所有 京ICP证060544号
