基于 HTML5 Canvas 的 3D 机房创建

2024-08-30 11:32
文章标签 html5 创建 3d canvas frontend 机房

本文主要是介绍基于 HTML5 Canvas 的 3D 机房创建，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

对于 3D 机房来说，监控已经不是什么难事，不同的人有不同的做法，今天试着用 HT 写了一个基于 HTML5 的机房，发现果然 HT 简单好用。本例是将灯光、雾化以及 eye 的最大最小距离等等功能在 3D 机房中进行的一个综合性的例子。接下来我将对这个例子的实现进行解析，算是自己对这个例子的一个总结吧。整个例子因为没有设计师的参与，所以样式上可能比较简陋，但是在一些细节的地方，比如墙上的贴图、门框嵌入以及灭火器等等，都是尽可能地还原真实的场景，也是花了些心思做这个例子的！

本例地址：http://www.hightopo.com/guide/guide/core/3d/examples/example_3droom.html

本例动态图：

图片描述

从最基础的开始，场景的布置，照 HTML 的思路，这个场景就是将整个页面放在一个 div 中，再向这个 div 中添加一个顶部的 div 以及一个中间部分的 div，说实在，如果用 HTML 实现这个步骤，我们要写的代码不多，但是如果要写几次这段代码，想必谁都会觉得烦吧。。。HT 将这种实现方法封装了起来，整个外部的 div 就是 HT 的基础组件，这里我们用到的是 ht.widget.BorderPane 组件，上部的 div 封装在 ht.widget.Toolbar 工具条类中，下部分是 3D 部分 ht.graph3d.Graph3dView 组件，将页面中的两个部分通过下面的方式添加进 BorderPane 组件中，并将 BorderPane 添加进 body 体中：

toolbar = new ht.widget.Toolbar(items);                                                                                                
dataModel = new ht.DataModel();
g3d = new ht.graph3d.Graph3dView(dataModel);    
g3d.getView().style.background = 'black';
g3d.setGridSize(100);
g3d.setGridGap(100); 
g3d.setFar(30000);
g3d.setOrthoWidth(5000);  
g3d.setFogNear(100);//默认为1，代表从该距离起物体开始受雾效果影响
g3d.setFogFar(8000);
g3d.reset = reset;
g3d.reset();
g3d.enableToolTip();                                 
borderPane = new ht.widget.BorderPane();
borderPane.setTopView(toolbar);
borderPane.setCenterView(g3d);       view = borderPane.getView();  
view.className = 'main';
document.body.appendChild(view);
window.addEventListener('resize', function (e) {borderPane.invalidate();
}, false);

上面代码将 borderPane.getView() 添加进 body 体中，是因为 Graph3dView 的界面 DOM 结构是由最底层的 div 元素，以及渲染层 canvas 元素组合而成，通过 getView() 可得到最底层的 div 元素。

我们还注意到上面代码中没有提及的一个参数 items，这个 items 是 toolbar 工具条的元素，一个数组元素，下面展示一下代码，这里简单地解释了一下，详细信息请参考 HT for Web 工具条手册：

