WebGL是HTML5中提出的新技术,是一种3D绘图标准,这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起,为HTML5 Canvas提供硬件3D加速渲染。

WebGL技术标准是浏览器自带的标准免去了开发网页专用渲染插件的麻烦,也就是不需要安装任何插件和组件,不同于flash和siverlight,这对于它来说是一个很大的优势。

其次WebGL通过统一的、标准的、跨平台的OpenGL接口实现,从而可以利用底层的图形硬件加速功能进行的图形渲染,因此可被用于创建具有复杂3D结构的网站页面,甚至可以用来设计3D网页游戏等。

本文将为大家带来一个既效果惊人又十分有用的WebGL实例,浏览器上的汽车(Smart)三维展示,3D效果十分逼真,并且可以进行交互。

一、界面如下

效果惊艳的WebGL/JavaScript演示(一)_3d


效果惊艳的WebGL/JavaScript演示(一)_javascript_02

二、代码展示

源代码采用WebGL技术,使用纯JavaScript语言在网页上展示汽车3D立体模型,同时可以进行旋、拖动和改变车辆材质颜色等交互。代码结构、逻辑简单,是个非常不错学习JavaScript,同时学习WebGL了解网页3D技术的很好例子。

效果惊艳的WebGL/JavaScript演示(一)_javascript_03