cesium中实现鼠标拖动实体功能

实现在三维场景中对添加到场景中的s3m小品模型进行拖拽重新定位

let modelDragHandler;
function openEntityDrag() {
     let self = this;
     if (!modelDragHandler) {
         modelDragHandler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
         modelDragHandler.setInputAction(({
             position
         }) => { // 为viewer绑定MOUSE_DOWN事件监听器(执行函数,监听的事件)
             const pickInfo = viewer.scene.pick(position);
             if (!pickInfo) {
                 return;
             }; // 如果点击空白区域,则不往下执行
             viewer.scene.screenSpaceCameraController.enableRotate = false; // 将相机锁定,不然后续移动实体时相机也会动
             modelDragHandler.setInputAction((arg) => { // 为viewer绑定MOUSE_MOVE事件监听器(执行函数,监听的事件)
                 const position = arg.endPosition; // arg有startPosition与endPosition两个属性,即移动前后的位置信息:Cartesian2对象
                 const cartesian = viewer.scene.globe.pick(viewer.camera.getPickRay(position),viewer.scene); //将Cartesian2转为Cartesian3
                     const selectedEntity = viewer.selectedEntity; // 实体
                     if(!selectedEntity) {
                         return false;
                     }
                 let instance = selectedEntity.primitive;
                 // instance._position = cartesian;// 更新实体位置为当前鼠标位置
                 let oldPosition = selectedEntity.primitive.position;
                 instance.updatePosition(cartesian);
             }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

             modelDragHandler.setInputAction(({
                 position
             }) => { //为viewer绑定LEFT_UP事件监听器(执行函数,监听的事件)
                 modelDragHandler.removeInputAction(Cesium.ScreenSpaceEventType.MOUSE_MOVE); // 解除viewer的MOUSE_MOVE事件监听器
                 modelDragHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_UP); // 解除viewer的LEFT_UP事件监听器
                 viewer.scene.screenSpaceCameraController.enableRotate = true; // 取消相机锁定
             }, Cesium.ScreenSpaceEventType.LEFT_UP)

         }, Cesium.ScreenSpaceEventType.LEFT_DOWN)

     }
 }

实现效果

在这里插入图片描述

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
实现cesium鼠标拖动模型移动,可以按照以下步骤进行操作: 1. 绑定鼠标事件:在cesium,可以使用viewer的canvas对象来绑定鼠标事件,如下所示: ```javascript viewer.canvas.addEventListener('mousedown', onMouseDown, false); viewer.canvas.addEventListener('mousemove', onMouseMove, false); viewer.canvas.addEventListener('mouseup', onMouseUp, false); ``` 2. 获取鼠标位置:在鼠标事件处理函数,可以通过event对象获取鼠标位置,如下所示: ```javascript function onMouseDown(event) { mouseDown = true; mouseX = event.clientX; mouseY = event.clientY; } function onMouseMove(event) { if (mouseDown) { var dx = event.clientX - mouseX; var dy = event.clientY - mouseY; // TODO: 移动模型 mouseX = event.clientX; mouseY = event.clientY; } } function onMouseUp(event) { mouseDown = false; } ``` 3. 移动模型:在鼠标移动事件处理函数,可以计算鼠标移动的距离,然后根据距离移动模型。具体实现方式可以参考以下代码: ```javascript function onMouseMove(event) { if (mouseDown) { var dx = event.clientX - mouseX; var dy = event.clientY - mouseY; var scene = viewer.scene; var pickResult = scene.pick(new Cesium.Cartesian2(event.clientX, event.clientY)); if (pickResult && pickResult.node) { var node = pickResult.node; var modelMatrix = node.modelMatrix; var translation = new Cesium.Cartesian3(dx, dy, 0); var inverseModelMatrix = Cesium.Matrix4.inverse(modelMatrix, new Cesium.Matrix4()); var translationInModelCoordinates = Cesium.Matrix4.multiplyByPoint(inverseModelMatrix, translation, new Cesium.Cartesian3()); Cesium.Matrix4.setTranslation(modelMatrix, translationInModelCoordinates, modelMatrix); } mouseX = event.clientX; mouseY = event.clientY; } } ``` 以上代码,首先通过scene.pick方法获取鼠标所在位置的模型节点,然后计算模型节点的modelMatrix和鼠标移动的距离,最后通过Cesium.Matrix4.setTranslation方法将模型移动到新的位置。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值