文档章节

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

xhload3d
 xhload3d
发布于 2015/01/08 00:34
字数 1018
阅读 5988
收藏 21

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

自定义模型还可用于构建如机房、机框、板卡和端口的常见电信网管监控模型:http://v.youku.com/v_show/id_XODY2ODc0ODY0.html

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


© 著作权归作者所有

xhload3d
粉丝 194
博文 174
码字总数 362206
作品 0
崇明
私信 提问
加载中

评论(7)

xhload3d
xhload3d 博主
www.hightopo.com 申请
张勃
大神能发一下源码吗?120228664@qq.com
j
joey2010s
能够提供下载使用,谢谢! 258274435@qq.com
h
hanspeed
希望得到源代码,346138434@qq.com 谢谢
h
himyspace
赞,收藏
耿世玉
耿世玉

引用来自“cybernail”的评论

赞,收藏

不摸
英特那雄纳尔
英特那雄纳尔
赞,收藏
WebGL 3D on iOS8 正式版

今天iOS8终于正式发布了,升级了手头设备后对我来说最重要的就是测试WebGL的3D是否真的能跑苹果的系统了,跑了多个HT for Web的3D例子都非常流畅,比Android刚支持WebGL时好太多了,基本还没...

xhload3d
2014/09/18
356
0
基于HTML5实现的Heatmap热图3D应用

Heatmap热图通过众多数据点信息,汇聚成直观可视化颜色效果,热图已广泛被应用于气象预报、医疗成像、机房温度监控等行业,甚至应用于竞技体育领域的数据分析。 已有众多文章分享了生成Heatm...

xhload3d
2014/09/12
6.6K
35
基于HTML5技术的电力3D监控应用(四)

回答了知乎问题较长,一些使用WebGL的经验: 正好逛到这个问题,正好是2013年底,正好最近基于的HT for Web 3D做的电力项目收尾,正好用到的就是WebGL技术,因此说说自己的感觉供参考: 1、2...

xhload3d
2013/12/21
676
0
8个惊艳的Javascript WebGL示例

WebGL是一种3D绘图标准,这种绘图技术标准允许把javascript和OpenGL ES 2.0结合在一起,通过增加OpenGL ES 2.0的一个javascript绑定,WebGL可以为HTML5 Canvas提供硬件3D加速渲染,这样Web开...

dengjianqiang200
2011/04/19
3.7K
10
WebGL助力打造炫酷网页体验

正如网页版《刺客信条:海盗传奇(Assassin’s Creed Pirates)》游戏的广告语“What the web can be”所描述的那样,微软IE团队与知名游戏开发厂商育碧(Ubisoft)通过该游戏再次诠释了网页...

祥子加油
2014/06/27
409
9

没有更多内容

加载失败,请刷新页面

加载更多

Mybatis Plus删除

/** @author beth @data 2019-10-17 00:30 */ @RunWith(SpringRunner.class) @SpringBootTest public class DeleteTest { @Autowired private UserInfoMapper userInfoMapper; /** 根据id删除......

一个yuanbeth
今天
4
0
总结

一、设计模式 简单工厂:一个简单而且比较杂的工厂,可以创建任何对象给你 复杂工厂:先创建一种基础类型的工厂接口,然后各自集成实现这个接口,但是每个工厂都是这个基础类的扩展分类,spr...

BobwithB
今天
4
0
java内存模型

前言 Java作为一种面向对象的,跨平台语言,其对象、内存等一直是比较难的知识点。而且很多概念的名称看起来又那么相似,很多人会傻傻分不清楚。比如本文我们要讨论的JVM内存结构、Java内存模...

ls_cherish
今天
4
0
友元函数强制转换

友元函数强制转换 p522

天王盖地虎626
昨天
5
0
js中实现页面跳转(返回前一页、后一页)

本文转载于:专业的前端网站➸js中实现页面跳转(返回前一页、后一页) 一:JS 重载页面,本地刷新,返回上一页 复制代码代码如下: <a href="javascript:history.go(-1)">返回上一页</a> <a h...

前端老手
昨天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部