鼠标单击双击事件监听

MMSDT.mouseDownEvent()

       鼠标单击双击的事件监听,包括IoT设备的图标,场景中的模型元素等,并判断鼠标左右键,返回模型坐标等。

构造函数

      MMSDT.mouseDownEvent( onDown:function, onDouble:function, iotDown:function, iotDouble:function )

       onDown(obj,button,position) - 回调函数, 鼠标单击场景中的模型元素,参数为当前移入的模型子网格名字和鼠标左右键字符串'left'、'right'。

       onDouble(obj,button,position) - 回调函数, 鼠标双击场景中的模型元素,参数为当前移入的模型子网格名字和鼠标左右键字符串'left'、'right'。

       iotDown(obj,button) - 回调函数, 鼠标单击设备图标,参数为当前移入的设备图标子网格和鼠标左右键字符串'left'、'right'。

       iotDouble(obj,button) - 回调函数, 鼠标双击设备图标,参数为当前移入的设备图标子网格和鼠标左右键字符串'left'、'right'。

代码示例

var MMS3D_exceptionMesh = ['dmxx328','dmxx362','dmxx388']; //需要材质拆分的网格 var MMS3D_instancingMesh = []; //合并实例化网格 //初始化场景 MMSDT.initScene( false, MMS3D_exceptionMesh, MMS3D_instancingMesh ); //设置第3人称鼠标控制器 controls3.maxPolarAngle = Math.PI*0.49; //向下,最大角度限制 controls3.maxDistance = 1000; //最远距离限制 controls3.screenSpacePanning = false; //右键平移是否上下移动 controls3.enableDamping = true; //是否开启惯性阻尼 controls3.dampingFactor = 0.1; //惯性阻尼系数 controls3.autoRotateSpeed = 2; //自动旋转速度 //使用json文件让场景还原 MMSDT.onloadScene( "models/mms3D_cangku1.json", function(progress){ if( progress == 'done' ){ //加载完成,播放动画 for( var i=0; i<actions[0].length; i++ ){ actions[0][i].play(); actions[0][i].timeScale = 0.5; } }else if( progress == 'ok' ){ //渲染完成 onloadDone(); }else{ //显示进度条数字 document.getElementById("loadNum").innerHTML = Math.round( progress )+'%'; } }); //读取json设备信息并加载 MMSDT.getJson( "models/equip_cangku1.json", function(dataJson){ //IoT设备模型 var options1 = { dirUrl: 'models/equip/', //String(安装目录) scale: 2.5, //Number(设备模型大小缩放,在已编辑的大中小基础上) height: 0, //相对高度 visible: true, //Boolean(默认是否显示,true显示,false隐藏) } MMSDT.addModel(dataJson, options1); //载入IoT设备 //添加IoT设备图标 var options2 = { dirUrl: 'models/equip/', //安装目录 scale: 1, //缩放比例 height: 16, //相对高度 visible: true, //默认显示 animate: true, //上下浮动 lookAt: true, //是否垂直约束 color: 0x1197ff, //默认颜色 } new MMSDT.addIcon( dataJson, options2); }); MMSDT.getJson( "models/equip_cangku3.json", function(dataJson){ //添加机器手臂图标 var options3 = { dirUrl: 'models/equip/', //安装目录 scale: 1.5, //缩放比例 height: 50, //相对高度 visible: true, //默认显示 animate: true, //上下浮动 lookAt: true, //是否垂直约束 color: 0xffff00, //默认颜色 } new MMSDT.addIcon( dataJson, options3); }); //场景加载完成 function onloadDone(){ //对场景中包含子网格进行监听 var meshEvent = new MMSDT.mouseChildEvent( ['dmxx328','dmxx362','dmxx388'], true ); //true点击事件正常监测, false或空则遮挡有效 //移入场景模型 var onMove = function(name){ MMSDT.bloom(name); //网格发光 MMSDT.superposition(name,0xff0000); //网格变色 document.body.title = '单击显示信息,双击聚焦'; } //移出场景模型 var outMove = function(){ MMSDT.bloom(); //移出模型发光关闭 MMSDT.superposition(); //移出模型变色恢复 document.body.title = ''; } //移入设备图标 var onIot = function(icon){ MMSDT.superposition(icon.id,0xff0000); //指定图标变色 MMSDT.bloom(icon.id); //指定图标发光 document.body.title = '单击显示信息,双击聚焦'; } //移出设备图标 var outIot = function(){ MMSDT.bloom(); //移出图标发光关闭 MMSDT.superposition(); //移出图标变色恢复 document.body.title = ''; } MMSDT.mouseMoveEvent( onMove, outMove, onIot, outIot ); //初始化鼠标移入移出事件 //鼠标单击场景中的模型 var onDown = function( obj, buttons, position ){ if( buttons == 'left' ){ positions = position; //获取当前点击的模型坐标 document.getElementsByClassName("infoBox")[0].style.display = "block"; //单击显示信息 document.getElementsByClassName("infoBox")[0].innerHTML = "机器人编号:
"+obj.name; //显示内容 } } //鼠标双击场景中的模型 var onDouble = function( obj, buttons, position ){ if( buttons == 'left' ){ MMSDT.controlsTarget( position, 100, 1000 ); //双击聚焦 } } //鼠标单击设备图标 var iotDown = function(icon, buttons){ if( buttons == 'left' ){ document.getElementsByClassName("infoBox")[0].style.display = "block"; //单击显示信息 if( icon.userData.name == undefined ){ positions = [ icon.position.x, icon.position.y, icon.position.z ]; //获取当前点击的图标坐标 document.getElementsByClassName("infoBox")[0].innerHTML = "该设备id:
"+icon.name.id; //显示图标内容 }else{ //获取该IOT子设备的世界坐标 var centroid = new MMS3D.Vector3(); icon.getWorldPosition(centroid); positions = [ centroid.x, centroid.y, centroid.z ]; //获取当前点击的IOT子设备坐标 document.getElementsByClassName("infoBox")[0].innerHTML = "该设备id:
"+icon.userData.name.id; //显示设备模型里的内容 } } } //鼠标双击设备图标 var iotDouble = function(icon, buttons){ if( buttons == 'left' ){ if( icon.userData.name == undefined ){ MMSDT.controlsTarget( [icon.position.x, icon.position.y, icon.position.z], 100, 1000 ); //双击图标聚焦 }else{ //获取该IOT子设备的世界坐标 var centroid = new MMS3D.Vector3(); icon.getWorldPosition(centroid); MMSDT.controlsTarget( [centroid.x, centroid.y, centroid.z], 100, 1000 ); //双击设备模型聚焦 } } } MMSDT.mouseDownEvent( onDown, onDouble, iotDown, iotDouble ); //初始化鼠标点击事件 animate(); //循环动画 } var positions = null; //当前信息框坐标 function animate(){ requestAnimationFrame( animate ); //实时更新信息框的位置 if( positions != null ){ var vector = MMSDT.mapped3to2( positions ); document.getElementsByClassName("infoBox")[0].style.bottom = vector.y + 20 + "px"; document.getElementsByClassName("infoBox")[0].style.left = vector.x - 90 + "px"; } } //自定义对外函数接口------------------------------------------------------------------------ //镜头复位 MMAPI.resetButton = function(){ controls3.maxDistance = 1000; MMAPI.resCamera(); document.getElementsByClassName("infoBox")[0].style.display = "none"; //信息框关闭 positions = null; //位置为空 }

点击查看示例演示 →