items = [ //工具条中的元素数组{label: 'White',//工具条元素的标签文字groupId: 'headLightColor',//对工具条元素进行分组，同一个分组内的元素选中会自动出现互斥效果selected: true,//工具条元素是否被选中，值为true或false，对复选框、开关按钮和单选按钮有效action: function(){// 函数类型，工具条元素被点击时调用g3d.setHeadlightColor('white');}},        {label: 'Red',groupId: 'headLightColor',action: function(){                             g3d.setHeadlightColor('red');}}, {label: 'Blue',groupId: 'headLightColor',action: function(){                             g3d.setHeadlightColor('blue');}},        {label: 'Yellow',groupId: 'headLightColor',        action: function(){                             g3d.setHeadlightColor('yellow');}},        {id: 'step',                        unfocusable: true,//工具条元素是否不可获取焦点，默认鼠标滑过时会显示一个矩形边框，可设置为true关闭此效果slider: {width: 70,step: 500,min: 0,max: 10000,value: 0,                            onValueChanged: function(){g3d.setHeadlightRange(this.getValue());}       }                },'separator', //表示分隔条{label: 'Fog',type: 'check',//工具条元素类型，check表示复选框，toggle表示开关按钮，radio表示单选按钮                        action: function(){g3d.setFogDisabled(!this.selected);}},{label: 'White',groupId: 'fogColor',selected: true,action: function(){                             g3d.setFogColor('white');}},                     {label: 'Red',groupId: 'fogColor',action: function(){                             g3d.setFogColor('red');}},        {label: 'Yellow',groupId: 'fogColor',        action: function(){                             g3d.setFogColor('yellow');}},{                       unfocusable: true,label: 'FogNear',slider: {width: 70,min: 10,max: 4000,value: 100,                            onValueChanged: function(){g3d.setFogNear(this.getValue());}       }                },                        {                       unfocusable: true,label: 'FogFar',slider: {width: 70,min: 5000,max: 15000,value: 8000,                            onValueChanged: function(){g3d.setFogFar(this.getValue());}       }                },                    'separator', {id: 'movable',label: 'Movable',type: 'check',selected: false                }, {label: 'Editable',type: 'check',selected: false,action: function(item){g3d.setEditable(item.selected);}},{label: 'Wireframe',type: 'check',selected: false,action: function(item){if(item.selected){dataModel.each(function(data){data.s({'wf.visible': 'selected','wf.color': 'red'                                        });});                                }else{dataModel.each(function(data){data.s({'wf.visible': false                                       });});                               }                            }},{type: 'toggle',label: 'Orthographic Projection',                        action: function(item){  g3d.setOrtho(item.selected);                           }                    },{type: 'toggle',selected: false,label: 'First Person Mode',action: function(item){g3d.setFirstPersonMode(item.selected);  g3d.reset();}},                                                       'separator',                      {type: 'check',label: 'Origin Axis',selected: false,action: function(item){g3d.setOriginAxisVisible(item.selected);                           }},   {type: 'check',label: 'Center Axis',selected: false,action: function(item){g3d.setCenterAxisVisible(item.selected);                           }},                             {type: 'check',label: 'Grid',selected: false,action: function(item){g3d.setGridVisible(item.selected);                           }},                    {label: 'Export Image',action: function(){                             var w = window.open();w.document.open();                            w.document.write("<img src='" + g3d.toDataURL(g3d.getView().style.background) + "'/>");w.document.close();}}                    
];

接下来就是创建场景中的各个模型，首先是三个灯光，中间部分一个，左右后方各一个（我将光源标记出来了，看图~），颜色分别为绿、红、蓝，以及地板：

图片描述

redLight = new ht.Light();//灯光类
redLight.p3(-1600, 200, -2200);
redLight.s({'light.color': 'red','light.range': 1000
});
dataModel.add(redLight);blueLight = new ht.Light();
blueLight.p3(1600, 200, -2200);
blueLight.s({'light.color': 'blue','light.range': 1000
});
dataModel.add(blueLight);                                   greenLight = new ht.Light();
greenLight.p3(-800, 400, -200);
greenLight.s({'light.center': [-300, 0, -900],'light.type': 'spot','light.color': 'green','light.range': 4000,'light.exponent': 10
});
dataModel.add(greenLight);                floor = createNode([0, -5, -1500], [5200, 10, 4200]);
floor.s({                             'shape3d': 'rect','shape3d.top.color': '#F0F0F0'                    
});

接下来将场景中间部分的服务器、两边的服务器、灭火器，墙上的空调、墙背面的空调等等等等都添加进场景中：

