html3d建模,数百个 HTML5 例子学习 HT 图形组件 – 3D 建模篇
不过这个例子中的模型都比较规矩，也就消防栓由一个球 + 圆通构成，其他图形通过 HT 提供的基本 Node 以及 Shape 对象即可搞定：
对于这个餐座椅的例子，特别是一些不规则的花盆、酒杯、圣诞树和那颗爱心，很多人好奇我们是怎么搞出来的。其实蛮简单，就用了《HT for Web 建模手册》中的 createRingModel 和 createExtrusionModel 两个构建模型的函数，其中 createRingModel 顾名思义用来构建围绕一圈的环状模型，createExtrusionModel 用来构建基于某个形状的凸出效果，这两个函数生成的 3D 模型都是靠平面的 2D 图形衍生而来，都是靠 HT 系统中构建 2D 不规则多边形时采用的 Points 和 Segments 两个数组参数搞定， Points 和 Segments 的意义可参考 《HT for Web 形状手册》：
这样大家应该理解了原理，但餐座椅的那几个不规则形状的 magic 参数是如果得来的呢，这还是得借助辅助工具：http://www.hightopo.com/demo/3dmodel/index.html，
这个工具多年前为写例子随意搞的，代码挺简单大家直接看 http://www.hightopo.com/demo/3dmodel/index.html 源代码即可，写的比较简陋但挺实用，如何导出？打开控制台，自己打印出 shape 对象的 sements 和 points 参数即可，或等我有空了再来写个可导入导出更完整的例子，或者 you can you up?
其实也不仅仅也用于 Node 节点类型对象的建模，对于连线其实也可以用模型来搞定，例如http://www.hightopo.com/guide/guide/plugin/forcelayout/examples/example_forcelayout3.html这个 3D 弹力拓扑图例子，很多人已经觉得挺酷炫了，但我一直对这呆板规矩的管道连线很不爽，于是突发奇想搞了个像狗骨头似的两头粗中间细的连线效果，整个 3D 拓扑图例子一下子高大上了许多：
这个例子原理是这样的，将连线 Edge 设置成透明不可见的，然后针对每个 Edge 对应一个 Node 节点，这个节点的形状就是被拉伸并定位到连线位置替代连线来显示，而 Node 图形在还没拉伸之前长得如下：
这里还有个细节是通过 createMatrix 函数，为每个管线设置一个指向两节点位置的矩阵坐标变换参数到 style 的 mat 属性上，矩阵预算不理解也没关系，直接照抄例子中代码即可，为了方便大家理解我搞了个两个节点一条连线更简单的例子供参考：
今天只是抛砖引玉，《HT for Web 建模手册》中还有众多 API 函数，只要有想象力还可以折腾出无数的花样，后续有空我再借助 HT for Web的 WebGL 3D 自定义建模功能多搞些实用的例子。
html3d建模,数百个 HTML5 例子学习 HT 图形组件 – 3D 建模篇相关推荐
- html3d模型制作,数百个 HTML5 例子学习 HT 图形组件 – 3D 建模篇
<数百个 HTML5 例子学习 HT 图形组件 – WebGL 3D 篇>里提到 很多情况下不需要借助 3Ds Max 和 Blender 等专业 3D 建模工具也能做出很多效果,例如 ...
- 数百个 HTML5 例子学习 HT 图形组件 – 3D 建模篇
http://www.hightopo.com/demo/pipeline/index.html <数百个 HTML5 例子学习 HT 图形组件 – WebGL 3D 篇>里提到 HT 很 ...
- 数百个 HTML5 例子学习 HT 图形组件 – 3D建模篇
http://www.hightopo.com/demo/pipeline/index.html <数百个 HTML5 例子学习 HT 图形组件 – WebGL 3D 篇>里提到 HT 很 ...
- 数百个HTML5例子学习HT图形组件 – 3D建模篇
<数百个 HTML5 例子学习 HT 图形组件 – WebGL 3D 篇>里提到 HT 很多情况下不需要借助 3Ds Max 和 Blender 等专业 3D 建模工具也能做出很多效果,例 ...
- 数百个 HTML5 例子学习 HT 图形组件 – 拓扑图篇
HT 是啥:Everything you need to create cutting-edge 2D and 3D visualization. 这口号是当年心目中的产品方向,接着就朝这个方向慢慢打 ...
- 质量属性效用树例子_数百个 HTML5 例子学习 HT 图形组件 – 拓扑图篇
HT 是啥:Everything you need to create cutting-edge 2D and 3D visualization. 这口号是当年心目中的产品方向,接着就朝这个方向慢慢打 ...
- WebGL 3D 数百个 HTML5 例子学习 HT 图形组件
<数百个 HTML5 例子学习 HT 图形组件 – 拓扑图篇>一文让读者了解了 HT 的 2D 拓扑图组件使用,本文将对 HT 的 3D 功能做个综合性的介绍,以便初学者可快速上手使用 H ...
- html5 图形组件,数百个 HTML5 例子学习 HT 图形组件 – WebGL 3D 篇
<数百个 HTML5 例子学习 HT 图形组件 – 拓扑图篇>一文让读者了解了 HT的 2D 拓扑图组件使用,本文将对 HT 的 3D 功能做个综合性的介绍,以便初学者可快速上手使用 HT ...
- 数百个 HTML5 例子学习 HT 图形组件 – 拓扑图篇 1
HT 是啥:Everything you need to create cutting-edge 2D and 3D visualization. 这口号是当年心目中的产品方向,接着就朝这个方向慢慢打 ...
- qt实现拓扑图_数百个 HTML5 例子学习 HT 图形组件 – 拓扑图篇
HT 是啥:Everything you need to create cutting-edge 2D and 3D visualization. 这口号是当年心目中的产品方向,接着就朝这个方向慢慢打 ...
最新文章
- candy算子python_Python-计算机视觉中的Canny边缘检测方法
- TLSNotary中心化预言机（3） 下一代技术----PADVA
- java idle 机制_HotSpot VM重量级锁降级机制的实现原理
- 摩托罗拉edge S30冠军版今日开售：价格最便宜12+512G手机
- unity控制相机移动
- 安装及使用RSSHub
- 三重积分平均值_质心计算
- java put 语句_Java put语句
- JavaSrcipt学习(学习打卡Day6)
- 一些好听的纯音乐及下载
- C++ #include expects “FILENAME“ or ＜FILENAME＞
- Android 手机上获取手机当前上网IP地址（手机网关给手机号分配的IP）
- html的style不起作用,css样式不起作用是什么原因？
- linux如何给某个文件加密码,如何通过密码保护Linux上的文件夹或目录?
- GNN-CS224W: 3 Node Embeddings
- 【星球精选】如何高效构建 Roam 与 theBrain 间细粒度双向链接？
- 在动态规划的海洋中遨游（一）
- 移远QuecPython（基于EC600s）开发物联网应用(七) QuecPython通讯相关模块
- H3C路由器常用命令----更新中
- python对时间的灵活处理