小編給大家分享一下HTML5的WebGL3D檔案館圖書可視化管理系統(tǒng)的實(shí)現(xiàn)方法，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！
創(chuàng)新互聯(lián)是專業(yè)的高青網(wǎng)站建設(shè)公司，高青接單;提供成都做網(wǎng)站、網(wǎng)站設(shè)計(jì),網(wǎng)頁設(shè)計(jì),網(wǎng)站設(shè)計(jì),建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行高青網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴(kuò)展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團(tuán)隊(duì),希望更多企業(yè)前來合作!
檔案管理系統(tǒng)是通過建立統(tǒng)一的標(biāo)準(zhǔn)以規(guī)范整個(gè)文件管理，包括規(guī)范各業(yè)務(wù)系統(tǒng)的文件管理的完整的檔案資源信息共享服務(wù)平臺(tái)，主要實(shí)現(xiàn)檔案流水化采集功能。為企事業(yè)單位的檔案現(xiàn)代化管理，提供完整的解決方案，檔案管理系統(tǒng)既可以自成系統(tǒng)，為用戶提供完整的檔案管理和網(wǎng)絡(luò)查詢功能，也可以與本單位的OA辦公自動(dòng)化和DPM設(shè)計(jì)過程管理，或者與MIS信息管理系統(tǒng)相結(jié)合，形成更加完善的現(xiàn)代化信息管理網(wǎng)絡(luò)。傳統(tǒng)檔案館隨著社會(huì)的快速發(fā)展與變化，其內(nèi)在形式上也發(fā)生了巨大變化，逐漸演變?yōu)楝F(xiàn)代智慧檔案館。智慧檔案館以現(xiàn)代科技為依托，充分結(jié)合現(xiàn)代物聯(lián)網(wǎng)技術(shù)與云計(jì)算技術(shù)構(gòu)建完善的城市智慧檔案，實(shí)現(xiàn)了現(xiàn)代社會(huì)全面管理的目標(biāo)。本文以當(dāng)前流行的 H5 技術(shù)為主，為現(xiàn)代智慧檔案館提供一套 WEB 解決方案。
在本例中，將使用 HT UI 組件對(duì)頁面實(shí)現(xiàn)布局；使用 RelativeLayout 相對(duì)布局器將頁面分為三個(gè)部分：left, top, center，使用 VBoxLayout 縱向布局器將 LEFT 部分分為 logo，editor，chart 三個(gè)部分
Graph4dView 是 HT 組件中加載 3D 模型的拓?fù)浣M件，RelativeLayout 則是 HT 提供的 UI 解決方案，UI 組件中提供 HTView 組件來實(shí)現(xiàn)拓?fù)渑c UI 的融合。
重慶分公司
重慶分公司
// 初始化相對(duì)布局器
var relativeLayout = new ht.ui.RelativeLayout();
// 初始化 3D 拓?fù)?
var g3dView = new ht.graph4d.Graph4dView();
// 初始化 HTVIEW 組件， 并將 3D 拓?fù)浞湃肫渲?
var htView = new ht.ui.HTView(g3dView);
// 布局器加載 HTVIEW 組件
relativeLayout.addView(htView, {
width: 'match_parent', // 填滿
height: 'match_parent', // 填滿
marginTop: 64, // 為 TOP 留下空間
marginLeft: 250 // 為 LEFT 留下空間
});左側(cè)的 EDITOR 部分使用 HT 的調(diào)色板組件（ht.widget.Palette）, 將檔案袋添加到調(diào)色板上，并設(shè)置為可以拖拽：
var palette = new ht.widget.Palette();
// palette 面板是將圖元都分在“組”里面，然后向“組”中添加圖元即可
var group = new ht.Group();
// 設(shè)置分組為打開的狀態(tài)
group.setExpanded(true);
// 設(shè)置組的說明
group.setName('基礎(chǔ)圖元');
palette.dm().add(group);
// 添加子圖元
var childNode = new ht.Node();
childNode.setParent(group);
childNode.setName(name);
childNode.setImage(image);
childNode.s({
'draggable': true, // true 為可拖拽
'image.stretch': 'centerUniform' // 圖片申展方式
});
palette.dm().add(childNode);在上一步中我們對(duì)調(diào)色板中的圖元屬性設(shè)置了可拖拽，此時(shí)可以實(shí)現(xiàn)拖拽圖元的動(dòng)畫。但是并不能直接將圖元拖拽到 3D 場(chǎng)景中，實(shí)現(xiàn)思路是：
在拖拽時(shí)獲取拖拽的圖元信息
拖拽到對(duì)應(yīng)位置時(shí)顯示可擺放位置
結(jié)束拖拽后在對(duì)應(yīng)位置創(chuàng)建對(duì)應(yīng)的 3D 模型
對(duì)應(yīng)代碼實(shí)現(xiàn)如下：
拖拽時(shí)獲取圖元信息
g3dView.getView().addEventListener('dragover', function(e) {
e.preventDefault();
var paletteNode = palette.dm().sm().ld();// 獲取 palette 上最后選中的節(jié)點(diǎn)
if (!paletteNode || !g3d.getDataAt(e)) return;
// 獲取鼠標(biāo)下的節(jié)點(diǎn)
var data = g3d.getDataAt(e);
if (data.s('shape3d') === '檔案柜.json') {
// 記錄文件袋拖拽到的是哪個(gè)檔案柜
g3dView._focusData = data;
}
});拖拽到對(duì)應(yīng)位置時(shí)創(chuàng)建 3D 模型，在實(shí)際實(shí)現(xiàn)過程中由于很難準(zhǔn)確地獲取到檔案柜中每一個(gè)可以擺放檔案袋的坐標(biāo)位置，所以在本例中采用了預(yù)置的方法。具體原理就是在先創(chuàng)建一個(gè)正常不可見的檔案柜模型，并在其中將檔案袋都擺放完整，在拖拽時(shí)，將此不可見的模型與將要擺放的模型重合，此時(shí)只需判斷鼠標(biāo)所在的點(diǎn)下是否存在預(yù)置的模型存在就可以知道該處是否可以創(chuàng)建 3D 模型，實(shí)現(xiàn)效果如下：
g3dView.getView().addEventListener('dragover', function(e) {
... // 舊邏輯省略
// 拖拽下來的時(shí)候設(shè)置 所有的 displayName 為 box 的節(jié)點(diǎn) 為可見 （這樣拖拽才能獲取到預(yù)置模型）
array.forEach(function(data) {
data.s('3d.visible', true);
});
var data = g3d.getDataAt(e);
if (data.s('shape3d') === '檔案柜.json') {
// 記錄文件袋拖拽到的是哪個(gè)檔案柜
g3dView._focusData = data;
// 將預(yù)置模型移動(dòng)到拖拽的柜子坐標(biāo)
shelf.p3(data.p3());
}
if(data.getDisplayName() === 'box') {
// 將對(duì)應(yīng)坐標(biāo)下預(yù)置的檔案袋模型進(jìn)行顯示
// 該屬性可修改模型的透明度，更多屬性可參考 HT 風(fēng)格手冊(cè)
data.s('shape3d.opacity', 0.8);
}
...
})
g3dView.getView().addEventListener('drop', function(e) {
// 獲取鼠標(biāo)位置模型
var data = g3dView.getDataAt(e);
if(!data) return;
// 鼠標(biāo)位置不是預(yù)置模型，直接跳過
if(data.getDisplayName() !== 'box') return;
data.s('shape3d.opacity', 0);
// 放手時(shí)候設(shè)置 所有的 displayName 為 box 的節(jié)點(diǎn) 不可見
array.forEach(function(data) {
data.s('3d.visible', false);
});
var node = new ht.Node();
node.s('shape3d', url); // 檔案袋 3D 模型地址
node.r3([Math.PI/2, -Math.PI/2, 0]); // 旋轉(zhuǎn)檔案袋模型， 使其平放
node.p3(data.p3());
node.setParent(g3dView._focusData);
node.setHost(g3dView._focusData);
});上面我們已經(jīng)實(shí)現(xiàn)了檔案袋拖拽至 3D 場(chǎng)景的效果，但是我們可以發(fā)現(xiàn)檔案袋模型遠(yuǎn)小于柜子，要將檔案袋擺放到正確的位置并不是那么容易。所以此時(shí)我們可以將需要操作的檔案柜放大到正中間，其它模型進(jìn)行虛化處理。
// 3D 拓?fù)浣换ケO(jiān)聽
g3dView.mi(function(e){
if(e.kind === 'doubleClickData') {
// 雙擊事件
var shape3d = e.data.s('shape3d'),
parentShape3d = e.data.getParent() && e.data.getParent().s('shape3d');
if (shape3d && shape3d.indexOf('檔案柜') > -1) {
// 重點(diǎn)突出檔案柜
showDetail(e.data);
}
else if (parentShape3d && parentShape3d.indexOf('檔案柜') > -1) {
showDetail(e.data.getParent());
}
}
});
showDetail = function(data) {
// 保存進(jìn)入虛化狀態(tài)前 視角 與 中心點(diǎn)
eyeBack = ht.Default.clone(graph4dView.getEye());
centerBack = ht.Default.clone(graph4dView.getCenter());
// 設(shè)置相機(jī)指向配置
var opt = {};
opt.animation = true;
opt.ratio = 1;
opt.direction = [1, 0.5, 0];
opt.center = [data.getX(), 100, data.getY()];
graph4dView.flyTo(data, opt);
focusData = data;
data.s('select.brightness', 1);
dataModel.each(function (d) {
if (d === focusData || (!d.s('3d.selectable') && d.getTag() !== 'wall')
|| d.getParent() === focusData || d.getDisplayName() === 'box') return;
// 將拓?fù)渲谐艘僮鞯墓褡?與柜子中檔案袋 以及墻外 透明度都設(shè)置為 opacity (0~1)
// 保存設(shè)置前配置， 還原用
if (!opacityMap[d.getId()]) {
opacityMap[d.getId()] = {
'shape3d.opacity': d.s('shape3d.opacity'),
'shape3d.transparent': d.s('shape3d.transparent'),
'all.opacity': d.s('all.opacity'),
'all.transparent': d.s('all.transparent'),
'left.opacity': d.s('left.opacity'),
'left.transparent': d.s('left.transparent'),
'right.opacity': d.s('right.opacity'),
'right.transparent': d.s('right.transparent'),
'front.opacity': d.s('front.opacity'),
'front.transparent': d.s('front.transparent'),
'back.opacity': d.s('back.opacity'),
'back.transparent': d.s('back.transparent'),
'top.opacity': d.s('top.opacity'),
'top.transparent': d.s('top.transparent'),
'bottom.opacity': d.s('bottom.opacity'),
'bottom.transparent': d.s('bottom.transparent'),
'3d.selectable': d.s('3d.selectable')
}
}
// 透明度設(shè)置為 opacity
d.s({
'shape3d.opacity': opacity,
'shape3d.transparent': true,
'all.opacity': opacity,
'all.transparent': true,
'left.opacity': opacity,
'left.transparent': true,
'right.opacity': opacity,
'right.transparent': true,
'front.opacity': opacity,
'front.transparent': true,
'back.opacity': opacity,
'back.transparent': true,
'top.opacity': opacity,
'top.transparent': true,
'bottom.opacity': opacity,
'bottom.transparent': true,
'3d.selectable': false
});
});
}退出虛化模式，以監(jiān)控 3D 拓?fù)涞倪x中變化來實(shí)現(xiàn)
g3dView.dm().ms(function(e) {
var lastData = g3dView.sm().ld();
// 判斷是否進(jìn)行虛化
if(focusData) {
if(lastData === focusData || (lastData && lastData.getParetn() === focusData)) return;
g3dView.setEye(eyeBack);
g3dView.setCenter(centerBack);
// 還原模型的原透明度
g3dView.dm().each(function (d) {
if (d === focusData) return;
d.s(opacityMap[d.getId()]);
});
focusData.s('select.brightness', 0.7);
focusData = null;
eyeBack = null;
centerBack = null;
}
});在 HT 的組件中有提供快速查詢插件 QuickFinder ，此次我們就運(yùn)用該插件來實(shí)現(xiàn)簡(jiǎn)單的檔案編號(hào)查詢
// 初始化 輸入框
var textField = new ht.ui.TextField;
textField.setIcon("imgs/search.json");
textField.setIconPosition("left");
// 初始化查詢器，條件：id
var finder = new ht.QuickFinder(library.view.dm, "id");
// 輸入框點(diǎn)擊查詢按鈕時(shí)觸發(fā)
textField.on('p:value', function(e) {
var dm = library.view.dm;
var value = e.newValue;
var datas = finder.find(value);
// 查詢到對(duì)應(yīng)的圖元時(shí)，我們將第一個(gè)結(jié)果進(jìn)行選中
if (datas && datas.size() > 0) {
library.view.dm.sm().ss(datas.get(0));
}
});看完了這篇文章，相信你對(duì)HTML5的WebGL3D檔案館圖書可視化管理系統(tǒng)的實(shí)現(xiàn)方法有了一定的了解，想了解更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！
