Three.js 教程: 介绍

技术背景介绍

技术在进步。javascript的计算能力因为google的V8引擎得到了迅猛的增强，做3D程序，做服务器都没有问题。

WebGL 标准

WebGL 是一项利用 JavaScriptAPI 渲染交互式 3D 电脑图形和 2D 图形的技术，可兼容任何的网页浏览器，无需加装插件。通过 WebGL 的技术，只需要编写网页代码即可实现 3D 图像的展示。GLSL-OpenGL Shading Language 也称作 GLslang ，是一个以 C 语言为基础的高阶着色语言。它是由 OpenGL ARB 所建立，提供开发者对绘图管线更多的直接控制，而无需使用汇编语言或硬件规格语言。

随着 WebGL 标准的快速推进，越来越多团队尝试在浏览器上推出可交互的 3D 作品。相较于二维场景，它更能为用户带来真实和沉浸的体验。然而 OpenGL 和 WebGL（基于 OpenGL ES） 都比较复杂，Three.js 则更适合初学者。

Three.js 介绍

Three.js源自github的一个开源项目https://github.com/mrdoob/three.js，发展相当迅速，Three.js基于简化WebGL开发复杂度和降低入门难度的目的，在WebGL标准基础上封装了一个轻量级的JS 3D库

Three.js本质上是Webgl，如果你的浏览器不支持Webgl，那么肯定你就不能完整的运行Three.js。支持Webgl的浏览器很多，例如Chrome、FireFox、360安 全浏览器6.0等

不说废话，直接开始 (请自行下载)

Threejs.png

1.浏览器兼容

Moziller Firefox：4.0版本以后开始支持；

Google Chrome：第9版以后开始支持

Safari：5.1版本开始支持；

Opera：12.00版本以后开始支持。要让Opera支持WebGL，你还需要打开opera:config文件，设置WebGL，并将Enable hardare Acceleration设置为1;

Inernet Explorer：从IE11开始支持WebGL

如果想让旧版本IE支持WebGL,可以使用iewebgl插件，下载网址是[http://iewebgl.com/](http://iewebgl.com/)。

2.Three.js 基本三要素

    /**
     * three.js
     *  绘制3D图形基本三要素 ：
     *  - 1.scene (场景)
     *  - 2.camera (相机)
     *  - 3.renderer (渲染器)
     */

• 1.scene (场景)
• 2.camera (相机)
• 3.renderer (渲染器)

完整案例：

效果：

1.jpg

完整代码：github地址 欢迎star