本文将为您提供关于数百个HTML5例子学习HT图形组件–WebGL3D篇的详细介绍，我们还将为您解释html5绘制图形的相关知识，同时，我们还将为您提供关于HTML5WEBGL学习13D基础知识、HT
本文将为您提供关于数百个 HTML5 例子学习 HT 图形组件 – WebGL 3D 篇的详细介绍，我们还将为您解释html5绘制图形的相关知识，同时，我们还将为您提供关于HTML5 WEBGL学习1 3D基础知识、HTML5 WEBGL学习2 实时3D渲染、HTML5 WebGL打印3D机房、HTML5之WebGL 3D概述(上)—WebGL原生开发开启网页3D渲染新时代_html5教程技巧的实用信息。
本文目录一览：- 数百个 HTML5 例子学习 HT 图形组件 – WebGL 3D 篇（html5绘制图形）
- HTML5 WEBGL学习1 3D基础知识
- HTML5 WEBGL学习2 实时3D渲染
- HTML5 WebGL打印3D机房
- HTML5之WebGL 3D概述(上)—WebGL原生开发开启网页3D渲染新时代_html5教程技巧
数百个 HTML5 例子学习 HT 图形组件 – WebGL 3D 篇（html5绘制图形）
《数百个 HTML5 例子学习 HT 图形组件 – 拓扑图篇》一文让读者了解了 HT 的 2D 拓扑图组件使用，本文将对 HT 的 3D 功能做个综合性的介绍，以便初学者可快速上手使用 HT 构建例如电信网管 3D 机房应用、水务燃气 SCADA 监控应用及智能楼宇等应用场景。
HT for Web 的 3D 是完全基于 WebGL 技术实现的渲染引擎，但开发者几乎不需要了解 3D 图形数学或 Shader 渲染的底层技术，只需要掌握基本的 3D 坐标系和相机 Camera 的概念，剩下需要掌握的也就是基本 JavaScript 的面对对象编程知识，即可快速开发各种丰富的 3D 场景应用。
对于坐标系、相机和投影概念，以及 HT 的 2D 模型和 3D 模型之间的关系在 《HT for Web 3D 手册》中有详细描述：http://www.hightopo.com/guide/guide/core/3d/ht-3d-guide.html。HT 封装得很人性化，所以大部分情况下你都不需要调整或深入了解这些晦涩的 3D 参数，例如对于灯光，很多 HT 用户开发完 3D 的应用场景，都完全不需要学习任何灯光相关的技术知识。
初学者即使只使用 HT for Web 开发 3D 应用的，我们一般也会建议先阅读一遍《数百个 HTML5 例子学习 HT 图形组件 – 拓扑图篇》文章，因为 HT 的所有组件采用的都是统一的 DataModel 数据模型，采用相同的 MVP 设计模型，类 Flux 的单向流设计理念，所以只要掌握了拓扑图篇的介绍的几个技术点后，你基本就掌握了所有 HT 组件的使用方式。
除了拓扑图篇的内容外，你也可以通过《HT for Web 入门手册》掌握 HT 使用的基本思路，然后你就可以阅读《HT for Web 3D 手册》了，先入为主的就是下图这个电信网管 3D 机房监控的综合性例子：http://www.hightopo.com/guide/guide/core/3d/examples/example_3droom.html
该 3D 机房例子完全用 API 构建，展示了门、窗、服务器、告警、灯光等基本场景内容，并支持移动、编辑、双击开门等交互动作，对于机房的很多内容都可以通过六面体、球体、圆柱体等基础模型，像构建乐高积木那样组合而成。可能有人会好奇全用 API 的方式能整出多少花样呢？
好吧，我就列举些采用 HT 的纯 API 方式构建的 3D 例子供参考：
A星寻路算法 3D 模拟：http://www.hightopo.com/demo/astar/astar.html
3D 汉诺塔算法演示：http://www.hightopo.com/demo/hanoi_20151106/index.html
3D 热力图：http://www.hightopo.com/guide/guide/plugin/forcelayout/examples/example_heatmap3d.html
Box2D 物理碰撞 3D 例子：http://www.hightopo.com/demo/box2djs/ht-box2d-demo.html
设备管理 EMS 系统：http://www.hightopo.com/guide/guide/core/databinding/examples/example_ems.html
Easing 动画类型：http://www.hightopo.com/guide/guide/plugin/form/examples/example_easing.html
3D 网络拓扑图：http://www.hightopo.com/guide/guide/plugin/forcelayout/examples/example_forcelayout3.html
书架场景，亮点自寻：http://www.hightopo.com/guide/guide/plugin/modeling/examples/example_bookshelf.html
灯光舞台流动场景：http://www.hightopo.com/guide/guide/core/lighting/examples/example_flowing.html
2D 和 3D 模型联动的可编辑房间场景：http://www.hightopo.com/guide/guide/plugin/modeling/examples/example_csgshape.html
各种样式的茶杯座椅场景：http://www.hightopo.com/guide/guide/plugin/modeling/examples/example_custommodel.html
一百行代码实现的 3D 贪吃蛇游戏：http://www.hightopo.com/demo/snake_20151106/GreedySnake.html
带可控制端口的 3D 服务器演示：http://www.hightopo.com/demo/hp5406/hp5406-rotation.html
脑洞打开了吧，其实纯 3D API 还是能做很多效果的，更多例子参考：http://www.hightopo.com/demos/index.html。另外你也可以采用 HT 辅助的 3D 编辑器所见即所得的快速搭建出三维场景：
当然不同的行业客户也会根据自己需要打造更适合自己项目的 3D 编辑器：
但纯 API 的方式对于复杂的模型就很难实现了，所以对于复杂的模型我们就可以利用主流的 3D 设计工具如 3DMaxs，Maya 或 Blender 等进行设计，然后导出 OBJ 格式供 HT 读入使用，可参考《HT for Web 的 OBJ 手册》http://www.hightopo.com/guide/guide/plugin/obj/ht-obj-guide.html ，HT 手册中也有众多采用 OBJ 的应用例子：
可控指针的燃气表记：http://www.hightopo.com/guide/guide/plugin/obj/examples/example_meter.html
飞机飞行轨道例子：http://www.hightopo.com/guide/guide/plugin/obj/examples/example_path.html
摩托车模型结合灯光例子：http://www.hightopo.com/guide/guide/core/lighting/examples/example_pointlight.html
可开关复杂 3D 门窗：http://www.hightopo.com/guide/guide/plugin/obj/examples/example_room.html
跑道飞驰汽车：http://www.hightopo.com/demo/media/index.html
笔记本模型例子：http://www.hightopo.com/guide/guide/core/schedule/examples/example_network.html
可控燃气监控系统 http://www.hightopo.com/guide/guide/core/serialization/examples/example_exportimport.html
并且 OBJ 导入的模型依然可以进行数据绑定和动态实时驱动，这个话题后续我再以服务器扇叶旋转为例子展开详细介绍，本篇先到此为止，大家可玩下电信网管 3D 机房监控系统场景中，常见的服务器机柜和带风扇旋转功能的例子：http://www.hightopo.com/demo/fan3d/demo-enhanced.html
HTML5 WEBGL学习1 3D基础知识
总结
以上是小编为你收集整理的HTML5 WEBGL学习1 3D基础知识全部内容。
如果觉得小编网站内容还不错，欢迎将小编网站推荐给好友。
HTML5 WEBGL学习2 实时3D渲染
总结
以上是小编为你收集整理的HTML5 WEBGL学习2 实时3D渲染全部内容。
如果觉得小编网站内容还不错，欢迎将小编网站推荐给好友。
HTML5 WebGL打印3D机房
这次给大家带来HTML5 WebGL打印3D机房，HTML5 WebGL打印3D机房的注意事项有哪些，下面就是实战案例，一起来看一下。
前言
用 WebGL 渲染的 3D 机房现在也不是什么新鲜事儿了，这篇文章的主要目的是说明一下，3D 机房中的 eye 和 center 的问题，刚好在项目中用上了，好生思考了一番，最终觉得这个例子最符合我的要求，就拿来作为记录。
效果图
这个 3D 机房的 Demo 做的还不错，比较美观，基础的交互也都满足，接下来看看怎么实现。
代码生成
定义类
首先从 index.html 中调用的 js 路径顺序一个一个打开对应的 js，server.js 中自定义了一个 Editor.Server 类由 HT 封装的 ht.Default.def 函数创建的（注意，创建的类名 Editor.Server 前面的 Editor 不能用 E 来替代）：
ht.Default.def(''Editor.Server'', Object, {//第一个参数为类名，如果为字符串，自动注册到HT的classMap中；第二个参数为此类要继承的父类；第三个参数为方法和变量的声明
addToDataModel: function(dm) { //将节点添加进数据容器
dm.add(this._node);// ht 中的预定义函数，将节点通过 add 方法添加进数据容器中
},
setHost: function() { //设置吸附
this._node.setHost.apply(this._node, arguments);
},
s3: function() {//设置节点的大小
this._node.s3.apply(this._node, arguments);
},
setElevation: function() {//控制Node图元中心位置所在3D坐标系的y轴位置
this._node.setElevation.apply(this._node, arguments);
}
});创建 Editor.Server 类
这个类可以创建一个 ht.Node 节点，并设置节点的颜色和前面贴图：
var S = E.Server = function(obj) {//服务器组件
var color = obj.color,
frontImg = obj.frontImg;
var node = this._node = new ht.Node();//创建节点
node.s({//设置节点的样式 s 为 setStyle 的缩写
''all.color'': color,//设置节点六面的颜色
''front.image'': frontImg //设置节点正面的图片
});
};这样我在需要创建服务器组件的位置直接 new 一个新的服务器组件对象即可，并且能够直接调用我们上面声明的 setHost 等函数，很快我们就会用上。
接下来创建 Editor.Cabinet 机柜类 ，方法跟上面 Editor.Server 类的定义方法差不多：
ht.Default.def(''Editor.Cabinet'', Object, {
addToDataModel: function(dm) {
dm.add(this._door);
dm.add(this._node);
this._serverList.forEach(function(s) {
s.addToDataModel(dm);
});
},
p3: function() {
this._node.p3.apply(this._node, arguments);//设置节点的 3d 坐标
}
});创建 Editor.Cabinet 类
这个类相对于前面的 Editor.Server 服务器组件类要相对复杂一点，这个类中创建了一个柜身、柜门以及机柜内部的服务器组件：
var C = E.Cabinet = function(obj) {
var color = obj.color,
doorFrontImg = obj.doorFrontImg,
doorBackImg = obj.doorBackImg,
s3 = obj.s3;
var node = this._node = new ht.Node(); // 柜身
node.s3(s3);//设置节点的大小 为 setSize3d
node.a(''cabinet'', this);//自定义 cabinet 属性
node.s({//设置节点的样式 为 setStyle
''all.color'': color,//设置节点六面的颜色
''front.visible'': false//设置节点前面是否可见
});
if (Math.random() > 0.5) {
node.addStyleIcon(''alarm'', {//向节点上添加 icon 图标
names: [''icon 温度计''],//包含多个字符串的数组，每个字符串对应一张图片或矢量(通过ht.Default.setImage注册)
face: ''top'',//默认值为front，图标在3D下的朝向，可取值left|right|top|bottom|front|back|center
position: 17,//指定icons的位置
autorotate: ''y'',//默认值为false，图标在3D下是否自动朝向眼睛的方向
t3: [0, 16, 0],//默认值为undefined，图标在3D下的偏移，格式为[x,y,z]
width: 37,//指定每个icon的宽度，默认根据注册图片时的宽度
height: 32,//指定每个icon的高度，默认根据注册图片时的高度
textureScale: 4,//默认值为2，该值代表内存实际生成贴图的倍数，不宜设置过大否则影响性能
visible: { func: function() { return !!E.alarmVisible; }}//表示该组图片是否显示
});
}
var door = this._door = new ht.DoorWindow();//柜门
door.setWidth(s3[0]);//置图元在3D拓扑中的x轴方向的长度
door.setHeight(1);//设置图元在3D拓扑中的z轴长度
door.setTall(s3[1]);//控制Node图元在y轴的长度
door.setElevation(0);//设置图元中心在3D坐标系中的y坐标
door.setY(s3[2] * 0.5);//设置节点在 y 轴的位置
door.setHost(node);//设置吸附
door.s({//设置节点样式 setStyle
''all.color'': color,//设置节点六面颜色
''front.image'': doorFrontImg,//设置节点正面图片
''front.transparent'': true,//设置节点正面是否透明
''back.image'': doorBackImg,//设置节点背面的图片
''back.uv'': [1,0, 1,1, 0,1, 0,0],//自定义节点后面uv贴图，为空采用默认值[0,0, 0,1, 1,1, 1,0]
''dw.axis'': ''right''//设置DoorWindow图元展开和关闭操作的旋转轴，可取值left|right|top|bottom|v|h
});
var serverList = this._serverList = [];
var max = 6,
list = E.randomList(max, Math.floor(Math.random() * (max - 2)) + 2); //global.js 中声明的获取随机数的函数
var server, h = s3[0] / 4;
list.forEach(function(r) {
var server = new E.Server({ //服务器组件
color: ''rgb(51,49,49)'',
frontImg: ''服务器 组件精细''
});
server.s3(s3[0] - 2, h, s3[2] - 4);//设置节点大小
server.setElevation((r - max * 0.5) * (h + 2));//设置节点中心点在 y 轴的坐标
server.setHost(node);//设置节点的吸附
serverList.push(server);//向 serverList 中添加 server 节点
});
};上面代码中唯一没提到的是 Editor.randomList 函数，这个函数是在 global.js 文件中声明的，声明如下：
var E = window.Editor = {
leftWidth: 0,
topHeight: 40,
randomList: function(max, size) {
var list = [], ran;
while (list.length = 0)
continue;
list.push(ran);
}
return list;
}
};好了，场景中的各个部分的类都创建完成，那我们就该将场景创建起来，然后将这些图元都堆进去！
场景创建
如果熟悉的同学应该知道，用 HT 创建一个 3D 场景只需要 new 一个 3D 组件，再将通过 addToDOM 函数将这个场景添加进 body 中即可：
var g3d = E.main = new ht.graph3d.Graph3dView(); //3d 场景
main.js 文件中主要做的是在 3D 场景中一些必要的元素，比如墙面，地板，门，空调以及所有的机柜的生成和排放位置，还有非常重要的交互部分。
墙体，地板，门，空调和机柜的创建我就不贴代码出来了，有兴趣的请自行查看代码，这里主要说一下双击机柜以及与机柜有关的任何物体（柜门，服务器设备）则 3D 中 camera 的视线就会移动到双击的机柜的前方某个位置，而且这个移动是非常顺滑的，之前技艺不精，导致这个部分想了很久，最后参考了这个 Demo 的实现方法。
为了能够重复地设置 eye 和 center，将设置这两个参数对应的内容封装为 setEye 和 setCenter 方法，setCenter 方法与 setEye 方法类似，这里不重复赘述：
// 设置眼睛位置
var setEye = function(eye, finish) {
if (!eye) return;
var e = g3d.getEye().slice(0),//获取当前 eye 的值
dx = eye[0] - e[0],
dy = eye[1] - e[1],
dz = eye[2] - e[2];
// 启动 500 毫秒的动画过度
ht.Default.startAnim({
duration: 500,
easing: easing,//动画缓动函数
finishFunc: finish || function() {}, //动画结束后调用的函数
action: function(v, t) {//设置动画v代表通过easing(t)函数运算后的值，t代表当前动画进行的进度[0~1]，一般属性变化根据v参数进行
g3d.setEye([ //设置 3D 场景中的 eye 眼睛的值，为一个数组，分别对应 x，y，z 轴的值
e[0] + dx * v,
e[1] + dy * v,
e[2] + dz * v
]);
}
});
};我没有重复声明 setCenter 函数不代表这个函数不重要，恰恰相反，这个函数在“视线”移动的过程中起到了决定性的作用，上面的 setEye 函数相当于我想走到我的目标位置的前面（至少我定义的时候是这种用途），而 sCenter 的定义则是将我的视线移到了目标的位置（比如我可以站在我现在的位置看我右后方的物体，也可以走到我右后方去，站在那个物体前面看它），这点非常重要，请大家好好品味一下。
双击事件倒是简单，只要监听 HT 封装好的事件，判断事件类型，并作出相应的动作即可：
g3d.mi(function(e) {//addInteractorListener 事件监听函数
if (e.kind !== ''doubleClickData'') //判断事件类型为双击节点
return;
var data = e.data, p3;
if (data.a(''cabinet'')) //机身
p3 = data.p3();
else {
host = data.getHost(); //获取点击节点的吸附对象
if (host && host.a(''cabinet'')) {//如果吸附对象为 cabinet
p3 = host.p3();
}
}
if (!p3) return;
setCenter(p3); //设置 center 目标的要移向位置为 cabinet 的位置
setEye([p3[0], 211, p3[2] + 247]); //设置 eye 眼睛要移向的位置
});顶部导航栏
一开始看到这个例子的时候我在想，这人好厉害，我用 HT 这么久，用 HT 的 ht.widget.Toolbar 还没能做出这么漂亮的效果，看着看着发现这原来是用 form 表单做的，厉害厉害，我真是太愚钝了。
var form = E.top = new ht.widget.FormPane(); //顶部 表单组件
form.setRowHeight(E.topHeight);//设置行高
form.setVGap(-E.topHeight);//设置表单组件水平间距 设置为行高的负值则可以使多行处于同一行
form.setVPadding(0);//设置表单顶部和顶部与组件内容的间距
form.addRow([null, {//向表单中添加一行组件，第一个参数为元素数组，元素可为字符串、json格式描述的组件参数信息、html元素或者为null
image: {
icon: ''./symbols/inputBG.json'',
stretch: ''centerUniform''
}
}], [40, 260]);//第二个参数为每个元素宽度信息数组，宽度值大于1代表固定绝对值，小于等于1代表相对值，也可为80+0.3的组合
form.addRow([null, null, {
id: ''searchInput'',
textField: {}
}, {
element: ''机房可视化管理系统'',
color: ''white'',
font: ''18px arial, sans-serif''
}, null, {
button: {
// label: ''视图切换'',
icon: ''./symbols/viewChange.json'',
background: null,
selectBackground: ''rgb(128,128,128)'',
borderColor: ''rgba(0, 0, 0, 0)'',
onClicked: function() {
E.focusTo();
}
}
}, null, {
button: {
// label: ''告警'',
icon: ''./symbols/alarm.json'',
togglable: true,
selected: false,
background: null,
selectBackground: ''rgb(128,128,128)'',
borderColor: ''rgba(0, 0, 0, 0)'',
onClicked: function(e) {
E.setAlarmVisible(this.isSelected());
}
}
}, null], [40, 42, 218, 300, 0.1, 50, 10, 50, 10]);以上都只是能实现，但是并没有真正地添加进 html 标签中，也就意味着，现在界面上什么都没有！别忘了在页面加载的时候将 3D 场景添加进 body 中，同时也别忘了将 form 表单添加进 body 中，并且设置窗口大小变化事件时，form 表单也需要实时更新：
window.addEventListener(''load'', function() {
g3d.addToDOM(); //将 3D 场景添加进 body 中
document.body.appendChild(E.top.getView()); //将 form 表单组件底层 p 添加进 body 中
window.addEventListener(''resize'', function() {//窗口大小变化事件监听
E.top.iv();//更新 form 表单的底层 p
});
});这里说明一下 addToDOM 函数，对于了解 HT 的机制非常重要。HT 的组件一般都会嵌入 BorderPane、SplitView 和 TabView 等容器中使用，而最外层的 HT 组件则需要用户手工将 getView() 返回的底层 p 元素添加到页面的 DOM 元素中，这里需要注意的是，当父容器大小变化时，如果父容器是 BorderPane 和 SplitView 等这些 HT 预定义的容器组件，则 HT 的容器会自动递归调用孩子组件invalidate 函数通知更新。但如果父容器是原生的 html 元素， 则 HT 组件无法获知需要更新，因此最外层的 HT 组件一般需要监听 window 的窗口大小变化事件，调用最外层组件 invalidate 函数进行更新。
为了最外层组件加载填充满窗口的方便性，HT 的所有组件都有 addToDOM 函数，其实现逻辑如下，其中 iv 是 invalidate 的简写：
addToDOM = function(){
var self = this,
view = self.getView(),
style = view.style;
document.body.appendChild(view); //将场景的底层 p 添加进 body 中
style.left = ''0'';//HT 默认将所有的组件底层p的position设置为absolute
style.right = ''0'';
style.top = ''0'';
style.bottom = ''0'';
window.addEventListener(''resize'', function () { self.iv(); }, false); //窗口大小变化监听事件，通知组件变化更新
}相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
text-align如何实现两端对齐
Mac系统里MySQL重置Root密码
以上就是HTML5 WebGL打印3D机房的详细内容，更多请关注php中文网其它相关文章！
HTML5之WebGL 3D概述(上)—WebGL原生开发开启网页3D渲染新时代_html5教程技巧
webgl开启了网页3d渲染的新时代，它允许在canvas中直接渲染3d的内容，而不借助任何插件。webgl同canvas 2d的api一样，都是通过脚本操纵对象，所以步骤也是基本相似：准备工作上下文，准备数据，在canvas中绘制对象并渲染。与2d不同的就是3d涉及的知识更多了，例如世界、光线、纹理、相机、矩阵等专业知识。webgl有一个很好的中文教程，就是下面使用参考中的第一个链接，所以这里不再班门弄斧，后面的内容只是简单的总结一下学习的内容。
浏览器的支持
由于微软有自己的图形发展计划，一直不支持WebGL，所以IE目前除了安装插件外，是无法运行WebGL的。其他的主流浏览器如Chrome、FireFox、Safari、Opera等，都装上最新的版本就可以了。除了浏览器要装最新的外，还要保证显卡的驱动也是最新的。
装上这些以后，可以打开浏览器，输入下面的网址验证一下浏览器对WebGL的支持情况：http://webglreport.sourceforge.net/。
在正常安装以上浏览器之后还是不能运行WebGL，那你可以强制开启WebGL支持试一试。开启方法如下：
Chrome浏览器
我们需要为Chrome加入一些启动参数，以下具体操作步骤以Windows操作系统为例：找到Chrome浏览器的快捷方式，右键点击快捷方式，选择属性；在目标框内，chrome.exe后面的引号后面，加入以下内容：
点击确定后关闭Chrome，然后用此快捷方式启动Chrome浏览器。
几个参数的含义如下：
--enable-webgl的意思是开启WebGL支持；
--ignore-gpu-blacklist的意思是忽略GPU黑名单，也就是说有一些显卡GPU因为过于陈旧等原因，不建议运行WebGL，这个参数可以让浏览器忽略这个黑名单，强制运行WebGL；
--allow-file-access-from-files的意思是允许从本地载入资源，如果你不是WebGL的开发者，不需要开发调试WebGL，只是想要看一下WebGL的Demo，那你可以不添加这个参数。
Firefox浏览器
Firefox的用户请在浏览器的地址栏输入“about:config”，回车，然后在过滤器（filter）中搜索“webgl”，将webgl.force-enabled设置为true；将webgl.disabled设置为false；在过滤器（filter）中搜索“security.fileuri.strict_origin_policy”，将security.fileuri.strict_origin_policy设置为false；然后关闭目前开启的所有Firefox窗口，重新启动Firefox。
前两个设置是强制开启WebGL支持，最后一个security.fileuri.strict_origin_policy的设置是允许从本地载入资源，如果你不是WebGL的开发者，不需要开发调试WebGL，只是想要看一下WebGL的Demo，那你可以不设置此项。
立即学习“前端免费学习笔记（深入）”；
Safari浏览器
在菜单中找到“属性”→“高级”，选中“显示开发菜单”，然后到“开发”菜单，选中“开启WebGL”。
开发步骤
下面的代码只是简单总结一下相关的概念，它来源于参考中的中文教程，涉及较多的3D方面的知识。感兴趣的同学直接可以跳到实用参考中的中文教程中学习，比我这里讲解的要详细和准确的多。凑热闹的同学简单看看就可以了，不用深究每一行代码的含义。
准备工作
这个不用说了，就是在页面上添加一个canvas元素作为渲染的容器。例如：
Yourbrowserdoesn''tappeartosupporttheHTML5canvaselement.
今天关于数百个 HTML5 例子学习 HT 图形组件 – WebGL 3D 篇和html5绘制图形的讲解已经结束，谢谢您的阅读，如果想了解更多关于HTML5 WEBGL学习1 3D基础知识、HTML5 WEBGL学习2 实时3D渲染、HTML5 WebGL打印3D机房、HTML5之WebGL 3D概述(上)—WebGL原生开发开启网页3D渲染新时代_html5教程技巧的相关知识，请在本站搜索。
本文标签：
