HT for Web自定义3D模型的WebGL应用

标签: ht web 定义 | 发表时间:2015-01-08 09:33 | 作者:u013161495
出处:http://blog.csdn.net

Screen Shot 2015-01-07 at 11.53.23 PM

有不少朋友询问《 HTML5 Web 客户端五种离线存储方式汇总》文章例子的3D表计模型是如何生成的,这个例子是通过导入3dmax设计好的表计模型,然后通过obj格式导入到 HT for Web系统中进行控制,这种方式特别适合复杂模型的应用场景,但对于监控系统的很多应用其实并不需要专业的美工使用专业的3D编辑工具,完全通过 HT for Web预定义的和内置自定义3D模型API就能满足很多应用,这里介绍几种场景的自定义3D模型应用。

Screen Shot 2015-01-07 at 11.48.45 PM

上图是采用 HT提供的 createRingModel函数,通过编辑2D的多边形生成对应的环状的3D模型,对于花瓶碗杯等环形对称的物体很适合采用该函数构建。除了 createRingModel外,HT的建模手册中的custommodel自定义模型例子,还采用了createExtrusionModel等更多的自定义模型API构建了一个餐桌椅和墙面的场景,其效果如下:

Screen Shot 2015-01-07 at 11.46.14 PM

HT内置的基础模型也有很多参数可调节设置出多种模型效果,参见 HT建模手册的如下例子:

Screen Shot 2015-01-07 at 11.49.56 PM

自定义模型还可用于构建如机房、机框、板卡和端口的常见电信网管监控模型:

Screen Shot 2015-01-07 at 11.50.54 PM

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


作者:u013161495 发表于2015-1-8 9:33:13 原文链接
阅读:78 评论:0 查看评论

相关 [ht web 定义] 推荐:

HT for Web自定义3D模型的WebGL应用

- - CSDN博客推荐文章
上图是采用 HT提供的 createRingModel函数,通过编辑2D的多边形生成对应的环状的3D模型,对于花瓶碗杯等环形对称的物体很适合采用该函数构建. 除了 createRingModel外,HT的建模手册中的custommodel自定义模型例子,还采用了createExtrusionModel等更多的自定义模型API构建了一个餐桌椅和墙面的场景,其效果如下:.

基于HT for Web的Web SCADA工控移动应用

- - ITeye博客
最近客户采用 HT for Web图形界面组件,实现了油田燃气管网和供水管网等工控SCADA的HMI人机界面,并将系统运行在平板和手机等Android和iOS移动终端,在此我们在技术支持过程中的一些知识点进行些梳理和分享,希望对有志于Web SCADA领域的伙伴们提供些帮助. 移动终端呈现方面,HMI界面布局应用和游戏领域有类似的问题,一般对横版或者竖版会有更好的布局效果,例如有些游戏只支持横版的玩法,这对于采用Native的App应用来说不成问题,可将App配置成只能横向或者纵向布局,但对于移动终端浏览器就有点尴尬,目前大部分终端你是不能限制用户旋转平面导致布局变化.

HT实验室:Any.Do 极致简约而强大

- - Tech2IPO
[HT观点] 简单并不意味着欠缺或者低劣,也不意味着不注重装饰或者完全赤裸裸. 而是说装饰应该紧密贴近设计本身,任何无关的要素都应予以剔除. 本期评测:安卓版Any.Do . 简约是Any.Do最大的特点,无论是界面设计,还是功能流程,没有一丝多余的设计. Any.Do简约却并不简单,功能设计的实现效果非常好,操作简单易用,功能实用.

基于HT的CSG功能构建HTML5的3D书架

- - ITeye博客
构造实体几何 CSG全称 Constructive solid geometry,是3D计算机图形学中构建模型的常用技术,可通过合并Union、相减Subtraction和相交Intersction的三种取集的逻辑运算,将立方体、圆柱体和棱柱等简单的基础模型,嵌套组合成更复杂三维模型. 回到我们今天要搞的3D书架例子,我们将基于 HT for Web的3D引擎来实现, HT已经内置了CSG功能的模型封装,我们通过构建CSGNode图元对象,该类型图元可对Host吸附的图元进行CSG技术的合集、并集和补集的三种操作,一般运用中裁剪的方式较为常用,因此CSGNode默认对Host图元的操作就是裁剪.

Web未死

- Sinan - GeekPark 捕风捉影
App的极限已经浮现,而Web则是突破此极限,推动下一个数字时代革命的起点. 距离美国《连线》杂志发表《Web已死,互联网永生》这篇文章还不到一年的时间,业界为Web平反的声音渐起. 2010年1月,苹果发布iPad,紧随其后在6月又发布了iPhone4. 没有人质疑过苹果的iTunes+App的商业模式,App可谓如日中天.

web的演变

- 酿泉 - 前端观察
这是一个基于GAE的项目,有mgmt design、GOOD、Hyperakt和Vizzuality开发,也有Google chrome团队的参与,记录了浏览器与互联网技术的演变. 不多介绍,直接去看看吧:Evolution Of Web. 值得一提的是,这个项目的代码很不错,值得学习一下.

Web Apps来袭

- - HTML5研究小组
如同历史上任何一次互联网基础标准的变化都会在随后几年中带来应用创新的大爆发一样,当HTML5在2011年逐渐被主流厂商所接受之后,围绕Web Apps领域的创新风暴正山雨欲来. 2012年1月12日,老牌传媒集团《金融时报》(Financial Times,以下简称FT)宣布收购为其开发移动Web App的研发公司Assanka ,这样,FT将不再以外包的形式雇佣Assanka为其打造移动Web App,而可以直接让它在内部进行开发.

Web Service入门

- - 博客 - 伯乐在线
本文来自文章作者 @Jeremy黄国华 的投稿. 伯乐在线也欢迎其他朋友投稿,投稿时记得留下您的新浪微博账号哦~. 目前对Web Service没有统一的定义,定义一:Web Service是自包含的、模块化的应用程序,它可以在Web中被描述、发布、查找以及调用. 定义二:Web Service是基于网络的、分布式的模块化组件,它执行特定的任务,遵守具体的技术规范,这些规范使得Web Service能与其他兼任的组件进行操作.

Google 的 Web Desinger

- - 极客公园-GeekPark
[核心提示]Google 的免费 Web 设计工具虽然现在主要目的是为广告设计,今后会不会成为 Chrome 应用的开发工具. 听到 Google 推出了一个名为 Google Web Designer 的网页设计还有点惊讶. 虽然 Google 是 Web 技术的大力倡导者,毕竟自己严重依赖这个平台,但市面上相关的产品太多了,从专业的开发工具到小白的所见即所得软件数不胜数,还有 Adobe 这个专业玩家.