基于 HTML5 Canvas 的 3D 衬着引擎界面以及吸附等结果的应用【html5教程】

本文给人人引见基于 HTML5 Canvas 的 3D 衬着引擎界面以及吸附等结果的运用，有肯定的参考价值，有须要的朋侪能够参考一下，愿望对你们有所协助。

结果图

代码完成

HT 供应了基于 WebGL 的 3D 手艺的图形组件 ht.graph3d.Graph3dView，WebGL 基于 OpenGL ES 2.0 图形接口，因而 WebGL 属于底层的图形 API 接口，二次开辟照样有很高的门坎，HT 的 Graph3dView 组件经由过程对 WebGL 底层手艺的封装，与 HT 其他组件一样，基于 HT 一致的 DataModel 数据模子来驱动图形显现，极大降低了 3D 图形手艺开辟的门坎。同时 HT 供应了壮大的完整基于 HTML5 手艺 3D 图形建模设想器，用户无需编码即可疾速可视化搭建种种 3D 场景，能够说 HT 的 3D 开辟形式完整打破了传统 3D 开辟形式，绝大部份运用不再须要依靠通晓 3ds Max 或 Maya 的专业 3D 设想师来建模，也不须要整合 Unity3d 等引擎做图形衬着，HT 一站式的供应了从建模到衬着，包含和 2D 组件显现和数据融会的一站式解决方案。

本次解说的就是这个 3D 的界面，所以我们首先要建立 3D 衬着引擎组件，可视化显现数据模子的三维环境场景。

dataModel = new ht.DataModel();
g3d = new ht.graph3d.Graph3dView(dataModel);
g3d.addToDOM();
window.addEventListener('resize', function (e) {
　　g3d.invalidate();
}, false);

我们还要设置眼睛（或Camera）所在位置，默认值为 [0, 300, 1000] ，花样为 [x, y, z] 。

g3d.setEye([0, 300, 600]);

这里给人人说一下，可参考 3D 手册（ http://www.hightopo.com/guide/guide/core/3d/ht-3d-guide.html ）。

然后我们再给它加上一些选中结果。Graph3dView 中被选中的图元会显现为较暗的状况，变暗系数是由图元 style 的 brightness 和 select.brightness 属性决议，select.brightness 属性默认值为 0.7，终究返回值大于 1 变亮，小于 1 变暗，即是 1 或为空则不变化。Graph3dView#getBrightness 函数掌握终究图元亮度，因而也能够经由过程重载掩盖该函数自定义选中图元亮度。

g3d.getBrightness = function (data) {
　　if (data.s('isFocused')) {
   　　return 0.7;
   }
　　return null;
};

lastFocusData = null;g3d.getView().addEventListener('mousemove', function (e) {
　　// 传入逻辑坐标点或许交互 event 事宜参数，返回当前点下的图元
   var data = g3d.getDataAt(e);   if (data !== lastFocusData) {
   　　if (lastFocusData) {
      　　astFocusData.s('isFocused', false);
      }      if (data) {
         data.s('isFocused', true);
      }
      astFocusData = data;
　　}
});

接下来我们写个函数来轻易绘制每一个部份的模子：

function createNode (p3, s3, host) {
　　// 拓扑图元范例　　var node = new ht.Node();　　// 猎取或设置图元中心点的三维坐标 有三个参数时相当于 setPosition3d 没有相当于 get　　node.p3(p3);　　// 猎取或设置图元的尺寸 有三个参数时相当于 setSize3d 没有相当于 get　　node.s3(s3);　　// 设置宿主图元，当图元吸附上宿主图元(host)时，宿主挪动或扭转时会动员一切吸附者　　node.setHost(host);
　　dataModel.add(node);　　return node;
}

讲到了这，我们来说说吸附，吸附功用关于设想有条理关联的模子异常轻易，比方装备面板吸附上装备机框，装备端口吸附上装备面板，如许从机框 - 面板 - 端口的条理关联吸附，使得用户拖动团体机框时一切这个条理下的图元都邑追随挪动。关于 3D 的场景下，吸附的观点更进一步延长，当机框在三维空间举行恣意位置偏移以及恣意角度扭转时，一切吸附的相干图元都邑准确的追随平移，并做出响应位置对应的扭转，以到达团体装备各个图形部份坚持物理相对位置一致。

下面我们来一同建立模子吧！分别是地板 floor，桌面 table，四个桌腿以及盒子：

// 地板
floor = createNode([0, 0, 0], [600, 5, 400]).s({
　　'all.color': '#A0A0A0',// 六面色彩
　　'label': '地板',// 图元笔墨内容
　　'label.face': 'top',// 笔墨在3d下的朝向，可取值（left|right|top|bottom|front|back|center）
　　'label.background': 'yellow',// 图元笔墨背景
　　'label.position': 22,// 图元笔墨位置
　　'label.t3': [10, 0, -10],// 笔墨在3d下的偏移，花样为 [x,y,z]
　　'label.font': '28px arial, sans-serif'// 图元笔墨字体
});
// 桌面
table = createNode([0, 120, 0], [400, 10, 280], floor).s({
　　'shape3d': 'cylinder',// 为空时显现为六面立方体，cylinder 圆柱
　　'shape3d.side': 60,// 决议 3d 图形显现为几边型，为 0 时显现为腻滑的曲面结果
　　'shape3d.color': '#E5BB77',// 3d 图形团体色彩
　　'label': '桌子',
　　'label.face': 'top',
　　'label.background': 'yellow',
　　'label.position': 23,
　　'label.t3': [0, 0, -10],
　　'label.font': '20px arial, sans-serif'
});
// 四个桌腿
foot1 = createNode([100, 60, 80], [20, 110, 20], table).s({
　　'shape3d': 'cylinder',
　　'shape3d.color': '#E5BB77',
});
foot2 = createNode([-100, 60, 80], [20, 110, 20], table).s({
　　'shape3d': 'cylinder',
　　'shape3d.color': '#E5BB77',
});
foot3 = createNode([100, 60, -80], [20, 110, 20], table).s({
　　'shape3d': 'cylinder',
　　'shape3d.color': '#E5BB77',
});
foot4 = createNode([-100, 60, -80], [20, 110, 20], table).s({
　　'shape3d': 'cylinder',
　　'shape3d.color': '#E5BB77',
});
// 盒子
box = createNode([0, 150, 0], [100, 50, 60], table).s({
　　'all.color': '#2e2f32',
　　'front.color': '#BDC3C7',// 前面色彩
　　'note': '盯着你看', // 图元冒泡标注
　　'note.face': 'top',
　　'note.position': 7,
　　'note.t3': [0, 0, 10],
　　'note.autorotate': true// 图标在 3D 下是不是自动朝向眼睛的方向
});

代码中有一些属性，我已帮人人写好了细致的解释。在此献上种种关于 'shape3d' 的图形的值，轻易人人游玩：