认识Threejs

Threejs定义

 Threejs运行在浏览器的3d javascript库（three表示3D的意思，js表示javascript，与webgl的区别是，Threejs以webgl为基础的库，封装了一些3D渲染需求中重要的工具方法与渲染循环）

在哪里可以使用Three.js？

您可以使用任何方式使用Three.js ，包括全屏动画，只要该设备支持WebGL。

所有最新的浏览器都支持WebGL，但是如果要在客户端项目上使用Three.js，则需要权衡Internet Explorer和Android的早期版本中缺乏支持的情况。有关详情，请参见“ 我可以使用 ”。

Threejs坐标系

Three.js 的坐标系是遵循右手坐标系(对于旋转 cube.rotation 正值是逆时针旋转，负值是顺时针旋转)，如下图：

坐标系的原点在画布中心（canvas.width / 2, canvas.height / 2）。我们可以通过 Three.js 提供的 THREE.AxisHelper() 辅助方法将坐标系可视化。

Three主要对象

1.场景(Scene)：是物体、光源等元素的容器，
2.相机（Camera）：控制视角的位置、范围以及视觉焦点的位置,一个3D环境中只能存在一个相机
3.渲染器（Renderer）:指定渲染方式，如webGL\canvas2D\Css2D\Css3D等。
4.网格模型（Mesh）：包括二维物体（点、线、面）、三维物体、粒子（顶点和面的集合称为几何）
5.光源（Light）：包括全局光、平行光、点光源
6.控制器(Control): 相机控件，可通过键盘、鼠标控制相机的移动

场景(Scene)

物体、光源、控制器的添加必须使用secen.add(object)添加到场景中才能渲染出来。一个3D项目中可同时存在多个scene，通过切换render的scene来切换显示场景

var scene = new THREE.Scene(); // 创建场景对象
var mesh=scene.getObjectByName("sky");//获取场景中命名的name=sky的对象

方法	属性
add(object)	用于向场景中添加对象。使用该方法还可以创建对象组。（几何体、光源等对象）
children	用于返回一个场景中所有对象的列表，包括摄像机和光源。
getObjectByName(name,recursive)	在创建对象时可以指定唯一的标识 name，使用该方法可以查找特定名字的对象。当参数 recursive 设置为 false 时，在调用者子元素上查找，当参数 recursive 设置为 true 时，在调用者的所有后代对象上查找
remove(object)	用于向场景中添加对象。使用该方法还可以创建对象组。
fog	使用该属性可以为场景添加雾化效果，可以产生隐藏远处物体的浓雾效果。
overrideMaterial	使用该属性可以强制场景中的所有物体使用相同的材质。

相机(Camera)

相机根据投影方式有四种相机 PerspectiveCamera（透视相机）、 OrthographicCamera（正交投影相机）、CubeCamera（立方体相机或全景相机）和StereoCamera（3D相机）

PerspectiveCamera（透视相机），一般情况下，我们使用的是透视投影相机最接近自然的视图，符合近大远小的规律，如下图：

PerspectiveCamera（透视相机）的参数：

OrthographicCamera（正交投影相机），所有事物渲染一样大，开发二维游戏时常用这种

参考链接

Three.js简介
threejs-选择合适的相机
Three.js 现学现卖
dragon/threejs教程