【超图+CESIUM】【基础API使用示例】50、超图｜CESIUM - moveLeft\moveRight\moveForward\moveBackward实现运动中的碰撞检测效果

前言

由于项目业务需要，所以实现了这四个api的碰撞检测效果。
核心是通过ray射线来做碰撞检测。

代码目录结构

核心代码

<ul class="btn-list"><li onclick="moveHandler('moveLeft')">moveLeft</li><li onclick="moveHandler('moveRight')">moveRight</li><li onclick="moveHandler('moveForward')">moveForward</li><li onclick="moveHandler('moveBackward')">moveBackword</li></ul>

function moveHandler (id) {const rate = 0.6const pos = getMoveTargetPosHandler(id, rate)setCameraViewerByDistanceHandler(id, rate, pos)}// 两点确定射线 并返回射线方向上的模型对象function getDirectionObj (pos) {const Cesium = window.Cesiumconst viewer = window.viewerconst start = viewer.camera.positionWCconst end = posconst direction = Cesium.Cartesian3.normalize(Cesium.Cartesian3.subtract(end, start, new Cesium.Cartesian3()), new Cesium.Cartesian3())const ray = new Cesium.Ray(start, direction)return viewer.scene.pickFromRay(ray)}// 获取两个坐标点间的距离function getDistanceHandler (obj, positionWC) {const dx = obj.x - positionWC.xconst dy = obj.y - positionWC.yconst dz = obj.z - positionWC.zreturn Math.sqrt(dx * dx + dy * dy + dz * dz)}// 根据碰撞到的物体和当前视角的距离判断是否进行视角movefunction setCameraViewerByDistanceHandler (id, rate, pos) {const obj = this.getDirectionObj(pos)if (obj) {const distance = this.getDistanceHandler(obj.position, window.viewer.camera.positionWC)console.log(distance);if (distance < 3) { // 视角和射线模型间的距离小于3时 认为碰撞到了 否则没有碰撞console.log('碰到了')} else {console.log('没碰到-----------')window.viewer.camera[id](rate)}} else {console.log('没碰到-----------')window.viewer.camera[id](rate)}}// 在相机实际移动之前获取到目标点位function getMoveTargetPosHandler (id, rate) {const Cesium = window.Cesiumconst Cartesian3 = Cesium.Cartesian3const viewer = window.viewerconst cameraPosition = viewer.camera.positionWCconst moveScratch = new Cartesian3()let amount = ratelet direction2 = viewer.camera.rightif (id === 'moveLeft') {amount = -ratedirection2 = viewer.camera.right} else if (id === 'moveRight') {amount = ratedirection2 = viewer.camera.right} else if (id === 'moveForward') {amount = ratedirection2 = viewer.camera.direction} else if (id === 'moveBackward') {amount = -ratedirection2 = viewer.camera.direction}moveScratch.x = direction2.x * amountmoveScratch.y = direction2.y * amountmoveScratch.z = direction2.z * amountconst pos = { x: 0, y: 0, z: 0 }pos.x = cameraPosition.x + moveScratch.xpos.y = cameraPosition.y + moveScratch.ypos.z = cameraPosition.z + moveScratch.zreturn pos}

