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; //位置为空
}
点击查看示例演示 →
Powered by mms3D