`
xhload3d
  • 浏览: 207560 次
社区版块
存档分类
最新评论

基于HT for Web 3D呈现Box2DJS物理引擎

阅读更多

上篇我们基于HT for Web呈现了A* Search Algorithm的3D寻路效果,这篇我们将采用HT for Web 3D来呈现Box2DJS物理引擎的碰撞效果,同上篇其实Box2DJS只是二维的平面碰撞物理引擎,但同样通过3D的呈现能让人更直观的体验到碰撞效果,先上张最终例子效果图:

Screen Shot 2014-11-25 at 8.05.11 PM

Box2D最早是Erin Catto在GDC大会上的一个展示例子,后来不断完善成C++的开源物理引擎库,这些年了衍生出Java、ActionScript以及JS等版本,被广泛应用在游戏领域。说其丰富的确很丰富,说乱也够乱的,找个Box2D的JS版就有N多选择,而且不同版本API还有差异,可参考这里的对比 http://stackoverflow.com/questions/7628078/which-box2d-javascript-library-should-i-use

虽然版本较多有点乱,但各个版本的基本原理和API都类似,以下为我基于Box2DJS融合HT for Web写的例子代码。Box2D有很多参数功能点,这里例子我们仅呈现最基础简单的要素,主要让大家理解Box2DJS引擎的基本使用,以及呈现上如何与HT for Web结合。

function init() {
	dm = new ht.DataModel();
	g3d = new ht.graph3d.Graph3dView(dm);
	g3d.setGridVisible(true);
	g3d.addToDOM();
	g3d.setEye(100, 50, 150);

	// Define the world
	var gravity = new b2Vec2(0, -100);
	var doSleep = false;
	world = new b2World(gravity, doSleep);

	createNode([0, -3, 0], [100, 6, 100], false, 0);
	createNode([-100, -50, 0], [400, 6, 100], false, -Math.PI/8);
	createNode([100, -50, 0], [50, 6, 100], false, Math.PI/6);

	createNode([1, 50, 0], [10, 10, 10], true);
	createNode([-1, 90, 0], [10, 10, 10], true);

	render();
}

function createNode(p3, s3, dynamic, angle) {
	var node = new ht.Node();
	node.p3(p3);
	node.s3(s3);               
	node.setRotationZ(angle == null ? Math.PI * Math.random() : angle);
	dm.add(node);

	var fixDef = new b2FixtureDef();
	if (dynamic) {
		fixDef.density = 0.5;
		fixDef.friction = 0.5;
		fixDef.restitution = 0.5;                    
		node.s({
			'all.color': 'red',
			'batch': 'dynamic'
		});
	} else {
		fixDef.density = 0.0;                    
	}

	var shape = new b2PolygonShape();
	shape.SetAsBox(s3[0] / 2, s3[1] / 2);
	fixDef.shape = shape;

	var bodyDef = new b2BodyDef();
	bodyDef.type = dynamic ? b2Body.b2_dynamicBody : b2Body.b2_staticBody;
	bodyDef.position.Set(p3[0], p3[1]);
	bodyDef.angle = node.getRotationZ();
	bodyDef.userData = node;

	world.CreateBody(bodyDef).CreateFixture(fixDef);
}

count = 0
function render() {
	count++;
	if(count % 10 === 0){
		createNode([-1, 50, 0], [10, 10, 10], true);
	}                
	world.Step(1 / 60, 10, 10);
	var list = world.GetBodyList();
	while (list) {                                              
		var node = list.m_userData;
		if(node){
			var position = list.GetPosition();
			if(position.y < -150 || g3d.isSelected(node)){
				dm.remove(node);
				world.DestroyBody(list);
			}else{
				node.p3(position.x, position.y, 0);
				node.setRotationZ(list.GetAngle());                            
			}                                              
		}                    
		list = list.GetNext();
	}                    
	requestAnimationFrame(render);
}

 以上代码在createNode中即构建的HT for Web的Node对象,同时构建了Box2D的Body对象,并通过userData属性关联在一起,在requestAnimationFrame的渲染过程,先通过world.Step(1 / 60, 10, 10);更新物理引擎的内部运算,然后遍历所有Body元素将运算结果,也就是Body的位置和旋转角度等信息同步到HT for Web的Node对象,从而达到了HT for Web和Box2DJS的强强结合各施其才。

例子中物体掉落到-150以下我就删除了Box2DJS以及HT的DataModel中对应的数据元素,同时选中图元也会自动删除图元,count % 10 === 0 这个用来没十次刷新产生一个新的立方体。Box2D还可以玩出很多花样,如果数据量大也可以考虑参考《3D拓扑自动布局之Web Workers篇》,将Box2DJS的密集运算在WebWork中执行,我没评估过性能的提升幅度,数据量大时WebWork和GUI线程的数据序列化传递也会有负担需注意,最终的例子3D效果玩起来还是挺有趣的:http://v.youku.com/v_show/id_XODM0OTQ0NzEy.html

<iframe src="http://player.youku.com/embed/XODM0OTQ0NzEy" frameborder="0" width="510" height="498"></iframe>

Screen Shot 2014-11-25 at 8.06.57 PM

2
0
分享到:
评论

相关推荐

    HT for Web - Box2d

    一直在找苦苦寻找一个Box2D的物理引擎javascript整合例子,发现 http://www.hightopo.com/blog/275.html 这篇文章的例子效果非常棒,通过HT for Web的3D引擎直观的呈现Box2D物理碰撞的实时运行效果,这么强大的3D...

    HT for Web 3d引擎示例加api说明文档

    HT for Web,通常简称为 HT,这是一个基于 JavaScript 开发的 WebGL 引擎。可用于 2D/3D 可视化开发,其核心文件只有一个,就是 ”ht.js”。在 index.html 中使用 script 标签进入后便可使用。 完全版本效果:...

    HT for Web Demo

    "HT for Web Demo" 是一个基于JavaScript的3D可视化演示项目,主要利用了海马云(Hightopo)提供的HT for Web库。海马云是一家专注于2D/3D图形渲染及数据可视化的技术提供商,其开发的HT for Web库是一个强大的Web...

    HT for Web 入门手册

    HT for Web是基于HTML5标准的企业应用图形界面一站式解决方案, 其包含通用组件、拓扑组件和3D渲染引擎等丰富的图形界面开发类库,提供了完全基于HTML5的矢量编辑器、拓扑编辑器及 3D场景编辑器等多套可视化设计工具...

    基于HT for Web矢量实现HTML5上传文件进度条

    总之,基于HT for Web的HTML5文件上传进度条实现结合了现代Web技术,如Web Workers、HTML5 File API和Node.js的Formidable库,提供了高效、流畅的文件上传体验。开发者可以通过这种方式创建更先进的Web应用程序,...

    ht.js html5 canvas2d3d教程手册

    ht.js开发实例最新版本,通过这个版本开发html5工业设计智慧平台,经过在网上寻找发现 http://www.hightopo.com/blog/275.html 这篇文章的例子效果非常棒,通过HT for Web的3D引擎直观的呈现Box2D物理碰撞的实时运行...

    基于HT for Web矢量实现HTML5文件上传进度条

    标题中的“基于HT for Web矢量实现HTML5文件上传进度条”是指利用HT for Web库,结合HTML5的File API,来创建一个可以显示文件上传进度的矢量图形界面。HT for Web是一款强大的Web可视化工具,它允许开发者通过矢量...

    hightopo HT for Web(hightopo.zip)

    4. **数据驱动**:HT for Web基于数据驱动的模型,使得数据和视图之间保持松耦合,更新数据就能自动刷新视图,大大简化了数据绑定和更新的逻辑。 5. **丰富的组件库**:HT for Web提供了一系列预设的UI组件,如表格...

    HT for Web基础动画介绍

    HT for Web是一款基于HTML5的2D/3D图形和交互开发工具,广泛应用于数据可视化、模拟仿真、工业互联网等领域。通过这个标题,我们可以推测文章将探讨如何利用HT框架创建基本的Web动画效果。 【描述】虽然描述部分为...

    ht-for-web

    【ht-for-web】是一款专为前端开发者设计的框架,主要用于创建和管理拓扑图以及页面布局。这个框架的强大之处在于它的灵活性和可定制性,使得开发者可以轻松地构建出复杂且交互性强的可视化应用。 在拓扑图制作方面...

    HT for Web列表和3D拓扑组件的拖拽应用

    NULL 博文链接:https://xhload3d.iteye.com/blog/2226706

    HT FOR WEB 自定义图标菜单

    HT FOR WEB 一套强大的基于 WebGL 技术的 3D 图形引擎,编辑器下,左边菜单可自定义控制多个不同的菜单操作。

    在ht5页面端实现threejs模型环绕观看

    Three.js是一个基于WebGL的JavaScript库,它简化了WebGL的复杂性,让开发者能够更容易地创建3D交互式场景。 在Three.js中,要实现3D模型的加载和环绕观看,我们需要经过以下几个步骤: 1. **设置场景(Scene)**:在...

    基于HT2015和AD421的HART协议物理层设计

    ### 基于HT2015和AD421的HART协议物理层设计 #### HART协议及其层次结构 HART(Highway Addressable Remote Transducer)协议是一种广泛应用于工业自动化领域的通信协议,它允许传统的4~20mA模拟信号与数字信号在...

    HTML5 WebGL 3D 仓储管理系统

    WebGL(Web Graphics Library)是基于OpenGL标准的一个JavaScript API,用于在任何兼容的Web浏览器中进行三维图形渲染,无需插件支持。WebGL允许开发者在浏览器环境中创建复杂的3D场景,与用户进行交互。借助WebGL,...

    基于HT5017芯片的SoC单相智能电表的设计_SOC_HT5017_电表_基于HT5017芯片SoC单相智能电表_

    本篇将详细探讨基于HT5017芯片的SoC(System on Chip)单相智能电表的设计原理、功能特性以及应用优势。 HT5017是一款专为智能电表设计的高性能SoC芯片,集成了微控制器、模拟前端(AFE)、通信接口等多种功能模块...

    基于HT32F1656芯片的智能饮水机设计.pdf

    本篇关于“基于HT32F1656芯片的智能饮水机设计”的文献,详细介绍了将传统饮水机升级为一款集触控、声控、Wi-Fi遥控功能于一体的智能饮水机的设计过程。文中主要使用HT32F1656作为主控制芯片,并通过集成多个模块...

    基于HT5017芯片的SoC单相智能电表_SOC_HT5017_电表_基于HT5017芯片的SoC单相智能电表_

    **基于HT5017芯片的SoC单相智能电表** 在当今的电力系统中,智能电表已经成为不可或缺的一部分,它们提供了精确的计量、实时数据传输和远程控制功能。HT5017是一款专为单相电表设计的片上系统(System on Chip, SoC...

Global site tag (gtag.js) - Google Analytics