CSS3渲染

把HTML的DIV渲染到三维场景

参数

new MMSDT.CSS3( parameter )

parameter: 初始化参数

var parameter = [
{
element: document.getElementById( "china-map1" ), //html的id号
position: [-43.090,30,82.325], //该div所在的三维坐标位置
rotation: [0,-1.4,0], //该div所在的三维旋转
scale: 0.1, //画布缩放
visible: true, //初始化默认显示隐藏
lookAt: false, //是否面朝相机
}
]

属性

.updata()

CSS3实时渲染

 

.display(num)

对某个div显示隐藏

html代码示例

<div id="china-map1" style="width:800px;height:600px;display: none;"></div> <div id="china-map2" style="width:800px;height:600px;display: none;"></div>

javascript代码示例

//参数 var parameter = [ { element: document.getElementById( "china-map1" ), //html的id号 position: [-43.090,30,82.325], //该div所在的三维坐标位置 rotation: [0,-1.4,0], //该div所在的三维旋转 scale: 0.1, //画布缩放 visible: true, //初始化默认显示隐藏 lookAt: false, //是否面朝相机 }, { element: document.getElementById( "china-map2" ), position: [-28.685,70,-133.861], rotation: [0,0.2,0], scale: 0.05, visible: true, lookAt: true, } ] var CSS3DObject = new MMSDT.CSS3( parameter ); //初始化CSS3 //监听鼠标控制器动作 controls.addEventListener( 'change', function(){ CSS3DObject.updata(); //CSS3实时渲染 }); //使用MMAPI类，自定义外部函数接口 MMAPI.electCSS3 = function(num){ switch(num) { case undefined: //全部隐藏 CSS3DObject.display(); break; case 0: //显示1 CSS3DObject.display(0); break; case 1: //显示2 CSS3DObject.display(1); break; } }

在线演示