for(i=0; i<3; i++){for(j=0; j<3; j++){createServer1(250+i*280, -1200-500*j, j === 2);createServer1(-250-i*280, -1200-500*j, j === 1);}
}//创建2排2的服务器 放在场景的两边
for(i=0; i<2; i++){for(j=0; j<2; j++){createServer2(1500+i*200, -700-500*j, (i === 1 ? (j === 1 ? '#00FFFF' : '#C800FF') : null));createServer2(-1500-i*200, -700-500*j, (j === 1 ? (i === 1 ? 'red' : 'yellow') : null));}
}                                          // fire extinguisher
createFireExtinguisher(1300, -1800, [0.45, 0]); 
createFireExtinguisher(-1300, -1800); 
createFireExtinguisher(1100, -2450);   
createFireExtinguisher(-1100, -2450, [0.45, 0]);  // air condition
createNode([1120, 170, -700], [80, 340, 170]).s({'all.color': '#EDEDED','left.image': 'stand'
}).setToolTip('Air Conditioner'); 
createNode([-1120, 170, -700], [80, 340, 170]).s({'all.color': '#EDEDED','right.image': 'stand'
}).setToolTip('Air Conditioner'); 
createNode([1680, 400, -1850], [370, 120, 60]).s({'all.color': '#767676','front.image': 'air1'
}).setToolTip('Air Conditioner');             
createNode([-1680, 400, -1850], [370, 120, 60]).s({'all.color': '#767676','front.image': 'air2'
}).setToolTip('Air Conditioner'); 
for(i=0; i<2; i++){createNode([300+i*580, 90, -2630], [260, 180, 60]).s({'all.color': '#EDEDED','back.image': 'air3'}).setToolTip('Air Conditioner');  createNode([-300-i*580, 90, -2630], [260, 180, 60]).s({'all.color': '#EDEDED','back.image': 'air3'}).setToolTip('Air Conditioner');                      
}

其中 createServer1 方法是用来创建服务器的方法，由一个 ht.Node 作为机身以及 ht.Shape 作为机门组合而成，并在机柜的内部添加了随机数台设备：

function createServer1(x, z, disabled){//创建服务器 1（中间部分）var h = 360, w = 150, d = 170, k = 10,main = createNode([0, 0, 0], [w, h, d]),face = new ht.Shape(),s = {'all.visible': false, 'front.visible': true};  //设置node节点只有前面可见       dataModel.add(face);face.addPoint({x: -w/2, y: d/2-1});//门上的三个点face.addPoint({x: w/2, y: d/2-1});face.addPoint({x: w+w/2, y: d/2-1});face.setSegments([1, 2, 1]);                face.setTall(h);face.setThickness(1);//设置厚度      face.s(s);                face.setHost(main);//吸附在main节点上main.s({'all.color': '#403F46','front.visible': false});                if(!disabled){                face.s({'all.color': 'rgba(0, 40, 60, 0.7)','all.reverse.flip': true,//反面是否显示正面的东西'all.transparent': true//设置为透明});face.face = true;//初始化face属性             face.open = false;face.angle = -Math.PI * 0.6;                       face.setToolTip('Double click to open the door');var up = createNode([0, h/2-k/2, d/2], [w, k, 1]).s(s),down = createNode([0, -h/2+k/2, d/2], [w, k, 1]).s(s),right = createNode([w/2-k/2, 0, d/2], [k, h, 1]).s(s),left = createNode([-w/2+k/2, 0, d/2], [k, h, 1]).s(s);up.setHost(face);down.setHost(face);left.setHost(face);right.setHost(face);//随机创建机柜中的设备数量 2个或者4个var num = Math.ceil(Math.random() * 2),start = 20 + 20 * Math.random();for(var i=0; i<num; i++){var node = createNode([0, start+45*i, 0], [w-6, 16, d-30]);node.setHost(main);node.s({'front.image': 'server','all.color': '#E6DEEC','all.reverse.cull': true});node.pop = false;//初始化设备“弹出”的属性node.setToolTip('Double click to pop the server');var node = createNode([0, -start-45*i, 0], [w-6, 16, d-30]);node.setHost(main);node.s({'front.image': 'server','all.color': '#E6DEEC','all.reverse.cull': true}); node.pop = false;node.setToolTip('Double click to pop the server');}                    }main.p3(x, h/2+1, z);
}

这个服务器我们还制作了门的打开以及关闭的动作，还有服务器内部的设备的弹出以及恢复位置。首先，对 3d 组件添加了过滤函数，对双击事件的元素过滤：

图片描述

