博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
分享一个WebGL开发的网站-用JavaScript + WebGL开发3D模型
阅读量:6031 次
发布时间:2019-06-20

本文共 724 字,大约阅读时间需要 2 分钟。

这张图每位程序员应该都深有感触。

人民心目中的程序员是这样的:坐在电脑面前噼里啪啦敲着键盘,运键如飞。

现实中程序员是这样的:编码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场景和模型的一个典型例子。

网站地址:

进入之后,会看到一个炫目的控制台。左下角的动画效果很像电影《生化危机》里的DNA双螺旋模型。屏幕右边是一个控制台,你在键盘上输入的字符会有个酷炫的动画效果:

您可以手动在控制台里输入shell命令,比如:

cd wikipedia

ls

以此来浏览wikipedia文件夹下的所有内容。或者直接用鼠标左键点击wikipedia这个文件夹:

然后就能进入wikipedia这个文件夹,看到几个酷炫的3D模型,一个是正在旋转的地球的3D模型,另一个是不同维度展示的长方体模型。

在Chrome开发者工具的console页面能看到WebGL相关的输出。

这个网站的源码在github:

如果大家对WebGL技术感兴趣的,不妨去细读下源代码:

要获取更多Jerry的原创技术文章,请关注公众号"汪子熙"或者扫描下面二维码:

转载地址:http://uedhx.baihongyu.com/

你可能感兴趣的文章
【转】keyCode对照表及JS监听组合按键
查看>>
EFCodeFirst系列
查看>>
eclipse开启和去掉代码上面的快速导航栏(Toggle Breadcrumb)的方法
查看>>
javascript中的命名规则和方法(转)
查看>>
常用正则表达式
查看>>
nullnullAndroid Interface Definition Language (AIDL) 接口描述语言
查看>>
使你更有思想的20本书
查看>>
java jni 编程
查看>>
Android项目 手机安全卫士(代码最全,注释最详细)之七 应用程序的更新安装...
查看>>
paip.输出内容替换在Apache 过滤器filter的设置
查看>>
hdu 1009:FatMouse' Trade(贪心)
查看>>
蓝桥杯 入门训练 Fibonacci数列(水题,斐波那契数列)
查看>>
resin4.0.23+nginx1.1集群
查看>>
PHP IDE 框架 服务器 相关
查看>>
命令别名alias设置
查看>>
Add Two Numbers
查看>>
CentOS7+Tomcat 生产系统部署
查看>>
北大AI公开课2019 | 微软亚洲研究院周明:NLP的进步将如何改变搜索体验?
查看>>
艰困之道中学到的经验教训
查看>>
Atlassian发布Bamboo 6.0和Bitbucket Server 5.0
查看>>