最近因为课题的原因要学习一下three.js,说实话,以前并没有接触过3D图形的编程,直接去看three.js的时候还是有点头皮发麻的,想着3D图形编程一定是难的要死要死的,可是没想到各位大神把底层图形封装的这么好,连我这种js新手加图形学白痴也能很好的阅读编写three.js的实例代码。
既然要学习一样新的东西,最好稍微了解一下它的历史渊源,这样不仅在学习的时候更加稳健,也能让你在跟大牛交流的时候不至于一头雾水。
three.js是什么,即使在three.js的github项目页上页只有短短的几句介绍,three.js是一个JavaScript编写的3D图形库,提供了<canvas>,<svg>
,CSS3D和WebGL的渲染器。
three.js是托管在github上的一个开源项目,时至今日(2015-12-15)已经有519名代码贡献者。虽然在three.js的网站上提供了很多的基于three.js开发的实例,然而three.js的文档实在是不友好,只是简单的一个入门例子然后就是API,所以要学习three.js还是要去读官方实例的源代码,并且自己逐字逐句的来敲代码,做注释。
要使用three,js,首先要在你的html页面中引入它,通常我们只是使用不做调试的话直接引用three.min.js即可,引用three.js只需要一个简单的<script>
标签。
<script src="/you/path/to/three.min.js"><script>
在网页中引入three.js后你可以在网页控制台输入THREE.REVISION来查看版本信息,这里推荐chrome浏览器。
THREE.REVISION
"73"
我使用的是73版本的three.js
现在我们可以访问到THREE下的所有方法和变量了。
下面我们先来建立一个HTML标签页
<!DOCTYPE html>
<html lang="zh">
<