MMSDT.bindingCSS3()
把CSS+DIV窗口渲染到到场景。
Tips: 该函数只能执行一次
Tips: 该函数只能控制本页面的div，不能控制以iframe方式嵌入的父子页面的div。
Tips: 鼠标事件不支持a标签和click，需监听pointerdown和pointermove。
构造函数
MMSDT.bindingCSS3( parameters: object )
parameters - 数组，包含json格式的参数。
属性
.position( arrayIndex, position )
改变指定div的位置
arrayIndex - 字符串，参数里的数组下标
position - 数组，x,y,z坐标
.rotation( arrayIndex, rotation )
改变指定div的旋转弧度
arrayIndex - 字符串，参数里的数组下标
rotation - 数组，x,y,z旋转弧度
.scale( arrayIndex, scale )
改变指定div的缩放大小
arrayIndex - 字符串，参数里的数组下标
scale - 字符串，缩放大小
.lookAt( arrayIndex, lookAt )
改变指定div是否面朝相机
arrayIndex - 字符串，参数里的数组下标
lookAt - 布尔值，是否面朝相机
.visible( arrayIndex, Boolean )
指定div隐藏还是显示
arrayIndex - 字符串，参数里的数组下标
Boolean - 布尔值，false隐藏，true显示
.dispose()
销毁该函数内容
html代码
<body>
<div class="infoBox">
①号出口<br>通往道门口、通远门<br>
<button class="btn">关闭</button>
</div>
<div class="infoBox">
②号出口<br>通往正大商场、中华路<br>
<button class="btn">关闭</button>
</div>
<div class="infoBox">
③号出口<br>通往朝天门码头、来福士<br>
<button class="btn">关闭</button>
</div>
<div class="infoBox">
④号出口<br>通往临江门、洪崖洞<br>
<button class="btn">关闭</button>
</div>
<div class="infoBox">
R1103号列车<br>开往沙坪坝<br>
<button class="btn">关闭</button>
</div>
<div class="infoBox">
R1107号列车<br>开往解放碑<br>
<button class="btn">关闭</button>
</div>
</body>
js代码
var MMS3D_exceptionMesh = []; //需要材质拆分的网格
var MMS3D_instancingMesh = []; //合并实例化网格
//初始化场景
MMSDT.initScene( false, MMS3D_exceptionMesh, MMS3D_instancingMesh );
//设置第3人称鼠标控制器
controls3.maxPolarAngle = Math.PI*0.49; //向下，最大角度限制
controls3.maxDistance = 500; //最远距离限制
controls3.screenSpacePanning = false; //右键平移是否上下移动
controls3.enableDamping = true; //是否开启惯性阻尼
controls3.dampingFactor = 0.1; //惯性阻尼系数
controls3.autoRotateSpeed = 1; //自动旋转速度
//使用json文件让场景还原
MMSDT.onloadScene( "models/mms3D_dtz1.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' ){
//渲染完成
renderDone();
}else{
//显示进度条数字
document.getElementById("loadNum").innerHTML = Math.round( progress )+'%';
}
});
function renderDone(){
//给运动列车绑定图标
var arr = [
[ '1_1', 'R01' ], //运动子网格模型的名字，需要绑定的图标id号
[ '4_1', 'R02' ],
]
var offset = {
scale: 1, //重新设置热点大小（覆盖MMSDT.addIcon中的大小）
position: [0,0,0], //相对坐标点高度（覆盖MMSDT.addIcon中的高度）
}
//执行绑定
MMSDT.bindingIcon( arr, offset, function(data){
//实时位置改变
divLabel.position( 4, [data[0].x,data[0].y+5,data[0].z] );
divLabel.position( 5, [data[1].x,data[1].y+5,data[1].z] );
})
}
MMSDT.getJson( "models/equip_dtz2.json", function(dataJson){
//添加IoT设备图标
var options = {
dirUrl: 'models/equip/', //安装目录
scale: 1, //缩放比例
height: 0, //相对高度
visible: false, //默认显示
animate: false, //上下浮动
lookAt: true, //是否垂直约束
color: 0x1197ff, //默认颜色
}
MMSDT.addIcon( dataJson, options);
});
//二维div信息框映射参数
var infos = [
{
divDom: document.getElementsByClassName( 'infoBox' )[0], //对应三维坐标的div信息框
position: [-60,15,0], //对应的三维坐标
rotation: [0,Math.PI*1.5,0], //对应的旋转弧度
scale: 0.1, //缩放大小
lookAt: false, //是否面朝相机，true自动面朝相机，false固定方向
},{
divDom: document.getElementsByClassName( 'infoBox' )[1],
position: [8,15,0],
rotation: [0,Math.PI*1.5,0],
scale: 0.1,
lookAt: false,
},{
divDom: document.getElementsByClassName( 'infoBox' )[2],
position: [77,15,0],
rotation: [0,Math.PI*0.5,0],
scale: 0.1,
lookAt: false,
},{
divDom: document.getElementsByClassName( 'infoBox' )[3],
position: [145,15,0],
rotation: [0,Math.PI*0.5,0],
scale: 0.1,
lookAt: false,
},{
divDom: document.getElementsByClassName( 'infoBox' )[4],
position: [0,0,0],
rotation: [0,0,0],
scale: 0.1,
lookAt: true,
},{
divDom: document.getElementsByClassName( 'infoBox' )[5],
position: [0,0,0],
rotation: [0,0,0],
scale: 0.1,
lookAt: true,
}
]
var divLabel = new MMSDT.bindingCSS3(infos); //信息框映射
for( let i=0; i<infos.length; i++ ){
document.getElementsByClassName( 'btn' )[i].addEventListener( 'pointerdown', function(){
divLabel.visible(i, false); //隐藏指定的div
},false);
document.getElementsByClassName( 'btn' )[i].addEventListener( 'pointermove', function(){
document.getElementsByClassName( 'btn' )[i].style.cursor = "pointer"; //鼠标显示手型
},false);
}
//自定义对外函数接口------------------------------------------------------------------------
//全部显示
MMAPI.display = function(){
for( let i=0; i<infos.length; i++ ){
divLabel.visible(i, true);
}
}
//改变朝向
var lookUs = false;
MMAPI.changeLook = function(){
lookUs = !lookUs;
for( let i=0; i<4; i++ ){
divLabel.lookAt( i, lookUs ); //对应的infoBox数组下标，朝向
}
}
//改变旋转
MMAPI.changeRot = function(value){
for( let i=0; i<4; i++ ){
divLabel.rotation( i, [0,value,0] ); //对应的infoBox数组下标，新的旋转
}
}
//改变大小
MMAPI.changeSca = function(value){
for( let i=0; i<infos.length; i++ ){
divLabel.scale( i, value ); //对应的infoBox数组下标，新的大小
}
}
//位置改变
MMAPI.changePos = function(value){
divLabel.position( 0, [-60,value,0] ); //对应的infoBox数组下标，新的位置
divLabel.position( 1, [8,value,0] );
divLabel.position( 2, [77,value,0] );
divLabel.position( 3, [145,value,0] );
}
//全部删除
MMAPI.removeDiv = function(){
divLabel.dispose(); //销毁该函数内容
}
//重新添加
MMAPI.addDiv = function(){
divLabel = new MMSDT.bindingCSS3(infos);
}
点击查看示例演示 →
Powered by mms3D