hightopo

QuadTree 四叉树顾名思义就是树状的数据结构，其每个节点有四个孩子节点，可将二维平面递归分割子区域。QuadTree常用于空间数据库索引，3D的椎体可见区域裁剪，甚至图片分析处理，我们今天介绍的是QuadTree最常被游戏领域使用到的碰撞检测。采用QuadTree算法将大大减少需要测试碰撞的次数，从而提高游戏刷新性能，本文例子基于 HT for Web 的图形引擎，通过 GraphView 和 Graph3dView 共享同一数据模型 DataModel ，同时呈现QuadTree算法下的2D和3D碰撞视图效果： http://v.youku.com/v_show/id_XODQyNTA1NjY0.html QuadTree的实现有很多成熟的版本，我选择的是 https://github.com/timohausmann/quadtree-js/ 四叉树的算法很简单，因此这个开源库也就两百来行代码。使用也非常简单，构建一个Quadtree对象，第一个参数传入rect信息制定游戏空间范围，在每次requestAnimationFrame刷新帧时，先通过quadtree.clear()清除老数据，通过quadtree.insert(rect)插入新的节点矩形区域，这样quadtree就初始化好了，剩下就是根据需要调用quadtree.retrieve(rect)获取指定矩形区域下

【推荐阅读】微服务还能火多久？>>> 最近下载了 GoodReader App ，发现GoodReader中打开的页面不仅支持WebGL，同时还允许跨域访问资源，以前不少 HT for Web 手册的例子需要Web服务器发布的方式才能访问，否则需采用《 矢量组件设计之道（四） 》列举的几种解决跨域访问图片或3D的OBJ等资源的技巧。而现在GoodReader中直接打开就可以玩了，加上GoodReader自身对文档管理的方便性，这1块钱的价格真是物超所值！ 以下为GoodReader在iPhone下跨域访问 HT for Web 手册过程的 视频 ， 整体还是挺流畅，和直接采用iOS的Safari浏览器没什么区别： http://v.youku.com/v_show/id_XODM3ODE4NjQ0.html 来源： oschina 链接： https://my.oschina.net/u/1423144/blog/350305

