JS实现A*算法
前言A*算法要解决的问题是找出一条起点到终点的最优路径，本文主要演示使用js代码实现的方法。讨论A*算法原理的优质文章很多，我会在下面附上相关文章链接，不文不再详细讨论原理。在后面的文章中我将用Cesium结合A*实现依照地形的路径规划。 算法核心$$f = g + h$$ A*算法的核心在于它通过代价f来决定下一个要探索的节点。g为历史代价，从起始到当前节点的实际成本；h为预期代价，从当前节点到终点的估计成本。 计算过程 将起点加入开放列表（openList），这是一个待处理节点的集合。 重复以下过程直到开放列表为空。 从开放列表中选择f最小的节点作为当前节点。 如果当前节点是终点，则构造路径并结束。 否则，遍历当前节点的每一个邻居节点。 如果邻居节点已经被关闭，则忽略它。 反之，则计算它的f值，设置当前节点为它的父节点，并将其加入开放列表。 如果邻居节点已经被计算过f值，则检查通过当前节点到达该邻居节点是否提供了一条更短的路径。如果是，则更新它的g值和父节点。 将当前关闭并从开放列表移除。 如果开放列表为空而没有找到路径，则表示不存在从起点到目标...
在Cesium中实现飘动的红旗
前言实现飘动红旗的效果整体分两部，一是利用三角函数的周期性让红旗摆动起来，二是根据每个片元的摆动幅度来计算对应位置的阴影。这是我在一个园区项目中收到的需求，在此记录及分享实现过程。 基础场景搭建（创建cesium场景和必要的实体）这里使用gltf模型作为红旗，因为需要获得平滑的摆动效果，因此使用的模型面数较多，同时为了旗子与旗杆可以使用相同的坐标位置，我将模型的定位锚地放到了左上角（见下图，来自建模软件blender）。同样的，飘动的功能也可以手动创建Cesium中polygon或rectangle实体来完成，核心部分与使用gltf模型无异。 创建基础场景 12345678910111213141516171819202122232425262728Cesium.Ion.defaultAccessToken = "your token";const viewer = new Cesium.Viewer("cesiumContainer");viewer.camera.setView({ destination:...
Cesium基于地形的路径规划
前言 本文讨论的是如何根据起点和终点规划出一条避开大于指定坡度的最短路线，目的是研究A*算法的应用场景，加深对其的理解。 前置知识：理解A*算法，https://juejin.cn/post/7452166964440907817 注：实现过程中，非重点研究的算法直接使用了turfjs库计算，它是一个地理空间计算库。 实现思路 确认起点和终点位置。 根据起点和终点位置来确认出一片包含两者的矩形区域。 将矩形区域划分成均匀的网格。 计算每个网格的坡度。 设定一个坡度阈值，将坡度大于该阈值的网格视为障碍物。 基于上述结果，使用A*算法在可通行的网格中寻找最短路径。 1.确认起点和终点1234567891011121314151617181920212223242526let start = [108.99746771415697, 34.00421419748617];let end = [109.00550820307224, 33.99905943761618];//绘制起点viewer.entities.add({ position: Cesium...
Three.js高性能拟真草地
前言本文介绍如何使用Three.js渲染高性能拟真草地，如下图所示，渲染20000棵草并流畅运行。 初始场景创建threejs场景并添加天空球、地面，基础内容不再赘述。 123456789101112131415161718192021222324252627282930313233343536373839404142434445import * as THREE from "three";import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";let scene = new THREE.Scene();let camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000);camera.position.set(0, 9, 57)let renderer = new...