基于HTML5及WebGL开发的2D3D第一人称漫游进行碰撞检测
为了实现一个基于HTML5的场景小游戏,我采用了HT for Web来实现,短短200行代码,我就能实现用“第一人称”来操作前进后退上下左右,并且实现了碰撞检测。
先来看下实现的效果:http://hightopo.com/guide/guide/core/3d/ht-3d-guide.html#ref_collision
或者http://v.youku.com/v_show/id_XMzA5MzUzODc4NA==.html?spm=a2h3j.8428770.3416059.1视频中出现的帧的问题是我屏幕录制器的问题,真正操作的时候不会有,建议用上面的链接自己操作玩玩,鼠标或者触屏都可以,不过我觉得最方便的还是操作键盘wsad控制上下左右。
我的想法是先把场景布局好,代码如下:
createHT([100, -20, 100], '#E74C3C'); createHT([-100, -20, 100], '#1ABC9C'); createHT([100, -20, -100], '#3498DB'); createHT([-100, -20, -100], '#9B59B6'); createCurve([0, -20, 0]); createCircle();
这几个都是自定义的函数,createHT为描绘HT形状的图,场景中有四个,所以调用了四次;createCurve是描绘场景中间的黄色的曲线;createCircle是描绘最外层的圆,因为不是全包的圆,所以也是描点画的。
HT中封装了一个组件,ht.Shape(以下简称Shape),能够根据描点来自由描绘图形,可以通过shape.setPoints(pointsArray)将所有的点添加进数组中,并且设置到shape中,然后通过setSegments()设置线段数组信息,也就是用什么样的方式来连接两点,在Shape手册中有着重描写,感兴趣的可以参考HT for Web Shape 手册。抽其中的一个描绘点的函数来看看:
function createHT(p3, color){ shape = new ht.Shape(); shape.s({ 'shape.background': null, 'shape.border.width': 10, 'shape.border.color': color, 'all.color': color }); shape.setTall(40); shape.setThickness(5); shape.setPoints([ // draw H {x: 20, y: 0}, {x: 20, y: 100}, {x: 20, y: 50}, {x: 80, y: 50}, {x: 80, y: 0}, {x: 80, y: 100}, // draw T {x: 120, y: 0}, {x: 180, y: 0}, {x: 150, y: 0}, {x: 150, y: 100} ]); shape.setSegments([ // draw H 1, // moveTo 2, // lineTo 1, // moveTo 2, // lineTo 1, // moveTo 2, // lineTo // draw T 1, // moveTo 2, // lineTo 1, // moveTo 2 // lineTo ]); shape.p3(p3); dataModel.add(shape); return shape; }
因为“HT”这个字眼要描绘的点比较多,所以代码看起来有点大,如果你看到如何描绘一个不完全的圆用20行代码来完成,而且包括样式,还是会惊讶的:
shape = new ht.Shape(); shape.s({ 'shape.background': null, 'shape.border.width': 10, 'shape.border.color': '#D26911', 'all.color': '#D26911' }); shape.setTall(40); shape.p3(0, -20, 0); shape.setThickness(10); var r = 300; for(var i=0; i<36; i++){ var angle = Math.PI * 2 * i / 36; shape.addPoint({ x: r * Math.cos(angle), y: r * Math.sin(angle) }); } dataModel.add(shape); return shape;
场景设置完毕,接下来要将在3d中“我”处于的位置在2d中也显示出来。首先我得先设置“我”是“第一人称漫游模式”,直接将g3d.setFirstPersonMode(true)即可。第一人称漫游模式本质是控制eye和center,如果没有设置第一人称漫游模式,那么鼠标或者触控板拖拽会绕着center旋转。详情参考HT for Web 3D手册。
因为HT 3D中封装了两个方法getEye和getCenter,这两个方法分别是获取camera的位置和目标中心点的位置,前者按照想象来说就比方你头上有个摄像机,你走到哪里它的中心点就拍摄到哪里,可以很方便的记录你的位置;后者就相当于你看出去的位置,但是这里跟我们人不太一样,因为人是可以广度看到大范围的,但是这个center相当于你眼球和都不能转动,是正前方的某一点的位置就是你的视线聚焦位置。
了解了getEye和getCenter后我们就可以获取当前位置和视线位置了:
g2d.addTopPainter(function(g){ var eye = g3d.getEye(), center = g3d.getCenter(); g.fillStyle = 'red'; g.strokeStyle = 'black'; g.lineWidth = 1; g.beginPath(); g.arc(eye[0], eye[2], 12, 0, Math.PI * 2, true); //绘制圆,而且还能实时获取3d中“我”的位置 g.fill(); g.stroke(); g.strokeStyle = 'black'; g.lineWidth = 2; g.beginPath(); g.moveTo(eye[0], eye[2]); g.lineTo(center[0], center[2]); //绘制线,能实时更改“我”和“我的视线位置” 之间的线段 g.stroke(); });
但是在代码中我们发现,这个方法只被绘制了一次,如果不一直重绘,那么2d界面的“我”的位置和移动也是不会变的,所以我们又监听了3d中属性的变化:
g3d.mp(function(e){//根据3d上的“我”的位置和视线来实时更新2d界面 if(e.property === 'eye' || e.property === 'center'){ //如果e属性变化为get/setEye,get/setCenter,那么重绘2d界面 g2d.redraw(); } });
在2D中,我可以编辑图元,移动它的点,变化某个图元的大小,等等功能,只要变化了图元,那么我的碰撞测试就得更新:
function updateBoundaries(){ boundaries = []; dataModel.each(function(data){//HT curve circle boundaries = boundaries.concat(ht.Default.toBoundaries(data.getPoints(), data.getSegments())); // ht.Default.toBoundaries将不连续曲线转化成Graph3dView#setBoundaries(bs)需要的参数格式 }); g3d.setBoundaries(boundaries);//setBoundary()可指定碰撞边界 }
那么我们好奇的点在于,如何在拖拽图元改变大小的时候还能保持碰撞检测呢?
HT中有一个对于属性变化的监听事件addDataPropertyChangeListener(),可简写为md(),在我们拖拽图元的时候,绘制这个图元的基础points就会被改变,所以我们只要监听points有没有被改变就行了,如何使用这个事件可以参考HT for Web 数据模型手册
dataModel.md(function(e){//data属性变化事件 if(e.property === 'points'){//如果data属性变化为getPoints/setPoints,那么更新边界 updateBoundaries(); } });
基于HTML5及WebGL开发的2D3D第一人称漫游进行碰撞检测的更多相关文章
- 基于HTML5的WebGL实现的2D3D迷宫小游戏
为了实现一个基于HTML5的场景小游戏,我采用了HT for Web来实现,短短200行代码,我就能实现用"第一人称"来操作前进后退上下左右,并且实现了碰撞检测. 先来看下实现的效 ...
- 基于 HTML5 的 WebGL 和 VR 技术的 3D 机房数据中心可视化
前言 在 3D 机房数据中心可视化应用中,随着视频监控联网系统的不断普及和发展, 网络摄像机更多的应用于监控系统中,尤其是高清时代的来临,更加快了网络摄像机的发展和应用. 在监控摄像机数量的不断庞大的 ...
- 基于 HTML5 的 WebGL 自定义 3D 摄像头监控模型
前言 随着视频监控联网系统的不断普及和发展, 网络摄像机更多的应用于监控系统中,尤其是高清时代的来临,更加快了网络摄像机的发展和应用. 在监控摄像机数量的不断庞大的同时,在监控系统中面临着严峻的现状问 ...
- 基于 HTML5 的 WebGL 楼宇自控 3D 可视化监控
前言 智慧楼宇和人们的生活息息相关,楼宇智能化程度的提高,会极大程度的改善人们的生活品质,在当前工业互联网大背景下受到很大关注.目前智慧楼宇可视化监控的主要优点包括: 智慧化 -- 智慧楼宇是一个生态 ...
- Opengl绘制我们的小屋(二)第一人称漫游
这章我们先讲第一人称漫游的实现.在openTK里,我们用函数Matrix4.LookAt(caram.Eye,caram.Target,Vector3.UnitY)来放置摄像机,其中三个参数分别与摄像 ...
- 基于HTML5的WebGL电信网管3D机房监控应用
先上段视频,不是在玩游戏哦,是规规矩矩的电信网管企业应用,嗯,全键盘的漫游3D机房: http://www.hightopo.com/guide/guide/core/3d/examples/exam ...
- 基于 HTML5 的 WebGL 3D 档案馆可视化管理系统
前言 档案管理系统是通过建立统一的标准以规范整个文件管理,包括规范各业务系统的文件管理的完整的档案资源信息共享服务平台,主要实现档案流水化采集功能.为企事业单位的档案现代化管理,提供完整的解决方案,档 ...
- 基于 HTML5 和 WebGL 的地铁站 3D 可视化系统
前言 工业互联网,物联网,可视化等名词在我们现在信息化的大背景下已经是耳熟能详,日常生活的交通,出行,吃穿等可能都可以用信息化的方式来为我们表达,在传统的可视化监控领域,一般都是基于 Web SCAD ...
- 基于HTML5的WebGL经典3D虚拟机房漫游动画
第一人称在 3D 中的用法要参考第一人称在射击游戏中的使用,第一人称射击游戏(FPS)是以第一人称视角为中心围绕枪和其他武器为基础的视频游戏类型 ; 也就是说,玩家通过主角的眼睛来体验动作.自从流派开 ...
随机推荐
- 201521123022 《Java程序设计》 第五周学习总结
1. 本周学习总结 1.1 尝试使用思维导图总结有关多态与接口的知识点. 2. 书面作业 1.代码阅读:Child压缩包内源代码 1.1 com.parent包中Child.java文件能否编译通过? ...
- 201521123074 《Java程序设计》第3周学习总结
1.本周学习总结 用百度脑图画了一张,点开图片全屏就可以看清楚了 脑图链接 2.书面作业 Q1.代码阅读 以下代码可否编译通过?哪里会出错?为什么?尝试改正? 如果创建3个Test1对象,有内存中有几 ...
- 201521123054 《Java程序设计》 第2周学习总结
本周学习总结 能够利用jdk文档处理实验问题: 动态数组的学习: 书面作业 1.使用Eclipse关联jdk源代码,并查看String对象的源代码(截图)?分析String使用什么来存储字符串的?分析 ...
- 在Python中数据类型转换的注意事项
在学习Python的过程接触到了数据类型转化这一过程,在实践的过程中我发现了一个小问题,我们在平常的使用中要一定注意 在str型转换成int型的过程中,str内的内容必须是整数不然会报错 如图: 在转 ...
- Java-高效地使用Exception-实践
注:本文翻译自Exceptional practices,共分为3节.该文章从实践的角度非常透彻地解释了为什么要处理异常,以及如何处理异常.这些都是那些只会介绍trycatchfinally语法的教材 ...
- 201521123071 《JAVA程序设计》第十周学习总结
第十周-异常与多线程 1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结异常与多线程相关内容. 2. 书面作业:本次PTA作业题集异常.多线程 1. finally:题目4-2 1. ...
- 201521123066 《Java程序设计》第九周学习总结
1.本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结异常相关内容. 2. 书面作业 1.常用异常 题目5-1 1.1 截图你的提交结果(出现学号) 1.2 自己以前编写的代码中经常出现什 ...
- Java:final、static关键字 详解+两者结合使用
一 final关键字 1) 关于final的重要知识点 final关键字可以用于成员变量.本地变量.方法以及类. final成员变量必须在声明的时候初始化或者在构造器中初始化,否则就会报编译错误. ...
- Java并发编程 Volatile关键字解析
volatile关键字的两层语义 一旦一个共享变量(类的成员变量.类的静态成员变量)被volatile修饰之后,那么就具备了两层语义: 1)保证了不同线程对这个变量进行操作时的可见性,即一个线程修改了 ...
- DAOFactory复用代码
工厂设计模式 public class DaoFactory { private static final DaoFactory factory = new DaoFactory(); private ...