JSZip 是一款可以创建、读取、修改 .zip 文件的 javaScript 工具。在 web 应用中，免不了需要从 web 服务器中获取资源，如果可以将所有的资源都合并到一个 .zip 文件中，这时候只需要做一次请求，这样既减少了服务器的压力，同时也可以加快 web 应用的呈现速度。 今天就来探讨下 JSZip 如何与 HT 拓扑 应用结合。先来看看这期 Demo 的效果图： 第一步、需要将应用对相关资源打包成 .zip 文件， 这是我要压缩的文件列表，把响应的资源文件存放到对应的文件夹下，然后在 loadorder 文件中标明资源加载的顺序，loadorder 文件内容如下： 'js/ht.js', 'js/ht-obj.js', 'js/ht-modeling.js', 'obj/equipment.mtl', 'obj/equipment.obj', 'image/equipment.jpg' 在资源加载顺序中，要标明响应资源的相对于 .zip 文件的路径，这样方便在读取 .zip 文件时快速找到相应的资源文件。 第二步、在 html 文件中引入 JSZip 和 JSZipUtils 库，接下来就是请求 .zip 文件，并对 .zip 文件做解析处理。 JSZipUtils.getBinaryContent('res/ImportObj.zip', function

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>> 上篇 我们基于 HT for Web 呈现了 A* Search Algorithm 的3D寻路效果，这篇我们将采用 HT for Web 3D 来呈现Box2DJS物理引擎的碰撞效果，同上篇其实Box2DJS只是二维的平面碰撞物理引擎，但同样通过3D的呈现能让人更直观的体验到碰撞效果，最终例子效果： http://hightopo.com/demo/box2djs/ht-box2d-demo.html 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引擎的基本使用

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>> 上篇 我们基于 HT for Web 呈现了 A* Search Algorithm 的3D寻路效果，这篇我们将采用 HT for Web 3D 来呈现Box2DJS物理引擎的碰撞效果，同上篇其实Box2DJS只是二维的平面碰撞物理引擎，但同样通过3D的呈现能让人更直观的体验到碰撞效果，先上张最终例子效果图： http://hightopo.com/demo/box2djs/ht-box2d-demo.html 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有很多参数功能点，这里例子我们仅呈现最基础简单的要素

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>> 上篇 我们基于 HT for Web 呈现了 A* Search Algorithm 的3D寻路效果，这篇我们将采用 HT for Web 3D 来呈现Box2DJS物理引擎的碰撞效果，同上篇其实Box2DJS只是二维的平面碰撞物理引擎，但同样通过3D的呈现能让人更直观的体验到碰撞效果，先上张最终例子效果图： 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

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>> 前一篇谈及到了 ECharts 整合 HT for Web 的 网络拓扑图 应用，后来在 ECharts 的 Demo 中看到了有关空气质量的相关报表应用，就想将百度地图、 ECharts 和 HT for Web 三者结合起来也做一个类似空气质量报告的报表 + 拓扑图应用，于是有了下面的 Demo ： 在这个 Demo 中，将 GraphView 拓扑图组件添加到百度地图组件中，覆盖在百度地图组件之上，并且在百度地图组件上和 GraphView 拓扑图组件上分别添加事件监听，相互同步经纬度和屏幕位置信息，从而来控制拓扑图上的组件位置固定在地图上，并在节点和节点之间的连线上加上了流动属性。右下角的图标框是采用 HT for Web 的 Panel 面板组件结合 ECharts 图表组件完成的。 接下来我们来看看具体的代码实现： 1. 百度地图是如何与 HT for Web 组件结合的； map = new BMap.Map("map"); var view = graphView.getView(); view.className = 'graphView'; var mapDiv = document.getElementById('map'); mapDiv.firstChild.firstChild

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>> 在前面《 百度地图、ECharts整合HT for Web网络拓扑图应用 》我们有介绍百度地图和 HT for Web 的整合，我们今天来谈谈 OpenLayers 和 HT for Web 的整合。 HT for Web 作为逻辑拓扑图形组件自身没有GIS功能，但可以与各种GIS引擎即其客户端组件进行融合，各取所长实现逻辑拓扑和物理拓扑的无缝融合，本章将具体介绍 HT for Web 与开发免费的 OpenLayers 地图结合应用的关键技术点，该文介绍的结合的原理，其实还可推广到与ArcGIS、百度地图以及GoogleMap等众多GIS地图引擎融合的解决方案。 以上抓图为本文介绍的例子最终运行效果，接下来我们一步步来实现，首选显示地图信息需要有城市经纬度数据，搜索了下 感谢此篇博客提供的数据 。这么大量的数据我采用的是《 HT图形组件设计之道（四） 》中介绍的getRawText函数方式，有了数据之后剩下就是呈现的问题了，我们需要将 HT 的GraphView组件与OpenLayers的map地图组件叠加在一起，也就是 OpenLayers 的tile地图图片在下方，GraphView的组件在上方，由于GraphView默认是透明的，因此非图元部分用户可穿透看到地图内容。找到合适的组件插入位置是头疼的事情

iOS平台一直是封闭的生态圈，iOS开发者要缴纳年费加入开发者计划才可进行iOS平台的APP开发测试，所开发的APP需要上传到App Store经过苹果审核以后才可对外发布。如果要开发企业内部应用，则要缴纳更高的费用购买企业账户才可以。 对于现在火如荼的HTML5应用，我们可以借助PhoneGap对其打包，然后像原生APP一样发布它们；或者要求用户直接通过浏览器访问。前一种方式的优点是用户体验好，用户可以像使用原生APP那样使用它们，缺点是发布很繁琐，而且要等待苹果审核。后一种方式则完全不用考虑发布的问题，但是用户体验比较差，毕竟让用户打开浏览器，自行输入网址对用户操作水平要求较高。今天我们通过采用 Hightopo 的 HT for Web 组件，介绍另外一种方式，这种方式综合了前面两种方式的优点，特别适合部署企业内部应用。 手边有iPhone或iPad的同学可以先按照下面的方式实验： 1、用iPhone或iPad上的Safari浏览器打开链接： http://pattern.dk/sun/ ，点击底部的发送按钮 2、 点击发送到主屏幕 3、确认添加 4、查看主屏上新增加的APP图标 大家可以看到我们的主屏幕上已经多了一个”APP”，如果细心优化，用户完全无法区分这是一个原生应用还是HTML5应用，极大提升了用户体验。 是不是很神奇？接下来我们以 HT for Web

在这里我们将构造一个基于HT for Web的HTML5+JavaScript来实现汉诺塔游戏。 http://hightopo.com/demo/hanoi_20151106/index.html 汉诺塔的游戏规则及递归算法分析请参考 http://en.wikipedia.org/wiki/Tower_of_Hanoi 。 知道了汉诺塔的规则和算法，现在就开始创建元素。用HT for Web（ http://www.hightopo.com ）现有的3D模板创建底盘和3根柱子不是问题，问题是要创建若干个中空的圆盘。一开始的想法是：创建一个圆柱体，将圆柱体的上下两端隐藏，设置柱面的宽度来实现圆盘的效果，经过多次尝试并查阅相关api文档，发现柱面是没有厚度的，改方法不可行。 后来在HT for Web自定义3D模型的WebGL应用（ http://www.hightopo.com/blog/381.html ）受到启发，圆盘的形成就是在xy平面上的一个矩形，根据y轴旋转一周产生的，通过查阅相关文档，最总决定采用ht.Default.createRingModel方法来创建圆盘模型，然后在创建node的时候通过shape3d属性引用创建好的模型。 在逻辑实现上，采用了栈的先进后出的原理，对圆柱上的圆盘做顺序控制，确保每次移动的圆盘都是最小的圆盘。 在算法上，采用的是递归算法