本站提供的WEBGL高级在线学习教程：WEBGL中英文资源视频：【传送门】【版主力推】 【如果觉得教程不错，可以加入QQ群78925824一起交流】： 目前关于实例的代码已经全部打包上传，有需要的亲们请直接打包下载学习：链接: https://pan.baidu.com/s/1UY\_QO-bLTColGyCAVeZZeQ 密码: 5q5t 网络上的一些经典的WebGL资源网站和WebGL开源引擎整理：http://www.babylonjs.com/http://threejs.org/http://www.finalmesh.com/webglexamples.htmhttp://www.glge.org/category/demos/http://www.visualiser.fr/index.phphttp://www.babylonjs.com/Demos/Retail/http://oos.moxiecode.com/blog/index.php/experiments/javascript-webgl/http://developer-autodesk.github.io/ WEBGl学习网站：1.OpenGL ES2.0 API:http://www.khronos.org/opengles/sdk/docs/man/2.GLSL API:http://www.opengl.org/sdk/docs/manglsl/3.Mozilla WebGL:https://developer.mozilla.org/en ... &redirectslug=WebGL4.THE CG TUTORIAL:https://developer.nvidia.com/con ... pter-1-introduction5.Cg Standard Library Documentation:http://http.developer.nvidia.com/Cg/index\_stdlib.html6.1\_April2012\_ReferenceManual:http://developer.download.nvidia ... ReferenceManual.pdf8.GLSL\_ES\_Specification\_3.0:http://www.khronos.org/registry/ ... fication\_3.00.4.pdf9：http://learningwebgl.com/blog/?page\_id=1217【推荐】 WEBGL开源网站：网络上的一些经典的WebGL资源网站和WebGL开源引擎整理http://www.babylonjs.com/http://threejs.org/http://www.finalmesh.com/webglexamples.htmhttp://www.glge.org/category/demos/http://www.visualiser.fr/index.phphttp://www.babylonjs.com/Demos/Retail/http://oos.moxiecode.com/blog/index.php/experiments/javascript-webgl/http://developer-autodesk.github.io/ 【温馨提示】如果你的当前网络无法访问部分网站或者Google 搜索，请参考：科学上网新突破【持续更新】一文配置本地网络！WEBGL综合案例DEMO： http://www.hightopo.com/blog/wp-content/uploads/2016/08/3DrNQNgFNYYAAAAASUVORK5CYII.png http://www.hightopo.com/blog/wp-content/uploads/2016/08/Screen-Shot-2016-08-26-at-1.07.27-AM.png A星寻路算法 3D 模拟：http://www.hightopo.com/demo/astar/astar.htmlhttp://www.hightopo.com/blog/wp-content/uploads/2014/11/Screen-Shot-2014-11-24-at-5.09.13-PM.png 3D 汉诺塔算法演示：http://www.hightopo.com/demo/hanoi\_20151106/index.htmlhttp://www.hightopo.com/blog/wp-content/uploads/2016/08/Screen-Shot-2016-08-26-at-1.53.51-AM.png3D 热力图：http://www.hightopo.com/guide/guide/plugin/forcelayout/examples/example\_heatmap3d.htmlhttp://www.hightopo.com/blog/wp-content/uploads/2014/09/IMG\_10361.jpg Box2D 物理碰撞 3D 例子：http://www.hightopo.com/demo/box2djs/ht-box2d-demo.htmlhttp://www.hightopo.com/blog/wp-content/uploads/2014/11/Screen-Shot-2014-11-25-at-8.06.57-PM.png设备管理 EMS 系统：http://www.hightopo.com/guide/guide/core/databinding/examples/example\_ems.htmlhttp://www.hightopo.com/blog/wp-content/uploads/2015/01/Screen-Shot-2015-01-07-at-11.50.54-PM.pngEasing 动画类型：http://www.hightopo.com/guide/guide/plugin/form/examples/example\_easing.htmlhttp://www.hightopo.com/blog/wp-content/uploads/2014/05/Screen-Shot-2014-05-29-at-3.07.23-PM.png3D 网络拓扑图：http://www.hightopo.com/guide/guide/plugin/forcelayout/examples/example\_forcelayout3.htmlhttp://www.hightopo.com/blog/wp-content/uploads/2016/08/Screen-Shot-2016-08-26-at-1.41.50-AM.png书架场景，亮点自寻：http://www.hightopo.com/guide/guide/plugin/modeling/examples/example\_bookshelf.htmlhttp://www.hightopo.com/blog/wp-content/uploads/2014/12/Screen-Shot-2014-12-25-at-12.19.17-AM.png灯光舞台流动场景：http://www.hightopo.com/guide/guide/core/lighting/examples/example\_flowing.htmlhttp://www.hightopo.com/blog/wp-content/uploads/2016/08/Screen-Shot-2016-08-26-at-1.33.11-AM.png2D 和 3D 模型联动的可编辑房间场景：http://www.hightopo.com/guide/guide/plugin/modeling/examples/example\_csgshape.htmlhttp://www.hightopo.com/blog/wp-content/uploads/2016/08/Screen-Shot-2016-08-26-at-1.28.21-AM.png各种样式的茶杯座椅场景：http://www.hightopo.com/guide/guide/plugin/modeling/examples/example\_custommodel.htmlhttp://www.hightopo.com/blog/wp-content/uploads/2015/01/Screen-Shot-2015-01-07-at-11.46.14-PM.png 一百行代码实现的 3D 贪吃蛇游戏：http://www.hightopo.com/demo/snake\_20151106/GreedySnake.htmlhttp://www.hightopo.com/blog/wp-content/uploads/2014/03/060128389406803.png带可控制端口的 3D 服务器演示：http://www.hightopo.com/demo/hp5406/hp5406-rotation.htmlhttp://www.hightopo.com/blog/wp-content/uploads/2016/08/Screen-Shot-2016-08-26-at-1.47.43-AM.png脑洞打开了吧，其实纯 3D API 还是能做很多效果的，更多例子参考：http://www.hightopo.com/demos/index.html。另外你也可以采用 HT 辅助的 3D 编辑器所见即所得的快速搭建出三维场景：http://www.hightopo.com/blog/wp-content/uploads/2016/08/Screen-Shot-2016-08-26-at-1.17.13-AM.png当然不同的行业客户也会根据自己需要打造更适合自己项目的 3D 编辑器：http://www.hightopo.com/blog/wp-content/uploads/2016/08/63E8D17A-24C7-433B-BAB6-5773F51876D4.png但纯 API 的方式对于复杂的模型就很难实现了，所以对于复杂的模型我们就可以利用主流的 3D 设计工具如 3DMaxs，Maya 或 Blender 等进行设计，然后导出 OBJ 格式供 HT 读入使用，可参考《HT for Web 的 OBJ 手册》http://www.hightopo.com/guide/guide/plugin/obj/ht-obj-guide.html ，HT 手册中也有众多采用 OBJ 的应用例子：可控指针的燃气表记：http://www.hightopo.com/guide/guide/plugin/obj/examples/example\_meter.htmlhttp://www.hightopo.com/blog/wp-content/uploads/2016/08/Screen-Shot-2016-08-26-at-2.22.14-AM.png飞机飞行轨道例子：http://www.hightopo.com/guide/guide/plugin/obj/examples/example\_path.htmlhttp://www.hightopo.com/blog/wp-content/uploads/2014/10/Screen-Shot-2014-10-08-at-7.45.25-PM.png摩托车模型结合灯光例子：http://www.hightopo.com/guide/guide/core/lighting/examples/example\_pointlight.htmlhttp://www.hightopo.com/blog/wp-content/uploads/2016/08/Screen-Shot-2016-08-26-at-2.25.50-AM.png可开关复杂 3D 门窗：http://www.hightopo.com/guide/guide/plugin/obj/examples/example\_room.htmlhttp://www.hightopo.com/blog/wp-content/uploads/2016/08/Screen-Shot-2016-08-26-at-2.28.02-AM.png跑道飞驰汽车：http://www.hightopo.com/demo/media/index.htmlhttp://www.hightopo.com/blog/wp-content/uploads/2016/08/Screen-Shot-2016-08-26-at-2.28.42-AM.png笔记本模型例子：http://www.hightopo.com/guide/guide/core/schedule/examples/example\_network.htmlhttp://www.hightopo.com/blog/wp-content/uploads/2016/08/Screen-Shot-2016-08-09-at-10.37.04-PM.png 可控燃气监控系统 http://www.hightopo.com/guide/guide/core/serialization/examples/example\_exportimport.htmlhttp://www.hightopo.com/blog/wp-content/uploads/2014/04/IMG\_0282.jpg并且 OBJ 导入的模型依然可以进行数据绑定和动态实时驱动，这个话题后续我再以服务器扇叶旋转为例子展开详细介绍，本篇先到此为止，大家可玩下电信网管 3D 机房监控系统场景中，常见的服务器机柜和带风扇旋转功能的例子：http://www.hightopo.com/demo/fan3d/demo-enhanced.htmlhttp://www.hightopo.com/blog/wp-content/uploads/2016/08/Screen-Shot-2016-08-26-at-2.41.04-AM.png

二十七个WEBGL动态实例和视频资源让你快速体验WEBGL的世界