g3d.onDataDoubleClicked = function(data, e, dataInfo){//图元被双击时回调if(data.face){//face是定义门时候开启的属性 是在节点定义的时候添加的 下面的 pop 也是一样data.getHost().getAttaches().each(function(attach){//遍历吸附到自身的所有节点的ht.List类型数组if(attach.pop){//pop 是定义设备是否弹出的属性toggleData(attach);}});}toggleData(data, dataInfo.name);
};

以下是对 toggleData 的定义：

function toggleData(data, name){//开关门 以及 设备弹出缩回的动作var angle = data.angle,pop = data.pop;if(angle != null){if(anim){anim.stop(true);//ht内置的函数 参数为true时终止动画}var oldAngle = data.window ? data.getRotationX() : data.getRotation();if(data.open){angle = -angle;}data.open = !data.open;anim = ht.Default.startAnim({action: function(v){if(data.window){data.setRotationX(oldAngle + v * angle);    }else{data.setRotation(oldAngle + v * angle);}                                }});}else if(pop != null){if(anim){anim.stop(true);}var p3 = data.p3(),s3 = data.s3(),dist = pop ? -s3[2] : s3[2];data.pop = !data.pop;                        if(data.pop){data.s({'note': 'Detail...',  'note.background': '#3498DB','note.font': '26px Arial','note.position': 6,'note.t3': [-30, -3, 30],'note.expanded': true,'note.toggleable': false,'note.autorotate': true                        });                                     }else{data.s('note', null);}                                                anim = ht.Default.startAnim({action: function(v){data.p3(p3[0], p3[1], p3[2] + v * dist);                                                               }}); }            
}

中间部分的服务器我就不赘述了，这里聊一下比较有趣的部分，灭火器模型的制作，并不是 Max3d 制作而成的，而是代码生成的：

图片描述

从图中可以看出来，这个灭火器是由底部一个圆柱，中间一个半圆形以及顶部一个小圆柱并在上面贴图合成的：

function createFireExtinguisher(x, z, uvOffset){//创建灭火器var w = 80, h = 200,body = createNode([0, 0, 0], [w, h, w]).s({//身体的圆柱'shape3d': 'cylinder',//圆柱'shape3d.image': 'fire','shape3d.uv.offset': uvOffset,//决定3d图形整体贴图的uv偏移'shape3d.reverse.cull': true}),                    sphere = createNode([0, h/2, 0], [w, w, w]).s({'shape3d': 'sphere',//球体'shape3d.color': '#F20000','shape3d.reverse.cull': true}),top = createNode([0, h/2+w/3, 0], [w/2, w/2, w/2]).s({//头部的圆柱'shape3d': 'cylinder','shape3d.color': '#242424','shape3d.reverse.cull': true});sphere.setHost(body);//设置吸附 只要body移动sphere也会移动top.setHost(sphere);body.p3([x, h/2, z]);body.setToolTip('Fire Extinguisher');sphere.setToolTip('Fire Extinguisher');top.setToolTip('Fire Extinguisher');
}

以上！这个 3d 机房的例子非常有代表性，性能也展示得很全面，觉得有必要拿出来讲一下，希望能对你们有一定的帮助~

这篇关于基于 HTML5 Canvas 的 3D 机房创建的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/1120697。

相关文章

前端原生js实现拖拽排课效果实例

前端原生js实现拖拽排课效果实例

《前端原生js实现拖拽排课效果实例》：本文主要介绍如何实现一个简单的课程表拖拽功能,通过HTML、CSS和JavaScript的配合,我们实现了课程项的拖拽、放置和显示功能,文中通过实例代码介绍的... 目录1. 效果展示2. 效果分析2.1 关键点2.2 实现方法3. 代码实现3.1 html部分3.2
阅读更多...
Python创建Excel的4种方式小结

Python创建Excel的4种方式小结

《Python创建Excel的4种方式小结》这篇文章主要为大家详细介绍了Python中创建Excel的4种常见方式,文中的示例代码简洁易懂,具有一定的参考价值,感兴趣的小伙伴可以学习一下... 目录库的安装代码1——pandas代码2——openpyxl代码3——xlsxwriterwww.cppcns.c
阅读更多...
CSS弹性布局常用设置方式

