HTML5 Canvas に基づく 3D レンダリング エンジン インターフェイスと、吸着やその他の効果の使用

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

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

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; }

// 地板 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 下是否自动朝向眼睛的方向 });