三维坐标映射二维坐标

MMSDT.mapped3to2()

三维坐标映射二维坐标，使二维div浮于指定三维目标上

构造函数

MMSDT.mapped3to2( position: array )

position - 当前坐标数组，[x,y,z]。

实时返回二维坐标，x对应left，y对应bottom，'null'在视野外了

代码示例

html代码：



<body>

	<div class="infoBox">
        ①号出口<br>通往道门口、通远门
	</div>
	
	<div class="infoBox">
        ②号出口<br>通往正大商场、中华路
	</div>
	
    <div class="infoBox">
	    ③号出口<br>通往朝天门码头、来福士
    </div>
    	
    <div class="infoBox">
	    ④号出口<br>通往临江门、洪崖洞
    </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 = 2;              //自动旋转速度
controls3.autoRotate = true;                //是否开启自动旋转

//使用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' ){
	    //渲染完成

	}else{
        //显示进度条数字
	    document.getElementById("loadNum").innerHTML = Math.round( progress )+'%';
	}
});   

var displayEnabled = true;

var info = [
    [ [-60,7,0], 'infoBox' ],     //对应的三维坐标位置, ClassName 或 Id
    [ [8,7,0], 'infoBox' ],
    [ [77,7,0], 'infoBox' ],
    [ [145,7,0], 'infoBox' ]
]

//监听鼠标控制器动作 
controls3.addEventListener( 'change', function(){ 
	
	if( displayEnabled == true ){           //div有效时才跟随
		
	    for( let i=0; i<info.length; i++ ){
            //把三维坐标转换成二维坐标
            let vector = MMSDT.mapped3to2( info[i][0] );
			          
            if( vector == 'null' ){
                //坐标点不在视野内，就隐藏信息
                document.getElementsByClassName( info[i][1] )[i].style.display = 'none';   
			    	
            }else{		
                //坐标点在视野内，就实时改变对应的二维div的位置
                document.getElementsByClassName( info[i][1] )[i].style.display = 'block';
                document.getElementsByClassName( info[i][1] )[i].style.bottom = vector.y + 20 + "px";
                document.getElementsByClassName( info[i][1] )[i].style.left = vector.x - 90 + "px";				
            };
        }	
		    
    }
		
});
	
	
//自定义对外函数接口------------------------------------------------------------------------
  
//显示隐藏
MMAPI.display = function(){
    displayEnabled = !displayEnabled;
    if( displayEnabled == false ){
        for( let i=0; i<document.getElementsByClassName( "infoBox" ).length; i++ ){
            document.getElementsByClassName( "infoBox" )[i].style.display = 'none';   
        }
    }
}

MMSDT.mapped3to2()

构造函数

MMSDT.mapped3to2( position: array )

代码示例

点击查看示例演示 →