```
var build_jifang_365_component = function(scope, element, $compile, $timeout, $sce){
var component = scope.component;
//控件需要的HTML
var html = [];
html.push('<div style="position:relative;">');
html.push("<div style='width:100%;height:100%;' id='jifang' onload='component.context.draw();'></div>");
html.push('<div style="position:absolute;top:0;left:-100px;width:100px;height:100%;background:#f7eee4;box-shadow: 2px 0 5px #c0c0c0;transition: all ease 0.6s;" class="menu">');
html.push('<div style="min-height: 30px;float: right;margin-right: 10px;padding-top: 23px;cursor: pointer;" class="close-menu">');
html.push('<img src="/cdn/img/jifang/close.png">');
html.push('</div>');
html.push('<ul class="three_send_item" style="margin-top: 50px;">');
html.push('<li ng-show="component.config.navTv" class="three_send_item_tv" style="text-align:center;height: 30px;line-height: 30px;"><a style="color:#333;" href="javascript:;">电视</a></li>');
html.push('<li ng-show="component.config.navJk1" class="three_send_item_jk1" style="text-align:center;height: 30px;line-height: 30px;"><a style="color:#333;" href="javascript:;">监控一区</a></li>');
html.push('<li ng-show="component.config.navJk2" class="three_send_item_jk2" style="text-align:center;height: 30px;line-height: 30px;"><a style="color:#333;" href="javascript:;">监控二区</a></li>');
html.push('<li ng-show="component.config.navKongtiao" class="three_send_item_kongtiao" style="text-align:center;height: 30px;line-height: 30px;"><a style="color:#333;" href="javascript:;">空调</a></li>');
html.push('<li ng-show="component.config.navMengjing" class="three_send_item_mengjing" style="text-align:center;height: 30px;line-height: 30px;"><a style="color:#333;" href="javascript:;">门禁</a></li>');
html.push('<li ng-show="component.config.navLogo" class="three_send_item_logo" style="text-align:center;height: 30px;line-height: 30px;"><a style="color:#333;" href="javascript:;">公司logo</a></li>');
html.push('<li ng-show="component.config.navBox1" class="three_send_item_box1" style="text-align:center;height: 30px;line-height: 30px;"><a style="color:#333;" href="javascript:;">一号机柜</a></li>');
html.push('<li ng-show="component.config.navBox2" class="three_send_item_box2" style="text-align:center;height: 30px;line-height: 30px;"><a style="color:#333;" href="javascript:;">二号机柜</a></li>');
html.push('<li ng-show="component.config.navBox3" class="three_send_item_box3" style="text-align:center;height: 30px;line-height: 30px;"><a style="color:#333;" href="javascript:;">三号机柜</a></li>');
html.push('<li ng-show="component.config.navBox4" class="three_send_item_box4" style="text-align:center;height: 30px;line-height: 30px;"><a style="color:#333;" href="javascript:;">四号机柜</a></li>');
html.push('<li ng-show="component.config.navBox5" class="three_send_item_box5" style="text-align:center;height: 30px;line-height: 30px;"><a style="color:#333;" href="javascript:;">五号机柜</a></li>');
html.push('<li ng-show="component.config.navBox6" class="three_send_item_box6" style="text-align:center;height: 30px;line-height: 30px;"><a style="color:#333;" href="javascript:;">六号机柜</a></li>');
html.push('<li ng-show="component.config.navBox_dian1" class="three_send_item_navBox_dian1" style="text-align:center;height: 30px;line-height: 30px;"><a style="color:#333;" href="javascript:;">一号电机</a></li>');
html.push('<li ng-show="component.config.navBox_dian2" class="three_send_item_navBox_dian2" style="text-align:center;height: 30px;line-height: 30px;"><a style="color:#333;" href="javascript:;">二号电机</a></li>');
html.push('</ul>');
html.push('</div>');
html.push('<div ng-show="component.config.nav" style="position:absolute;top:0px;left:0px;background:#fff;width: 25px;height: 25px;border-radius:2px;cursor: pointer;transition: all ease 0.6s;" class="b-wrap">');
html.push('<div class="mhead">');
html.push('<img style="margin-top: 2px;margin-left: 2px;" class="menu-ham" src="/cdn/img/jifang/hamburger.png">');
html.push('</div>');
html.push('</div>');
var el = $compile(html.join(""))( scope );
element.append(el);
// 全局变量
scope.component.context.domWidth = $('#'+scope.component.id+' #compContent').width();
scope.component.context.domHeight = $('#'+scope.component.id+' #compContent').height();
scope.component.context.matArrayA=[];//外墙
scope.component.context.matArrayB = [];//内墙
scope.component.context.matArrayC = [];
scope.component.context.dummy= new THREE.Object3D();//门基类
scope.component.context.plant = new THREE.Object3D(); //花基类1
scope.component.context.plant1 = new THREE.Object3D(); //花基类2
scope.component.context.dbclick = 0;
// 渲染器
scope.component.context.initRender = function() {
scope.component.context.renderer = new THREE.WebGLRenderer({antialias: true});
scope.component.context.renderer.setPixelRatio(window.devicePixelRatio);
//
scope.component.context.renderer.setSize(scope.component.context.domWidth, scope.component.context.domHeight);
//
scope.component.context.renderer.setClearColor(0xf0f0f0);
//
scope.component.context.renderer.shadowMap.enabled = false;
// 获取元素
var dom = document.getElementById('jifang')
console.log(dom);
//插入到dom
$('#'+scope.component.id+' #jifang')[0].appendChild(scope.component.context.renderer.domElement);
}
// 相机
scope.component.context.initCamera = function() {
//相机设置
scope.component.context.camera = new THREE.PerspectiveCamera(75, scope.component.context.domWidth / scope.component.context.domHeight, 0.1, 20000);
// 相机位置
scope.component.context.camera.position.set(0,500,1000);
}
// 场景
scope.component.context.initScene = function() {
scope.component.context.scene = new THREE.Scene();
}
//天空盒1
scope.component.context.initSceneBox1 = function() {
//路径
scope.component.context.path = "http://ae01.alicdn.com/kf/"; //设置路径
var format = '.jpg'; //设定格式
scope.component.context.urls = [
scope.component.context.path + 'HTB1GBRUhpooBKNjSZFPq6xa2XXa5'+ format,
scope.component.context.path + 'HTB1nqDXm98YBeNkSnb4q6yevFXa0'+ format,
scope.component.context.path + 'HTB13tL9vkOWBuNjSsppq6xPgpXay' + format,
scope.component.context.path + 'HTB1VELXvgaTBuNjSszfq6xgfpXac' + format,
scope.component.context.path + 'HTB1PLbTvf9TBuNjy1zbq6xpepXao' + format,
scope.component.context.path + 'HTB1bxWzmZuYBuNkSmRyq6AA3pXa8' + format
];
scope.component.context.textureCube = new THREE.CubeTextureLoader().load( scope.component.context.urls );
scope.component.context.scene.background = scope.component.context.textureCube; //作为背景贴图
}
// 灯光
scope.component.context.initLight = function() {
scope.component.context.directionalLight = new THREE.DirectionalLight( 0xffffff,1 );
scope.component.context.directionalLight.position.set( 0, 100, 0).normalize();
scope.component.context.scene.add( scope.component.context.directionalLight );
//A end
scope.component.context.ambient = new THREE.AmbientLight( 0xffffff,1 );
scope.component.context.ambient.position.set(0,0,0);
scope.component.context.scene.add( scope.component.context.ambient );
}
//创建地板
scope.component.context.createFloor = function(){
scope.component.context.footerloader = new THREE.TextureLoader();
scope.component.context.footerloader.load("/cdn/img/jifang/floor.jpg",function(texture){
texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
texture.repeat.set( 10, 10 );
scope.component.context.floorGeometry = new THREE.BoxGeometry(2000, 2000, 10);
scope.component.context.floorMaterial = new THREE.MeshBasicMaterial( { map: texture, side: THREE.DoubleSide } );
scope.component.context.floor = new THREE.Mesh(scope.component.context.floorGeometry, scope.component.context.floorMaterial);
scope.component.context.floor.position.y = -0.5;
scope.component.context.floor.rotation.x = Math.PI / 2;
scope.component.context.scene.add(scope.component.context.floor);
});
//茶色：0x58ACFA 透明玻璃色：0XECF1F3
scope.component.context.glass_material=new THREE.MeshBasicMaterial( { color: 0XECF1F3});
scope.component.context.glass_material.opacity=0.4;
scope.component.context.glass_material.transparent=true;
scope.component.context.createCubeWall(20, 200, 2000,0,scope.component.context.matArrayB,-801,100,0);
scope.component.context.createCubeWall(20, 200, 2000,0,scope.component.context.matArrayB,801,100,0);
}
//创建墙
scope.component.context.createCubeWall = function(width, height, depth,angle,material,x,y,z){
var cubeGeometry = new THREE.BoxGeometry(width, height, depth );
var cube = new THREE.Mesh( cubeGeometry, material );
cube.position.x = x;
cube.position.y = y;
cube.position.z = z;
cube.rotation.y += angle*Math.PI; //y轴旋转
// console.log(cube)
scope.component.context.scene.add(cube);
}
scope.component.context.createCubeMen = function(width, height, depth,angle,material,x,y,z,name){
var cubeGeometry = new THREE.BoxGeometry(width, height, depth );
var cube = new THREE.Mesh( cubeGeometry, material );
cube.position.x = x;
cube.position.y = y;
cube.position.z = z;
cube.rotation.y += angle*Math.PI; //y轴旋转
// console.log(cube)
cube.name = name
scope.component.context.scene.add(cube);
}
//创建上下顶部
scope.component.context.createCubeWallTop = function(width, height, depth,angle,material,x,y,z){
var cubeGeometryTop = new THREE.BoxGeometry(width, height, depth );
var cubeTop = new THREE.Mesh( cubeGeometryTop, material );
cubeTop.position.x = x;
cubeTop.position.y = y;
cubeTop.position.z = z;
cubeTop.rotation.z += angle*Math.PI; //z轴旋转
scope.component.context.scene.add(cubeTop);
}
//创建墙体
scope.component.context.returnWallObject = function(width, height, depth,angle,material,x,y,z){
var cubeGeometry = new THREE.BoxGeometry(width, height, depth);
var cube = new THREE.Mesh( cubeGeometry, material );
cube.position.x = x;
cube.position.y = y;
cube.position.z = z;
cube.rotation.y += angle*Math.PI;
return cube;
}
//创建墙纹理
scope.component.context.createWallMaterail = function(){
var leafTexturetest = new THREE.TextureLoader().load('/cdn/img/jifang/rack_door_back.jpg');
var leafTexturemen = new THREE.TextureLoader().load('/cdn/img/jifang/rack_front_door.jpg');
scope.component.context.matArrayA.push(new THREE.MeshPhongMaterial({color: 0xafc0ca})); //前 0xafc0ca :灰色
scope.component.context.matArrayA.push(new THREE.MeshPhongMaterial({color: 0xafc0ca})); //后
scope.component.context.matArrayA.push(new THREE.MeshPhongMaterial({color: 0xd6e4ec})); //上 0xd6e4ec： 偏白色
scope.component.context.matArrayA.push(new THREE.MeshPhongMaterial({color: 0xd6e4ec})); //下
scope.component.context.matArrayA.push(new THREE.MeshPhongMaterial({color: 0xafc0ca})); //左 0xafc0ca :灰色
scope.component.context.matArrayA.push(new THREE.MeshPhongMaterial({color: 0xafc0ca})); //右
scope.component.context.matArrayB.push(new THREE.MeshPhongMaterial({color: 0xafc0ca})); //前 0xafc0ca :灰色
scope.component.context.matArrayB.push(new THREE.MeshPhongMaterial({color: 0x9cb2d1})); //后 0x9cb2d1：淡紫
scope.component.context.matArrayB.push(new THREE.MeshPhongMaterial({color: 0xd6e4ec})); //上 0xd6e4ec： 偏白色
scope.component.context.matArrayB.push(new THREE.MeshPhongMaterial({color: 0xd6e4ec})); //下
scope.component.context.matArrayB.push(new THREE.MeshPhongMaterial({color: 0xafc0ca})); //左 0xafc0ca :灰色
scope.component.context.matArrayB.push(new THREE.MeshPhongMaterial({color: 0xafc0ca})); //右
scope.component.context.matArrayC.push(new THREE.MeshPhongMaterial({color: 0x999999,map:leafTexturemen}));
scope.component.context.matArrayC.push(new THREE.MeshPhongMaterial({color: 0xafc0ca,map:leafTexturetest}));
scope.component.context.matArrayC.push(new THREE.MeshPhongMaterial({color: 0x999999,map:leafTexturetest}));
scope.component.context.matArrayC.push(new THREE.MeshPhongMaterial({color: 0x999999,map:leafTexturetest}));
scope.component.context.matArrayC.push(new THREE.MeshPhongMaterial({color: 0xafc0ca,map:leafTexturetest}));
scope.component.context.matArrayC.push(new THREE.MeshPhongMaterial({color: 0xafc0ca,map:leafTexturetest}));
}
//墙体瓦门
scope.component.context.createResultBsp = function(bsp,less_bsp,mat){
switch(mat)
{
case 1:
var material = new THREE.MeshPhongMaterial({color:0x9cb2d1,specular:0x9cb2d1,shininess:30,transparent:true,opacity:1});
break;
case 2:
var material = new THREE.MeshPhongMaterial({color:0xafc0ca,specular:0xafc0ca,shininess:30,transparent:true,opacity:1});
break;
case 3:
var material = new THREE.MeshPhongMaterial({color:0xafc0ca,specular:0xafc0ca,shininess:30,transparent:true,opacity:1});
break;
case 4:
var material = new THREE.MeshPhongMaterial({color:0xafc0ca,specular:0xafc0ca,shininess:30,transparent:true,opacity:1});
break;
default:
}
var sphere1BSP = new ThreeBSP(bsp);
var cube2BSP = new ThreeBSP(less_bsp);//0x9cb2d1 淡紫,0xC3C3C3 白灰 , 0xafc0ca灰
var resultBSP = sphere1BSP.subtract(cube2BSP);
var result = resultBSP.toMesh(material);
result.material.flatshading = THREE.FlatShading;
result.geometry.computeFaceNormals(); //重新计算几何体侧面法向量
result.geometry.computeVertexNormals();
result.material.needsUpdate = true; //更新纹理
result.geometry.buffersNeedUpdate = true;
result.geometry.uvsNeedUpdate = true;
scope.component.context.scene.add(result);
}
//房间布局
scope.component.context.createLayout = function(){
// 墙面1 立方体比较长的面 左一
var wallleft = scope.component.context.returnWallObject(10, 200, 900,0,scope.component.context.matArrayB,-651,100,0);
// 墙面2 立方体比较长的面 右一
scope.component.context.createCubeWall(10, 200, 900,1,scope.component.context.matArrayB,651,100,0);
// 墙面3 门对面的墙 立方体比较短的面
scope.component.context.createCubeWall(10, 200, 1310,1.5,scope.component.context.matArrayB,0,100,-451);
// 墙面4 带门的面
var wall = scope.component.context.returnWallObject(1310, 200,10,0,scope.component.context.matArrayB,0,100,455);
// 门框
var door_cube = scope.component.context.returnWallObject(100, 180,10,0,scope.component.context.matArrayB,0,90,455);
scope.component.context.createResultBsp(wall,door_cube,1);
//门
var loader=new THREE.TextureLoader();
loader.load("/cdn/img/jifang/door_right.png",function(texture){
var doorgeometry = new THREE.BoxGeometry(100, 180, 2);
var doormaterial = new THREE.MeshBasicMaterial({map:texture,color:0xffffff});
doormaterial.opacity=1.0;
doormaterial.transparent=true;
door = new THREE.Mesh( doorgeometry,doormaterial);
door.position.set(-50,0,0);
var door1 = door.clone();
door1.position.set(50,0,0);
door1.visible=false;
scope.component.context.dummy.add(door);
scope.component.context.dummy.add(door1);
scope.component.context.dummy.position.set(50,90,451)
scope.component.context.scene.add(scope.component.context.dummy);
});
// 门框
var door_cube1 = scope.component.context.returnWallObject(500, 120,900,0.5,scope.component.context.matArrayB,-651,100,0);
scope.component.context.createResultBsp(wallleft,door_cube1,3);
//窗子
var glass_material=new THREE.MeshBasicMaterial( { color: 0x58ACFA});
glass_material.opacity=0.3;
glass_material.transparent=true;
scope.component.context.createCubeWall(0, 120,520,0,glass_material,-651,100,10);
}
//场景物体函数
scope.component.context.initModel = function() {
var helper = new THREE.AxesHelper(50);
scope.component.context.scene.add(helper);
// 创建空调
var cubeGeometry = new THREE.BoxGeometry(25, 150, 60);
var texture = THREE.ImageUtils.loadTexture('/cdn/img/jifang/aircondition.jpg');
var cubeMaterial = new THREE.MeshLambertMaterial({
color: 0xffffff,
map: texture
});
var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
cube.name = "cube"
//设置位置
cube.position.x = -600;
cube.position.y = 80;
cube.position.z = -400;
cube.rotation.y = -0.25 * Math.PI;
//添加空调到场景
scope.component.context.scene.add(cube);
// 电视
var tvGeometry = new THREE.BoxGeometry(250, 150, 10);
var tvtexture = THREE.ImageUtils.loadTexture('/cdn/img/jifang/tv.jpg');
var tvcubeMaterial = new THREE.MeshLambertMaterial({
color: 0xffffff,
map: tvtexture
});
var tv = new THREE.Mesh(tvGeometry, tvcubeMaterial);
tv.name = "tv"
console.log(tv)
tv.position.x = 650;
tv.position.y = 100;
tv.position.z = 10;
tv.rotation.y = -0.5 * Math.PI;
//添加到场景
scope.component.context.scene.add(tv);
// 门禁
var AccessGeometry = new THREE.BoxGeometry(30, 40, 5);
var Accesstexture = THREE.ImageUtils.loadTexture('/cdn/img/jifang/doorControl.jpg');
var AccesscubeMaterial = new THREE.MeshLambertMaterial({
color: 0xffffff,
map: Accesstexture
});
var access = new THREE.Mesh(AccessGeometry, AccesscubeMaterial);
access.name = 'access';
access.position.x = -90;
access.position.y = 130;
access.position.z = 460;
scope.component.context.scene.add(access);
// logo
var logoGeometry = new THREE.BoxGeometry(200, 50, 0);
var logotexture = THREE.ImageUtils.loadTexture('/cdn/img/jifang/logo.png');
var logocubeMaterial = new THREE.MeshLambertMaterial({
color: 0xffffff,
map: logotexture
});
logocubeMaterial.opacity=1.0;
logocubeMaterial.transparent=true;
var logo = new THREE.Mesh(logoGeometry, logocubeMaterial);
logo.name = "logo"
logo.position.x = -350;
logo.position.y = 100;
logo.position.z = 460;
scope.component.context.scene.add(logo);
// 监控1
var jkGeometry = new THREE.PlaneGeometry(50, 40, 0);
var jktexture = THREE.ImageUtils.loadTexture('/cdn/img/jifang/jk.png');
var jkcubeMaterial = new THREE.MeshLambertMaterial({
color: 0xffffff,
map: jktexture
});
jkcubeMaterial.opacity=1.0;
jkcubeMaterial.transparent=true;
var jk = new THREE.Mesh(jkGeometry, jkcubeMaterial);
jk.name = "jiankongone"
jk.position.x = 550;
jk.position.y = 170;
jk.position.z = -440;
scope.component.context.scene.add(jk);
// 监控2
var jkGeometry2 = new THREE.PlaneGeometry(50, 40, 0);
var jktexture2 = THREE.ImageUtils.loadTexture('/cdn/img/jifang/jk.png');
var jkcubeMaterial2 = new THREE.MeshLambertMaterial({
color: 0xffffff,
map: jktexture2
});
jkcubeMaterial2.opacity=1.0;
jkcubeMaterial2.transparent=true;
var jk2 = new THREE.Mesh(jkGeometry2, jkcubeMaterial2);
jk2.name = "jiankongtow"
jk2.position.x = -550;
jk2.position.y = 170;
jk2.position.z = -440;
scope.component.context.scene.add(jk2);
// 机房公告牌
var messageGeometry = new THREE.BoxGeometry(100, 150, 0);
var messagetexture = THREE.ImageUtils.loadTexture('/cdn/img/jifang/message.jpg');
var messagecubeMaterial = new THREE.MeshLambertMaterial({
color: 0xffffff,
map: messagetexture
});
var message = new THREE.Mesh(messageGeometry, messagecubeMaterial);
message.name = "message"
message.position.x = -50;
message.position.y = 100;
message.position.z = -445;
scope.component.context.scene.add(message);
// 消防展示栏
var extinguisherGeometry = new THREE.BoxGeometry(200, 100, 0);
var extinguishertexture = THREE.ImageUtils.loadTexture('/cdn/img/jifang/fire_extinguisher_side.jpg');
var extinguishercubeMaterial = new THREE.MeshLambertMaterial({
color: 0xffffff,
map: extinguishertexture
});
var extinguisher = new THREE.Mesh(extinguisherGeometry, extinguishercubeMaterial);
extinguisher.name = "extinguisher"
extinguisher.position.x = 350;
extinguisher.position.y = 130;
extinguisher.position.z = 445;
scope.component.context.scene.add(extinguisher);
//警告
var warninggeometry = new THREE.CylinderBufferGeometry( 20, 0, 60, 60 );
var warninggeometryextinguishertexture = THREE.ImageUtils.loadTexture('/cdn/img/jifang/down.png');
var warningmaterial = new THREE.MeshLambertMaterial({
// color: 0xffff00,
map: warninggeometryextinguishertexture
});
var warning = new THREE.Mesh( warninggeometry, warningmaterial );
warning.position.x = -120;
warning.position.y = 170;
warning.position.z = 20;
warning.name = "warning"
warning.visible = false;
scope.component.context.scene.add( warning );
// 花盆1
var geometry = new THREE.CylinderBufferGeometry( 20, 15, 60, 20 );
var geometryextinguishertexture = THREE.ImageUtils.loadTexture('/cdn/img/jifang/bbb.png');
var material = new THREE.MeshLambertMaterial({
// color: 0xffff00,
map: geometryextinguishertexture
});
var cylinder = new THREE.Mesh( geometry, material );
cylinder.position.x = 0;
cylinder.position.y = 0.2;
cylinder.position.z = 0;
scope.component.context.plant.add( cylinder );
var leafTexture = new THREE.TextureLoader().load('/cdn/img/jifang/plant.png');
var leafMaterial = new THREE.MeshBasicMaterial({map:leafTexture,side:THREE.DoubleSide,transparent:true});
var geom = new THREE.PlaneGeometry(50, 60);
for(var i=0;i<4;i++){
var leaf = new THREE.Mesh( geom, leafMaterial );
leaf.position.y = 60;
leaf.rotation.y = -Math.PI/(i+1);
scope.component.context.plant.add(leaf);
}
scope.component.context.plant.position.set(580,30,-250)
scope.component.context.scene.add(scope.component.context.plant);
// 花盆2
var geometry1 = new THREE.CylinderBufferGeometry( 20, 15, 60, 20 );
var geometryextinguishertexture1 = THREE.ImageUtils.loadTexture('/cdn/img/jifang/bbb.png');
var material1 = new THREE.MeshLambertMaterial({
// color: 0xffff00,
map: geometryextinguishertexture1
});
var cylinder1 = new THREE.Mesh( geometry1, material1 );
cylinder1.position.x = 0;
cylinder1.position.y = 0.2;
cylinder1.position.z = 0;
scope.component.context.plant1.add( cylinder1 );
var leafTexture1 = new THREE.TextureLoader().load('/cdn/img/jifang/plant.png');
var leafMaterial1 = new THREE.MeshBasicMaterial({map:leafTexture1,side:THREE.DoubleSide,transparent:true});
var geom1 = new THREE.PlaneGeometry(50, 60);
for(var i=0;i<4;i++){
var leaf1 = new THREE.Mesh( geom1, leafMaterial1 );
leaf1.position.y = 60;
leaf1.rotation.y = -Math.PI/(i+1);
scope.component.context.plant1.add(leaf1);
}
scope.component.context.plant1.position.set(580,30,250)
scope.component.context.scene.add(scope.component.context.plant1);
// 机柜盒子1
var box1 = new THREE.BoxBufferGeometry( 70, 150, 70 );
//纹理
var boxtexture1 = THREE.ImageUtils.loadTexture("/cdn/img/jifang/rack.jpg");
var boxtexture2= THREE.ImageUtils.loadTexture("/cdn/img/jifang/rack.jpg");
var boxtexture3 = THREE.ImageUtils.loadTexture("/cdn/img/jifang/rack.jpg");
var boxtexture4= THREE.ImageUtils.loadTexture("/cdn/img/jifang/rack.jpg");
var boxtexture5 = THREE.ImageUtils.loadTexture("/cdn/img/jifang/rack_front_door.jpg");
var boxtexture6 = THREE.ImageUtils.loadTexture("/cdn/img/jifang/rack.jpg");
var materialArr=[
//贴图
new THREE.MeshPhongMaterial({map:boxtexture1}),
new THREE.MeshPhongMaterial({map:boxtexture2}),
new THREE.MeshPhongMaterial({map:boxtexture3}),
new THREE.MeshPhongMaterial({map:boxtexture4}),
new THREE.MeshPhongMaterial({map:boxtexture5}),
new THREE.MeshPhongMaterial({map:boxtexture6})
];
//6个面不一样的
var facematerial=new THREE.MeshFaceMaterial(materialArr);
var box1_1 = new THREE.Mesh(box1,facematerial);//
box1_1.position.set(-200,80,0)
box1_1.name = 'box1'
scope.component.context.scene.add(box1_1);
// 机柜盒子2
var box2 = new THREE.BoxBufferGeometry( 70, 150, 70 );
//纹理
var boxtexture1 = THREE.ImageUtils.loadTexture("/cdn/img/jifang/rack.jpg");
var boxtexture2= THREE.ImageUtils.loadTexture("/cdn/img/jifang/rack.jpg");
var boxtexture3 = THREE.ImageUtils.loadTexture("/cdn/img/jifang/rack.jpg");
var boxtexture4= THREE.ImageUtils.loadTexture("/cdn/img/jifang/rack.jpg");
var boxtexture5 = THREE.ImageUtils.loadTexture("/cdn/img/jifang/rack_front_door.jpg");
var boxtexture6 = THREE.ImageUtils.loadTexture("/cdn/img/jifang/rack.jpg");
var materialArr=[
//贴图
new THREE.MeshPhongMaterial({map:boxtexture1}),
new THREE.MeshPhongMaterial({map:boxtexture2}),
new THREE.MeshPhongMaterial({map:boxtexture3}),
new THREE.MeshPhongMaterial({map:boxtexture4}),
new THREE.MeshPhongMaterial({map:boxtexture5}),
new THREE.MeshPhongMaterial({map:boxtexture6})
];
//6个面不一样的
var facematerial=new THREE.MeshFaceMaterial(materialArr);
var box2_1 = new THREE.Mesh(box2,facematerial);//
box2_1.position.set(-200,80,200)
box2_1.name = 'box2'
scope.component.context.scene.add(box2_1);
// 机柜盒子3
var box3 = new THREE.BoxBufferGeometry( 70, 150, 70 );
//纹理
var boxtexture1 = THREE.ImageUtils.loadTexture("/cdn/img/jifang/rack.jpg");
var boxtexture2= THREE.ImageUtils.loadTexture("/cdn/img/jifang/rack.jpg");
var boxtexture3 = THREE.ImageUtils.loadTexture("/cdn/img/jifang/rack.jpg");
var boxtexture4= THREE.ImageUtils.loadTexture("/cdn/img/jifang/rack.jpg");
var boxtexture5 = THREE.ImageUtils.loadTexture("/cdn/img/jifang/rack_front_door.jpg");
var boxtexture6 = THREE.ImageUtils.loadTexture("/cdn/img/jifang/rack.jpg");
var materialArr=[
//贴图
new THREE.MeshPhongMaterial({map:boxtexture1}),
new THREE.MeshPhongMaterial({map:boxtexture2}),
new THREE.MeshPhongMaterial({map:boxtexture3}),
new THREE.MeshPhongMaterial({map:boxtexture4}),
new THREE.MeshPhongMaterial({map:boxtexture5}),
new THREE.MeshPhongMaterial({map:boxtexture6})
];
//6个面不一样的
var facematerial=new THREE.MeshFaceMaterial(materialArr);
var box3_1 = new THREE.Mesh(box3,facematerial);//
box3_1.position.set(-200,80,-200)
box3_1.name = 'box3'
scope.component.context.scene.add(box3_1);
// 机柜盒子4
var box4 = new THREE.BoxBufferGeometry( 70, 150, 70 );
//纹理
var boxtexture1 = THREE.ImageUtils.loadTexture("/cdn/img/jifang/rack.jpg");
var boxtexture2= THREE.ImageUtils.loadTexture("/cdn/img/jifang/rack.jpg");
var boxtexture3 = THREE.ImageUtils.loadTexture("/cdn/img/jifang/rack.jpg");
var boxtexture4= THREE.ImageUtils.loadTexture("/cdn/img/jifang/rack.jpg");
var boxtexture5 = THREE.ImageUtils.loadTexture("/cdn/img/jifang/rack_front_door.jpg");
var boxtexture6 = THREE.ImageUtils.loadTexture("/cdn/img/jifang/rack.jpg");
var materialArr=[
//贴图
new THREE.MeshPhongMaterial({map:boxtexture1}),
new THREE.MeshPhongMaterial({map:boxtexture2}),
new THREE.MeshPhongMaterial({map:boxtexture3}),
new THREE.MeshPhongMaterial({map:boxtexture4}),
new THREE.MeshPhongMaterial({map:boxtexture5}),
new THREE.MeshPhongMaterial({map:boxtexture6})
];
//6个面不一样的
var facematerial=new THREE.MeshFaceMaterial(materialArr);
var box4_1 = new THREE.Mesh(box4,facematerial);//
box4_1.position.set(-400,80,-200)
box4_1.name = 'box4'
scope.component.context.scene.add(box4_1);
// 机柜盒子5
var box5 = new THREE.BoxBufferGeometry( 70, 150, 70 );
//纹理
var boxtexture1 = THREE.ImageUtils.loadTexture("/cdn/img/jifang/rack.jpg");
var boxtexture2= THREE.ImageUtils.loadTexture("/cdn/img/jifang/rack.jpg");
var boxtexture3 = THREE.ImageUtils.loadTexture("/cdn/img/jifang/rack.jpg");
var boxtexture4= THREE.ImageUtils.loadTexture("/cdn/img/jifang/rack.jpg");
var boxtexture5 = THREE.ImageUtils.loadTexture("/cdn/img/jifang/rack_front_door.jpg");
var boxtexture6 = THREE.ImageUtils.loadTexture("/cdn/img/jifang/rack.jpg");
var materialArr=[
//贴图
new THREE.MeshPhongMaterial({map:boxtexture1}),
new THREE.MeshPhongMaterial({map:boxtexture2}),
new THREE.MeshPhongMaterial({map:boxtexture3}),
new THREE.MeshPhongMaterial({map:boxtexture4}),
new THREE.MeshPhongMaterial({map:boxtexture5}),
new THREE.MeshPhongMaterial({map:boxtexture6})
];
//6个面不一样的
var facematerial=new THREE.MeshFaceMaterial(materialArr);
var box5_1 = new THREE.Mesh(box5,facematerial);//
box5_1.position.set(-400,80,0)
box5_1.name = 'box5'
scope.component.context.scene.add(box5_1);
// 机柜盒子6
var box6 = new THREE.BoxBufferGeometry( 70, 150, 70 );
//纹理
var boxtexture1 = THREE.ImageUtils.loadTexture("/cdn/img/jifang/rack.jpg");
var boxtexture2= THREE.ImageUtils.loadTexture("/cdn/img/jifang/rack.jpg");
var boxtexture3 = THREE.ImageUtils.loadTexture("/cdn/img/jifang/rack.jpg");
var boxtexture4= THREE.ImageUtils.loadTexture("/cdn/img/jifang/rack.jpg");
var boxtexture5 = THREE.ImageUtils.loadTexture("/cdn/img/jifang/rack_front_door.jpg");
var boxtexture6 = THREE.ImageUtils.loadTexture("/cdn/img/jifang/rack.jpg");
var materialArr=[
//贴图
new THREE.MeshPhongMaterial({map:boxtexture1}),
new THREE.MeshPhongMaterial({map:boxtexture2}),
new THREE.MeshPhongMaterial({map:boxtexture3}),
new THREE.MeshPhongMaterial({map:boxtexture4}),
new THREE.MeshPhongMaterial({map:boxtexture5}),
new THREE.MeshPhongMaterial({map:boxtexture6})
];
//6个面不一样的
var facematerial=new THREE.MeshFaceMaterial(materialArr);
var box6_1 = new THREE.Mesh(box6,facematerial);//
box6_1.position.set(-400,80,200)
box6_1.name = 'box6'
scope.component.context.scene.add(box6_1);
// 电箱1
var box_dian1 = new THREE.BoxBufferGeometry( 300, 150, 50 );
//纹理
var boxtexture1 = THREE.ImageUtils.loadTexture("/cdn/img/jifang/rack.jpg");
var boxtexture2= THREE.ImageUtils.loadTexture("/cdn/img/jifang/rack.jpg");
var boxtexture3 = THREE.ImageUtils.loadTexture("/cdn/img/jifang/rack.jpg");
var boxtexture4= THREE.ImageUtils.loadTexture("/cdn/img/jifang/rack.jpg");
var boxtexture5 = THREE.ImageUtils.loadTexture("/cdn/img/jifang/rack_front_door.jpg");
var boxtexture6 = THREE.ImageUtils.loadTexture("/cdn/img/jifang/rack.jpg");
var materialArr=[
//贴图
new THREE.MeshPhongMaterial({map:boxtexture1}),
new THREE.MeshPhongMaterial({map:boxtexture2}),
new THREE.MeshPhongMaterial({map:boxtexture3}),
new THREE.MeshPhongMaterial({map:boxtexture4}),
new THREE.MeshPhongMaterial({map:boxtexture5}),
new THREE.MeshPhongMaterial({map:boxtexture6})
];
//6个面不一样的
var facematerial=new THREE.MeshFaceMaterial(materialArr);
var box_dian1_1 = new THREE.Mesh(box_dian1,facematerial);//
box_dian1_1.position.set(230,80,-320)
box_dian1_1.name = 'box_dian1'
scope.component.context.scene.add(box_dian1_1);
// 电箱2
var box_dian2 = new THREE.BoxBufferGeometry( 300, 150, 50 );
//纹理
var boxtexture1 = THREE.ImageUtils.loadTexture("/cdn/img/jifang/rack.jpg");
var boxtexture2= THREE.ImageUtils.loadTexture("/cdn/img/jifang/rack.jpg");
var boxtexture3 = THREE.ImageUtils.loadTexture("/cdn/img/jifang/rack.jpg");
var boxtexture4= THREE.ImageUtils.loadTexture("/cdn/img/jifang/rack.jpg");
var boxtexture5 = THREE.ImageUtils.loadTexture("/cdn/img/jifang/rack_front_door.jpg");
var boxtexture6 = THREE.ImageUtils.loadTexture("/cdn/img/jifang/rack.jpg");
var materialArr=[
//贴图
new THREE.MeshPhongMaterial({map:boxtexture1}),
new THREE.MeshPhongMaterial({map:boxtexture2}),
new THREE.MeshPhongMaterial({map:boxtexture3}),
new THREE.MeshPhongMaterial({map:boxtexture4}),
new THREE.MeshPhongMaterial({map:boxtexture5}),
new THREE.MeshPhongMaterial({map:boxtexture6})
];
//6个面不一样的
var facematerial=new THREE.MeshFaceMaterial(materialArr);
var box_dian2_1 = new THREE.Mesh(box_dian2,facematerial);//
box_dian2_1.position.set(230,80,-180)
box_dian2_1.name = 'box_dian2'
scope.component.context.scene.add(box_dian2_1);
}
//插入dmo
scope.component.context.initStats = function() {
scope.component.context.stats = new Stats();
$('#'+scope.component.id+' #jifang')[0].appendChild(scope.component.context.stats.dom);
}
// 鼠标控制
scope.component.context.initControls = function() {
scope.component.context.controls = new THREE.OrbitControls(scope.component.context.camera, scope.component.context.renderer.domElement);
scope.component.context.controls.enableDamping = true;
scope.component.context.controls.enableZoom = true;
scope.component.context.controls.autoRotate = false;
scope.component.context.controls.autoRotateSpeed = 0.5;
scope.component.context.controls.minDistance = 1;
scope.component.context.controls.maxDistance = 2000;
scope.component.context.controls.enablePan = true;
}
scope.component.context.render = function() {
//更新
scope.component.context.controls.update();
}
//窗口大小适应
scope.component.context.onWindowResize = function() {
scope.component.context.camera.aspect = scope.component.context.domWidth / scope.component.context.domHeight;
scope.component.context.camera.updateProjectionMatrix();
scope.component.context.renderer.setSize(scope.component.context.domWidth, scope.component.context.domHeight);
}
scope.component.context.animate = function() {
//渲染
scope.component.context.render();
//更新
scope.component.context.stats.update();
scope.component.context.renderer.render(scope.component.context.scene, scope.component.context.camera);
// scene.rotation.x += 0.01;
// console.log(scope.component.config.sceneX)
if(scope.component.config.sceneX){
scope.component.context.scene.rotation.y += 0.01;
}
requestAnimationFrame(scope.component.context.animate);
}
//初始化对象
scope.component.context.initObject = function(){
scope.component.context.createWallMaterail(); //墙体纹理
scope.component.context.createFloor(); //地板
scope.component.context.createLayout(); //房间布局
}
scope.component.context.draw = function() {
//判断支持webgl
if (!Detector.webgl) Detector.addGetWebGLMessage();
scope.component.context.initRender();
scope.component.context.initScene();
scope.component.context.initCamera();
scope.component.context.initLight();
scope.component.context.initObject();
scope.component.context.initSceneBox1();
scope.component.context.initModel();
scope.component.context.initControls();
scope.component.context.initStats();
scope.component.context.animate();
scope.component.context.onWindowResize();
}
scope.component.context.draw();
console.log(scope)
$("#"+scope.component.id+" .menu-ham").click(function () {
$("#"+scope.component.id+" .menu").animate({left: '0px'}, 100);
$("#"+scope.component.id+" .b-wrap").animate({left: '100px'}, 100);
});
$("#"+scope.component.id+" .close-menu").click(function () {
$("#"+scope.component.id+" .menu").animate({left: '-100px'}, 100);
$("#"+scope.component.id+" .b-wrap").animate({left: '0px'}, 100);
});
// 事件系列
// 默认展示数据
if(scope.component.config.defShow){
//多媒体
var index = layer.open({
type: 2,
content: scope.component.config.defUrl,
area: ['630px', '360px'],
maxmin: true
});
layer.full(index);
}
// 电视
$("#"+scope.component.id+" .three_send_item .three_send_item_tv").click(function () {
if(scope.component.config.tvUrl != undefined || scope.component.config.tvUrl != null ||scope.component.config.tvUrl){
//多媒体
layer.open({
type: 2,
title: false,
area: ['630px', '360px'],
shade: 0.8,
closeBtn: 0,
shadeClose: true,
content: scope.component.config.tvUrl
});
}
});
//监控1
$("#"+scope.component.id+" .three_send_item .three_send_item_jk1").click(function () {
if(scope.component.config.jk1Url != undefined ||scope.component.config.jk1Url != null ||scope.component.config.jk1Url ){
//多媒体
layer.open({
type: 2,
title: false,
area: ['630px', '360px'],
shade: 0.8,
closeBtn: 0,
shadeClose: true,
content: '/js/definition.html?url='+scope.component.config.jk1Url
});
}
});
// 监控2
$("#"+scope.component.id+" .three_send_item .three_send_item_jk2").click(function () {
console.log(scope.component.config.jk2Url)
if(scope.component.config.jk2Url != undefined || scope.component.config.jk2Url != null || scope.component.config.jk2Url ){
//多媒体
layer.open({
type: 2,
title: false,
area: ['630px', '360px'],
shade: 0.8,
closeBtn: 0,
shadeClose: true,
content: '/js/definition.html?url='+scope.component.config.jk2Url
});
}
});
// logo
$("#"+scope.component.id+" .three_send_item .three_send_item_logo").click(function () {
console.log(scope.component.config.logoUrl)
if(scope.component.config.logoUrl != undefined || scope.component.config.logoUrl != null || scope.component.config.logoUrl ){
var index = layer.open({
type: 2,
content: scope.component.config.logoUrl,
area: ['630px', '360px'],
maxmin: true
});
layer.full(index);
}
});
//门禁
$("#"+scope.component.id+" .three_send_item .three_send_item_mengjing").click(function () {
console.log(scope.component.config.mengjingUrl)
if(scope.component.config.mengjingUrl != undefined || scope.component.config.mengjingUrl != null || scope.component.config.mengjingUrl ){
var index = layer.open({
type: 2,
content: scope.component.config.mengjingUrl,
area: ['630px', '360px'],
maxmin: true
});
layer.full(index);
}
});
//空调
$("#"+scope.component.id+" .three_send_item .three_send_item_kongtiao").click(function () {
console.log(scope.component.config.kongtiaoUrl)
if(scope.component.config.kongtiaoUrl != undefined || scope.component.config.kongtiaoUrl != null || scope.component.config.kongtiaoUrl ){
var index = layer.open({
type: 2,
content: scope.component.config.kongtiaoUrl,
area: ['630px', '360px'],
maxmin: true
});
layer.full(index);
}
});
//一号机柜
$("#"+scope.component.id+" .three_send_item .three_send_item_box1").click(function () {
console.log(scope.component.config.box1_url)
if(scope.component.config.box1_url != undefined || scope.component.config.box1_url != null || scope.component.config.box1_url ){
var index = layer.open({
type: 2,
content: scope.component.config.box1_url,
area: ['630px', '360px'],
maxmin: true
});
layer.full(index);
}
});
//二号机柜
$("#"+scope.component.id+" .three_send_item .three_send_item_box2").click(function () {
console.log(scope.component.config.box2_url)
if(scope.component.config.box2_url != undefined || scope.component.config.box2_url != null || scope.component.config.box2_url ){
var index = layer.open({
type: 2,
content: scope.component.config.box2_url,
area: ['630px', '360px'],
maxmin: true
});
layer.full(index);
}
});
//三号机柜
$("#"+scope.component.id+" .three_send_item .three_send_item_box3").click(function () {
console.log(scope.component.config.box3_url)
if(scope.component.config.box3_url != undefined || scope.component.config.box3_url != null || scope.component.config.box3_url ){
var index = layer.open({
type: 2,
content: scope.component.config.box3_url,
area: ['630px', '360px'],
maxmin: true
});
layer.full(index);
}
});
//四号机柜
$("#"+scope.component.id+" .three_send_item .three_send_item_box4").click(function () {
console.log(scope.component.config.box4_url)
if(scope.component.config.box4_url != undefined || scope.component.config.box4_url != null || scope.component.config.box4_url ){
var index = layer.open({
type: 2,
content: scope.component.config.box4_url,
area: ['630px', '360px'],
maxmin: true
});
layer.full(index);
}
});
//五号机柜
$("#"+scope.component.id+" .three_send_item .three_send_item_box5").click(function () {
console.log(scope.component.config.box5_url)
if(scope.component.config.box5_url != undefined || scope.component.config.box5_url != null || scope.component.config.box5_url ){
var index = layer.open({
type: 2,
content: scope.component.config.box5_url,
area: ['630px', '360px'],
maxmin: true
});
layer.full(index);
}
});
//六号机柜
$("#"+scope.component.id+" .three_send_item .three_send_item_box6").click(function () {
console.log(scope.component.config.box6_url)
if(scope.component.config.box6_url != undefined || scope.component.config.box6_url != null || scope.component.config.box6_url ){
var index = layer.open({
type: 2,
content: scope.component.config.box6_url,
area: ['630px', '360px'],
maxmin: true
});
layer.full(index);
}
});
//一号电机
$("#"+scope.component.id+" .three_send_item .three_send_item_navBox_dian1").click(function () {
console.log(scope.component.config.box_dian1_url)
if(scope.component.config.box_dian1_url != undefined || scope.component.config.box_dian1_url != null || scope.component.config.box_dian1_url ){
var index = layer.open({
type: 2,
content: scope.component.config.box_dian1_url,
area: ['630px', '360px'],
maxmin: true
});
layer.full(index);
}
});
//二号电机
$("#"+scope.component.id+" .three_send_item .three_send_item_navBox_dian2").click(function () {
console.log(scope.component.config.box_dian2_url)
if(scope.component.config.box_dian2_url != undefined || scope.component.config.box_dian2_url != null || scope.component.config.box_dian2_url ){
var index = layer.open({
type: 2,
content: scope.component.config.box_dian2_url,
area: ['630px', '360px'],
maxmin: true
});
layer.full(index);
}
});
//刷新控件渲染，可直接将designer.js中的方法复制过来
var refreshChartView = function(){
//配置的维度
var dimensions = component.config.datasourceConfig.dimensions;
//配置的度量
var measures = component.config.datasourceConfig.measures;
//服务器端返回的查询数据
var data = component.context.data;
//TODO: 使用新数据对控件进行渲染
};
//接收控件刷新数据的事件
scope.$on(event_refreshComponentData, function(target, param){
scope.queryComponentData(param, {
onSuccess: function(){
refreshChartView(scope, element, component, $compile);
}
});
});
//接收联动事件，可直接将designer.js中的方法复制过来
scope.$on(event_chartDimensionValueChange, function(s, event){
});
//页面过滤，可直接将designer.js中的方法复制过来
scope.component.context.getPageFilter = function(){
var result = [];
return result;
}
}
```
- video
- treemap
- mian.html文件注释
- 配置项tab
- 配置项属性
- internalRefreshAxisMdelData函数梳理
- 函数配置项-engine文件
- 替换数据源流程
- design.js
- 树图
- 下钻 废弃
- 人体图
- 下钻地图
- 行列互转
- 预览样式
- logo旁边的报表名
- echarts 组件生成图片
- 数据集样式
- 头部 黑色head
- 手机 ipad 图片
- k线图部分
- 平台管理css样式
- 目录css和平板的边距
- 设计页-数据源-目录
- 数据集 - 查看数据表 -按钮和目录样式
- 报表列表页按钮css
- 角色管理页按钮css
- 推送通知按钮css
- 子账号按钮css
- 数据连接
- openlayers地图线路图
- openlayers4_map_designer.js
- openlayers4_map_view.js
- 说明
- 常用图标小bug
- echarts 气泡地图
- echarts 线路轨迹图
- 导出pdf
- 可视化sql--css
- 表格滚动
- 主题色
- 时间轴
- 分享弹框
- 管理平台header和菜单
- 报表平台和菜单
- 初始化组件颜色
- 其他弹框
- olap分析样式-废弃
- 3d地图柱状图
- 关系图
- olap分析
- 地区地图
- k线图相关属性设置
- 世界地图
- 时间轴（new）
- 选择省份下转地图
- 选择省市飞线地图
- 面积预警地图默认颜色
- 组件覆层开关组件
- 汽车仪表盘bug
- 雷达图bug修复不能分享的问题
- 饼状 条形图 自动播放
- 临时用
- 自动轮播
- 方形元素 按钮浮动报错
- 面积预警地图整合可选择省市区
- 下钻地图添加返回按钮
- 下钻地图修复预警bug
- 基本时间组件
- 添加时钟组件
- 3d地球组件
- 盒须图
- 组件加载动画
- 报表背景渐变色
- 主题模板
- 没用
- 3机房第三方组件
- 设计
- 分享
- 3d机房需要的静态资源
- cesium地球需要的文件以及样式
- cesium地球
- 设计页
- 分享页
- 图标条形图
- 世豪-前端代码整理
- component.css 文件新添加
- 杂项
- index.jsp
- designer.css 样式暂时不整理 里面比较杂
- vs-common.js 新加生成html2canvas pdf
- vs-component-basic.js 完
- vs-component-datasource.js 完
- vs-component-engine.js 完
- vs-component-widget-grid.js 完
- vs-component-widget-square.js 完
- vs-designer.js 完
- vs-designer-component.js 完
- vs-designer-report.js 完
- vs-designer-reportpage.js 完
- vs-component-echarts.js 完
- main.html 完
- component.html 新加组件设置页模板
- 以前的报表页设置控制器---做个记录
- 大概修改过的代码
- 2019-5-8 修改皮肤控制器
- 选择模板
- 桑基图2019-11-20
- bug 修正 2019-11-21
- 插图柱状图
- cesiumchart组件
- gis 地图 联动 弹框 图标
- 动态面积图添加按钮类配置项
- 玫瑰图形组件
- cesium 图形 和three.js 冲突的bug
- gis 地图 默认图层
- 网格标签
- gis 点图 值域
- gis 面图 值域
- 按钮图标添加提示框
- 百度地图
- 剩余的组件
- gulp说明文档
- 色斑图加透明