完整代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>cesium实现碰撞检测</title><script src="./cesium/Cesium.js"></script><link href="./cesium/Widgets/widgets.css" rel="stylesheet" /><style>* {padding: 0;margin: 0;}html,body {width: 100%;height: 100%;}#cesium-container {width: 100%;height: 100%;}.btn-list {position: fixed;left: 100px;top: 100px;z-index: 10;list-style: none;}.btn-list li {padding: 4px 10px;width: 150px;height: 30px;background-color: #fff;border-radius: 4px;margin-bottom: 10px;cursor: pointer;display: flex;align-items: center;justify-content: center;}</style>
</head><body><div id="cesium-container" /><ul class="btn-list"><li onclick="moveHandler('moveLeft')">moveLeft</li><li onclick="moveHandler('moveRight')">moveRight</li><li onclick="moveHandler('moveForward')">moveForward</li><li onclick="moveHandler('moveBackward')">moveBackword</li></ul><script>window.onload = () => {initModelHandler()}// 初始化模型function initModelHandler () {Cesium.Ion.defaultAccessToken = '<YOUR KEY>'window.viewer = new Cesium.Viewer('cesium-container', {navigation: false, // 默认为true，是否显示导航罗盘控件。隐藏可在初始化场景时设置为falseanimation: false, // 是否创建动画小器件，左下角仪表baseLayerPicker: false, // 是否显示图层选择器,设置为true会报错：底图加载失败fullscreenButton: false, // 是否显示全屏按钮geocoder: false, // 是否显示geocoder搜索定位小器件，右上角查询按钮homeButton: false, // 是否显示Home按钮 回归到地球初始视角infoBox: false, // 是否显示信息框 一般点击模型图层的时候右上角出现的信息框的显隐sceneModePicker: false, // 是否显示3D/2D模式选择器selectionIndicator: true, // 是否显示选取指示器组件,例如点线面的点击聚焦等timeline: false, // 是否显示时间轴navigationHelpButton: false, // 是否显示右上角的帮助按钮contextOptions: {webgl: {alpha: true}}})initBaseMapHandler()}// 初始化生成基本底图function initBaseMapHandler () {viewEffectSet()setTdtMap()setFlyBuild()}function viewEffectSet () {const utc = Cesium.JulianDate.fromDate(new Date('2022/11/09 10:19:00'))// UTCconst viewer = window.viewerviewer.clock.currentTime = utc}function setTdtMap () {const viewer = window.viewerconst token = '<天地图token 自行获取>'viewer.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({// 影像底图url: 'http://t{s}.tianditu.com/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=' + token,subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],layer: 'tdtImgLayer',style: 'default',format: 'image/jpeg',tileMatrixSetID: 'GoogleMapsCompatible', // 使用谷歌的瓦片切片方式maximumLevel: 18,show: true}))viewer.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({url: 'http://t0.tianditu.gov.cn/cia_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cia&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=' + token,layer: 'tdtCiaLayer',style: 'default',format: 'image/jpeg',tileMatrixSetID: 'GoogleMapsCompatible',maximumLevel: 18,show: true}))}function setFlyBuild () {const viewer = window.viewerwindow.allLayer = {}const dataString = ['tilesetData/1-1/tileset.json']const data = []dataString.forEach(item => {data.push(viewer.scene.primitives.add(new Cesium.Cesium3DTileset({url: item})).readyPromise)})Promise.all(data).then(res => {// 终止图层加载res.forEach(item => {const name = item._url.split('/')[1]window.allLayer[name] = item})setPositonByParams({"x":120.53748437160127,"y":29.982328906436397,"z":3.327780264079696,"heading":1.9128323575101343,"pitch":-0.08794655996484324,"roll":6.283185036694795})})}function setPositonByParams ({ x, y, z, heading, pitch, roll }) {const viewer = window.viewerviewer.camera.setView({destination: new Cesium.Cartesian3.fromDegrees(x, y, z),orientation: {heading,pitch,roll}})}function moveHandler (id) {const rate = 0.6const pos = getMoveTargetPosHandler(id, rate)setCameraViewerByDistanceHandler(id, rate, pos)}function getDirectionObj (pos) {const Cesium = window.Cesiumconst viewer = window.viewer// const camPos = getCurrentPosition() // 经纬度坐标// const start = Cesium.Cartesian3.fromDegrees(camPos.x, camPos.y, camPos.z)// const end = Cesium.Cartesian3.fromDegrees(pos.x, pos.y, pos.z)const start = viewer.camera.positionWCconst end = posconst direction = Cesium.Cartesian3.normalize(Cesium.Cartesian3.subtract(end, start, new Cesium.Cartesian3()), new Cesium.Cartesian3())const ray = new Cesium.Ray(start, direction)return viewer.scene.pickFromRay(ray)}// 获取两个坐标点间的距离function getDistanceHandler (obj, positionWC) {const dx = obj.x - positionWC.xconst dy = obj.y - positionWC.yconst dz = obj.z - positionWC.zreturn Math.sqrt(dx * dx + dy * dy + dz * dz)}// 根据碰撞到的物体和当前视角的距离判断是否进行视角movefunction setCameraViewerByDistanceHandler (id, rate, pos) {const obj = this.getDirectionObj(pos)if (obj) {const distance = this.getDistanceHandler(obj.position, window.viewer.camera.positionWC)console.log(distance);if (distance < 3) {console.log('碰到了')} else {console.log('没碰到-----------')window.viewer.camera[id](rate)}} else {console.log('没碰到-----------')window.viewer.camera[id](rate)}}// 在相机实际移动之前获取到目标点位function getMoveTargetPosHandler (id, rate) {const Cesium = window.Cesiumconst Cartesian3 = Cesium.Cartesian3const viewer = window.viewerconst cameraPosition = viewer.camera.positionWCconst moveScratch = new Cartesian3()let amount = ratelet direction2 = viewer.camera.rightif (id === 'moveLeft') {amount = -ratedirection2 = viewer.camera.right} else if (id === 'moveRight') {amount = ratedirection2 = viewer.camera.right} else if (id === 'moveForward') {amount = ratedirection2 = viewer.camera.direction} else if (id === 'moveBackward') {amount = -ratedirection2 = viewer.camera.direction}moveScratch.x = direction2.x * amountmoveScratch.y = direction2.y * amountmoveScratch.z = direction2.z * amountconst pos = { x: 0, y: 0, z: 0 }pos.x = cameraPosition.x + moveScratch.xpos.y = cameraPosition.y + moveScratch.ypos.z = cameraPosition.z + moveScratch.zreturn pos}</script>
</body></html>

