HT for Web自定義3D模型的WebGL應用

有很多朋友詢問《HTML5 Web 客戶端五種離線存儲方式彙總》文章例子的3D表計模型是如何生成的，這個例子是經過導入3dmax設計好的表計模型，而後經過obj格式導入到HT for Web系統中進行控制，這種方式特別適合複雜模型的應用場景，但對於監控系統的不少應用其實並不須要專業的美工使用專業的3D編輯工具，徹底經過HT for Web預約義的和內置自定義3D模型API就能知足不少應用，這裏介紹幾種場景的自定義3D模型應用。

上圖是採用HT提供的createRingModel函數，經過編輯2D的多邊形生成對應的環狀的3D模型，對於花瓶碗杯等環形對稱的物體很適合採用該函數構建。除了createRingModel外，HT的建模手冊中的custommodel自定義模型例子，還採用了createExtrusionModel等更多的自定義模型API構建了一個餐桌椅和牆面的場景，其效果以下：

HT內置的基礎模型也有不少參數可調節設置出多種模型效果，參見HT建模手冊的以下例子：

自定義模型還可用於構建如機房、機框、板卡和端口的常見電信網管監控模型：http://v.youku.com/v_show/id_XODY2ODc0ODY0.html

該EMS設備管理系統例子3D模型和Tree組件經過HT強大靈活的模型與圖形的數據綁定功能，從而實現樹上自定義圖標和3D自定義模型的數據共享，實時一致刷新效果，如下爲該EMS例子的所有JavaScript代碼：

function init(){                                 
	dm = new ht.DataModel();                
	treeView = new ht.widget.TreeView(dm);                                                                                                 
	g3d = new ht.graph3d.Graph3dView(dm);                          
	mainSplit = new ht.widget.SplitView(treeView, g3d, 'h', 0.2);   

	view = mainSplit.getView();  
	view.className = 'main';
	document.body.appendChild(view);    
	window.addEventListener('resize', function (e) {
		mainSplit.invalidate();
	}, false);                         

	register2DImage();
	register3DModel();
	addModel(); 

	g3d.setGridVisible(true); 
	g3d.setGridSize(30);
	g3d.setGridGap(50);
	g3d.setEye([200, 200, 600]);
	g3d.setCenter([0, 200, 0]);
	g3d.getView().style.background = '#F9F9F9';                 
	g3d.getLabel = function(data){
		return data.s('label');
	};
	dm.sm().setFilterFunc(function(data){
		return data !== wall;
	});
	treeView.setVisibleFunc(function(data){
		return data !== wall;
	});                
	treeView.expandAll();
}

function register2DImage(){
	ht.Default.setImage('ems-frame', {
		width: 18,
		height: 18,
		comps: [
			{
				type: 'rect',
				rect: [5, 4, 8, 11],
				borderWidth: 2,
				borderColor: '#34495E'
			}                         
	]});        

	ht.Default.setImage('ems-pane', {
		width: 18,
		height: 18,
		comps: [
			{
				type: 'rect',
				rect: [0, 4, 18, 10],
				background: {func: 'style@shape3d.color'}
			}                         
	]});     

	ht.Default.setImage('ems-block', {
		width: 18,
		height: 18,
		comps: [
			{
				type: 'circle',
				rect: [0, 2, 18, 10],
				background: {
					func: 'attr@circleColor',
					value: '#3498DB'                               
				}
			}, 
			{
				type: 'rect',
				rect: [4, 14, 10, 3],
				background: {
					func: 'attr@rectColor',
					value: '#3498DB'                               
				}
			}                           
	]});                 
}

function register3DModel(){
	ht.Default.setShape3dModel('ems-frame', ht.Default.createFrameModel(0.1, 0, 0.1, {top: true, bottom: true, back: true}));       

	ht.Default.setShape3dModel('ems-block', [
		{
			shape3d: ht.Default.createCylinderModel(32, 0, 32, false, false, true, true),   
			r3: [Math.PI/2, 0, 0],   
			color: {
				func: 'attr@circleColor',
				value: '#3498DB'
			}     
		},
		{
			shape3d: 'box',
			s3: [1, 0.2, 1], 
			t3: [0, -0.7, 0],
			color: {
				func: 'attr@rectColor',
				value: '#3498DB'
			}
		}
	]);                  
}

function addModel(){
	wall = new ht.Shape();
	wall.setName('Wall');
	wall.setPoints(new ht.List([
		{x: -750, y: 750},
		{x: -750, y: -750},
		{x: 750, y: -750},
		{x: 750, y: 750}
	]));
	wall.setTall(400);
	wall.setElevation(200);
	wall.s({
		'shape.border.width': 5,
		'shape.border.color': 'rgba(20, 20, 20, 0.8)',
		'shape.background': null,    
		'all.color': 'rgba(102, 192, 218, 0.95)',
		'all.transparent': true,
		'all.reverse.cull': true
	});
	dm.add(wall);                                               

	var frame = new ht.Node();
	frame.setName('Main Frame');
	frame.setIcon('ems-frame');
	frame.s3(120, 300, 120);
	frame.p3(0, 152, 0);
	frame.s({
		'shape3d': 'ems-frame',
		'shape3d.color': '#34495E',
		'label': 'www.hightopo.com',
		'label.color': 'white',
		'label.background': '#3498DB',
		'label.position': 6,
		'label.t3': [-6, -54, 6],
		'label.r3': [0, Math.PI/4, Math.PI/2]
	});
	dm.add(frame);                                

	var colors = ['#9C8CE7', '#00C59D', '#A741B6', '#F5C700', '#31485F', '#F81F25', '#00B862', '#3B7DA7'];
	for(var i=0; i<6; i++){
		var pane = new ht.Node();
		pane.setIcon('ems-pane');
		pane.setName('Pane' + (i+1));
		pane.s3(108, 16, 8);                    
		pane.s({
			'shape3d': 'box',
			'shape3d.color': '#ECF0F1'
		});
		pane.setHost(frame);
		pane.setParent(frame);                     
		dm.add(pane);

		if(i < 2){
			for(var j=0; j<8; j++){
				var block = new ht.Node();
				block.setName('block ' + i + '*' + j);
				block.s3(8, 8, 12);                
				block.p3(-39+j*11, 1, 0);
				block.setHost(pane);
				block.setParent(pane); 
				block.setIcon('ems-block');
				block.s({
					'shape3d': 'ems-block'
				});                       
				if(i === 1){
					block.a({
						'circleColor': colors[j],
						'rectColor': '#00F2CF'
					});

				}
				dm.add(block);                                        
			}                     
		}else{
			pane.setName('Pane' + (i+1) + ' [ Empty ]');
			pane.s({
				'shape3d.color': '#BDC3C7'
			});
		}                   
		pane.p3(0, 265-i*27, 54);
	}                
}