3D的世界，多一个维度，多一点欢乐。

不多说的为什么要学，直接开搞

还是来点前奏吧 Three.js, 相信看了这个官方API的同学，笼统的风格实在是着急，但也理解，作者精力都放在源码上去了，再说，慕名而来的Threejser们哪个智商低了？哈哈哈
我准备把看过的关于Threejs的知识跟体会做成一个系列，高手多指点，小白多交流，共同进步。
ps:评论多说我会抽时间来更换的,目前可以通过邮件 @eyea 联系或者Giteyea
源码的学习总是令人兴奋

ThreeJS三兄弟

他们分别是 Scene 、 Camera 、 Renderer ,即 场景，相机，渲染器。这三兄弟将会把3D世界搞得有声有色~ 。

  • 场景是用来容纳元素的，比如我们新建一个cube，一条line，一个star，都需要Scene.add()进来才能显示的，定义的size，position等才会有意义；
  • 相机是定义可视区域，能够确定哪些图形元素是可以看得到的；
  • 渲染器是…这个看名字，不多说,其实是代表的是 canvas 标签,现在的版本 85dev 使用的是WebGLRender来渲染的，但是存在有的机器上不支持WebGL.

他们三个创建也很简单，都是THREE.X的实例：

1
2
3
4
5
6
7
8
9
10
11
12
13
var scene   = new THREE.Scene(),
	camera  = new THREE.PerspectiveCamera(),  // 透视相机
	renderer= new THREE.WebGLRender();

// threejs提供的相机有正交相机（OrthographicCamera）、透视相机（PerspectiveCamera）、全景相机（CubeCamera）和3D相机（StereoCamera）。
// 你想看见的元素必须要放在相机可视域中，当创建元素看不到了，检查下相机的 __position__ 、__lookAt(朝向)__ 和创建参数了。当然都是相对的，你也可以调整元素嘛。
// 多说一句，创建相机都有 __near__ 和 __far__ 两个参数，近值是指立方体离相机最近的点到相机的距离n的范围，远值这是指立方体中心到相机的距离s。
// 相机大小和渲染器尺寸要相等，否则就会变形，如果你需要失真变形，随意。

// 知道渲染器是canvas标签后，setSize也是可以的
   renderer.setSize(width, height);
// 然后放入你指定的元素中
   ele.appendChild(renderer.domElement);

下一篇，我们开始相机。
先看个 例子 。

(To be continued)