【超图+CESIUM】【基础API使用示例】50、超图｜CESIUM - moveLeft\moveRight\moveForward\moveBackward实现运动中的碰撞检测效果相关推荐

【超图+CESIUM】【基础API使用示例】04、超图｜CESIUM - 设置地图风格样式
前言缺少前置学习使用资料,请自行查阅:[https://blog.csdn.net/weixin_44402694/article/details/123110136](https://blog.c ...
【超图+CESIUM】【基础API使用示例】10、超图｜CESIUM - 场景出图、下载当前截图
前言缺少前置学习使用资料,请自行查阅:[https://blog.csdn.net/weixin_44402694/article/details/123110136](https://blog.c ...
【超图+CESIUM】【基础API使用示例】42、超图｜CESIUM - 绘制编辑线段｜读取kml文件绘制编辑｜导出kml线段数据
前言缺少前置学习使用资料,请自行查阅:[https://blog.csdn.net/weixin_44402694/article/details/123110136](https://blog.c ...
【超图+CESIUM】【基础API使用示例】38、超图｜CESIUM - 特效-云层设置
前言缺少前置学习使用资料,请自行查阅:[https://blog.csdn.net/weixin_44402694/article/details/123110136](https://blog.c ...
【超图+CESIUM】【基础API使用示例】41、超图｜CESIUM - 特效-雪景设置
前言缺少前置学习使用资料,请自行查阅:[https://blog.csdn.net/weixin_44402694/article/details/123110136](https://blog.c ...
【超图+CESIUM】【基础API使用示例】43、超图｜CESIUM - 绘制编辑面｜读取kml文件绘制编辑｜导出kml面数据
前言缺少前置学习使用资料,请自行查阅:[https://blog.csdn.net/weixin_44402694/article/details/123110136](https://blog.c ...
【超图+CESIUM】【基础API使用示例】22、超图｜CESIUM - 标绘面：Cesium.DrawHandler绘制面Cesium.DrawMode.Polygon
前言缺少前置学习使用资料,请自行查阅:[https://blog.csdn.net/weixin_44402694/article/details/123110136](https://blog.c ...
【超图+CESIUM】【基础API使用示例】16、超图｜CESIUM -设置地球模式：椭球模式、圆球模式
前言缺少前置学习使用资料,请自行查阅:[https://blog.csdn.net/weixin_44402694/article/details/123110136](https://blog.c ...
HTML5 Canvas 基础API和实例
开发HTML代码是一件简单的事情,一个文字编辑器,然后一个支持HTML5的浏览器即可(本人的浏览器是Firefox8.0.1).了解HTML的朋友应该知道,HTML5中最让人兴奋的API是canvas ...

【超图+CESIUM】【基础API使用示例】50、超图｜CESIUM - moveLeft\moveRight\moveForward\moveBackward实现运动中的碰撞检测效果

前言

代码目录结构

核心代码

完整代码

【超图+CESIUM】【基础API使用示例】50、超图｜CESIUM - moveLeft\moveRight\moveForward\moveBackward实现运动中的碰撞检测效果相关推荐

最新文章

热门文章