CSS弹性布局常用设置方式

《CSS弹性布局常用设置方式》文章总结了CSS布局与样式的常用属性和技巧,包括视口单位、弹性盒子布局、浮动元素、背景和边框样式、文本和阴影效果、溢出隐藏、定位以及背景渐变等,通过这些技巧,可以实现复杂... 一、单位元素vm 1vm 为视口的1%vh 视口高的1%vmin 参照长边vmax 参照长边re
阅读更多...
CSS3中使用flex和grid实现等高元素布局的示例代码

CSS3中使用flex和grid实现等高元素布局的示例代码

《CSS3中使用flex和grid实现等高元素布局的示例代码》：本文主要介绍了使用CSS3中的Flexbox和Grid布局实现等高元素布局的方法，通过简单的两列实现、每行放置3列以及全部代码的展示，展示了这两种布局方式的实现细节和效果，详细内容请阅读本文，希望能对你有所帮助... 过往的实现方法是使用浮动加
阅读更多...
css渐变色背景|＜gradient示例详解

css渐变色背景|＜gradient示例详解

《css渐变色背景|＜gradient示例详解》CSS渐变是一种从一种颜色平滑过渡到另一种颜色的效果,可以作为元素的背景,它包括线性渐变、径向渐变和锥形渐变，本文介绍css渐变色背景|＜gradien... 使用渐变色作为背景可以直接将渐China编程变色用作元素的背景，可以看做是一种特殊的背景图片。（是作为背
阅读更多...
使用Python在Excel中创建和取消数据分组

使用Python在Excel中创建和取消数据分组

《使用Python在Excel中创建和取消数据分组》Excel中的分组是一种通过添加层级结构将相邻行或列组织在一起的功能,当分组完成后,用户可以通过折叠或展开数据组来简化数据视图,这篇博客将介绍如何使... 目录引言使用工具python在Excel中创建行和列分组Python在Excel中创建嵌套分组Pyt
阅读更多...
CSS自定义浏览器滚动条样式完整代码

CSS自定义浏览器滚动条样式完整代码

《CSS自定义浏览器滚动条样式完整代码》：本文主要介绍了如何使用CSS自定义浏览器滚动条的样式，包括隐藏滚动条的角落、设置滚动条的基本样式、轨道样式和滑块样式，并提供了完整的CSS代码示例，通过这些技巧，你可以为你的网站添加个性化的滚动条样式，从而提升用户体验，详细内容请阅读本文，希望能对你有所帮助...
阅读更多...
css实现图片旋转功能

css实现图片旋转功能

《css实现图片旋转功能》：本文主要介绍了四种CSS变换效果：图片旋转90度、水平翻转、垂直翻转，并附带了相应的代码示例，详细内容请阅读本文，希望能对你有所帮助... 一 css实现图片旋转90度.icon{ -moz-transform:rotate(-90deg); -webkit-transfo
阅读更多...
vue基于ElementUI动态设置表格高度的3种方法

vue基于ElementUI动态设置表格高度的3种方法

《vue基于ElementUI动态设置表格高度的3种方法》ElementUI+vue动态设置表格高度的几种方法,抛砖引玉,还有其它方法动态设置表格高度,大家可以开动脑筋... 方法一、css + js的形式这个方法需要在表格外层设置一个div，原理是将表格的高度设置成外层div的高度，所以外层的div需要
阅读更多...
解决IDEA使用springBoot创建项目,lombok标注实体类后编译无报错,但是运行时报错问题

解决IDEA使用springBoot创建项目,lombok标注实体类后编译无报错,但是运行时报错问题

《解决IDEA使用springBoot创建项目,lombok标注实体类后编译无报错,但是运行时报错问题》文章详细描述了在使用lombok的@Data注解标注实体类时遇到编译无误但运行时报错的问题,分析... 目录问题分析问题解决方案步骤一步骤二步骤三总结问题使用lombok注解@Data标注实体类，编译时
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2