ThreeJs
文章平均质量分 80
Blufis
这个作者很懒,什么都没留下…
展开
-
使用Three.JS以及A*寻路算法制作自动寻路场景(一)DEMO简介及环境部署
先上一波完成效果图,由于是自学,在此仅仅分享自己的一些见解,有不当之处还请大家指教!1.DEMO简介本DEMO使用Three.js作为主要开发工具,开发过程主要分为两个部分:首先是使用Three.js实现A*寻路算法,效果图如下:具体功能:1.自动生成地图2.根据选定开始及结束位置计算路线(涉及构造器,raycaster的使用)3.播放寻路动画(requestA...原创 2018-07-19 23:16:34 · 5086 阅读 · 2 评论 -
使用Three.JS以及A*寻路算法制作自动寻路场景(二)随机地图生成
本节主要内容:使用threejs绘制网格底板; 生成随机地图。使用ThreeJs绘制网格底板先上效果图:写一个函数initGround用于初始化:function initGround(){}设置网格宽度为200:var length=200;下面开始绘制网格,我们希望把坐标原点放置在网格中心,由此可知,网格的四个顶点坐标分别为Three.Vector...原创 2018-07-19 23:16:25 · 4201 阅读 · 0 评论 -
使用Three.JS以及A*寻路算法制作自动寻路场景(三)使用Raycaster和构造器确定鼠标点击位置
本节主要内容:Three.Raycaster主要用法简介 利用Plane以及Ray构造器实现鼠标点击确定坐标位置 判断坐标位置属于网格中哪一格,并使用小球进行标注首先放上本节完成效果:Three.Raycaster主要用法简介根据官方文档,Three.Raycaster主要用来处理光线投射。光线投射主要用于物体选择、碰撞检测以及图像成像等方面。援引官方文档中的案例:...原创 2018-07-20 16:32:23 · 4024 阅读 · 3 评论 -
使用Three.JS以及A*寻路算法制作自动寻路场景(四)使用A*寻路算法和requestAnimationFrame函数实现寻路场景
本节主要内容:javascript A*寻路算法astar.js使用简介 使用astar.js获得连接起止点的路径矩阵 使用requestAnimationFrame函数实现寻路场景本节最终效果图如下:javascript A*寻路算法astar.js使用简介该项目Github地址为: http://github.com/bgrins/javascript-astar实现...原创 2018-07-21 13:52:38 · 3061 阅读 · 1 评论 -
使用Three.JS以及A*寻路算法制作自动寻路场景(五)使用多view绘图实现小地图功能
本节内容:使用多view渲染同一场景方法简介 套用此方法,实现小地图功能,完成本DEMO本节最终效果图:使用多view渲染同一场景方法简介主要参考的three.js官方案例(https://threejs.org/examples/?q=orb#webgl_multiple_views),效果如下:查看本案例源代码,要实现多view渲染,需要定义一个views数组,存放...原创 2018-07-22 20:51:54 · 3359 阅读 · 4 评论