WebGL实现自定义模型编辑

引言
三维前端可实现手动添加实体模型，来模拟建筑设施等建造的效果。若用户因视角原因不小心点到了错误地方或模型添加后的效果与理想中效果有差距，这时便需要手动拖动模型的功能，来达到用户的需求。
在这里插入图片描述

一、实现思路

主要通过鼠标监听事件，获取鼠标在场景的实时位置，从而更新选中模型的实时位置。
官网参考示例：
添加小品：
http://support.supermap.com.cn:8090/webgl/examples/editor.html#addSymbols
可视域分析：
http://support.supermap.com.cn:8090/webgl/examples/editor.html#viewshed3D

二、接口介绍

（1）setInputAction （action，type，modifier）：属于ScreenSpaceEventHandler类，用于设置鼠标输入事件。action表示输入事件发生需要执行的功能。
action 表示输入事件发生需要执行的功能,函数返回的值是屏幕坐标
type 鼠标事件类型（此Demo用到了鼠标移动和右键点击类型）
（2）updatePosition(position,id):属于primitive的方法
position 模型更新的位置，属于Cartesian3坐标类型
id 模型的id
（3）scene.pickPositon(windowPosition,result): 位置拾取，根据窗口坐标，从场景的深度缓冲区中拾取相应的位置，返回笛卡尔坐标,需要支持深度纹。
（4）scene.pick(windowPosition,):拾取场景中的图元。在此Demo中用于释放之前模型被选中的状态。

三、代码

（一）引用js文件。主要引用下图红框中的js文件
在这里插入图片描述
（二）模型移动。选择鼠标移动监听（MOUSE_MOVE）的方法，获取返回的屏幕坐标e值。再将屏幕坐标转换成世界坐标，以此来实现模型移动的效果。

var handpick = new Cesium.ScreenSpaceEventHandler(scene.canvas);
handpick.setInputAction(function(e) {
	var position = e.endPosition;//获取屏幕坐标
	var last = scene.pickPosition(position);//将屏幕坐标转成世界坐标
    if (viewer.selectedEntity) {
    	var instance = viewer.selectedEntity.primitive; //获取被选择的实体
    	var index = viewer.selectedEntity.id; //实体id
    	targetEntity = index;
    	var pos = instance._position;
    	instance.updatePosition(last, index); //更新模型的位置
    }					
    }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

（三）右键点击取消模型选择

handpick.setInputAction(function(e) {
	if (viewer.selectedEntity) {
	viewer.selectedEntity = null;//被选择的实体为空
	var obj = scene.pick(e.position);// 取消模型选择效果
	}
}, Cesium.ScreenSpaceEventType.RIGHT_CLICK);

具体代码可点击下方云盘链接获取：
链接：https://pan.baidu.com/s/1XDAz8HApBa0Ei3cpW6pe8A，提取码：0yhf