分享一个WebGL开发的网站-用JavaScript + WebGL开发3D模型
这张图每位程序员应该都深有感触。
人民心目中的程序员是这样的:坐在电脑面前噼里啪啦敲着键盘,运键如飞。
现实中程序员是这样的:编码5分钟,调试两小时。
今天我要给大家分享一个用WebGL开发的网站,感兴趣的朋友可以在Chrome开发者工具里调试它的源码来学习WebGL。
WebGL(Web Graphics Library)是3D绘图协议的一种,该技术的特色是将万能的JavaScript和OpenGL ES 2.0结合在一起,为HTML5的 Canvas提供硬件3D加速渲染。借助WebGL,前端开发人员可以开发出非常专业的3D场景和模型。
今天我要介绍的网站:Legacy Encom Boardroom Visualization就是一个采取JavaScript 加上WebGL开发3D场景和模型的一个典型例子。
网站地址:https://www.robscanlon.com/encom-boardroom/
进入之后,会看到一个炫目的控制台。左下角的动画效果很像电影《生化危机》里的DNA双螺旋模型。屏幕右边是一个控制台,你在键盘上输入的字符会有个酷炫的动画效果:
您可以手动在控制台里输入shell命令,比如:
cd wikipedia
ls
以此来浏览wikipedia文件夹下的所有内容。或者直接用鼠标左键点击wikipedia这个文件夹:
然后就能进入wikipedia这个文件夹,看到几个酷炫的3D模型,一个是正在旋转的地球的3D模型,另一个是不同维度展示的长方体模型。
在Chrome开发者工具的console页面能看到WebGL相关的输出。
这个网站的源码在github:http://github.com/arscan/encom-boardroom
如果大家对WebGL技术感兴趣的,不妨去细读下源代码:
要获取更多Jerry的原创技术文章,请关注公众号"汪子熙"或者扫描下面二维码:
- (ipad/iphone开发)分享一个好工具,一个检测当前json为何不能解析的网站
- 快速开发 HTML5 WebGL 的 3D 斜面拖拽生成模型
- 分享一个使用 vue.js 开发的网站
- 一个很好的开发分享的网站
- [精华分享][Unity&模型制作&blender]适合独立游戏开发的官方免费3D人物模型软件以及教程合集
- 分享一个优秀HTML5网站的开发思路
- 一个3D小游戏开发经验分享。
- 【分享】分享一个值得前端开发收藏的网站
- 3D模型网站分享
- 分享一个使用 vue.js 开发的网站
- 分享一个电子书网站~很多pdf格式的书籍
- 使用jQuery图表插件Sparklines来开发一个实用的网站PV(page view)实时监控应用
- phpsir 开发 一个检测百度关键字网站排名的python 程序
- 一个基于WebGL的仿真3D水池有逼真的水波纹效果
- IOS开发相关网站大集合分享
- Subtle Patterns:一个分享高质量网页纹理素材的网站
- 安卓开发经验分享:资源、UI、函数库、测试、构建一个都不能少
- 如何用webgl(three.js)搭建一个3D库房
- 分享一个内容管理系统网站