three入门

http://www.yanhuangxueyuan.com/threejs/build/three.js

三要素

场景
```
var scene = new THREE.Scene()
```

相机

var width = window.innerWidth;
var height = window.innerHeight
var k = width/height  //窗口宽高比
var s = 200   //三维场景中显示范围控制系数，越大显示范围越大。

渲染器

var renderer = new THREE.webGLRenderer()
renderer.setSize(width, height)
renderer.setClearColor(0x9b33f, 1)

相机

正投相机：机械、工业设计领域常常采用正投影(平行投影)

var width = window.innerWidth; //窗口宽度
var height = window.innerHeight; //窗口高度
var k = width / height; //窗口宽高比
var s = 150; //三维场景显示范围控制系数，系数越大，显示的范围越大
//创建相机对象
var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
camera.position.set(200, 300, 200); //设置相机位置
camera.lookAt(scene.position); //设置相机方向(指向的场景对象)

// 构造函数格式
OrthographicCamera( left, right, top, bottom, near, far )

透视相机：大型游戏场景往往采用透视投影(中心投影)
```
var width = window.innerWidth; //窗口宽度
var height = window.innerHeight; //窗口高度
/**透视投影相机对象*/
var camera = new THREE.PerspectiveCamera(60, width / height, 1, 1000);
camera.position.set(200, 300, 200); //设置相机位置
camera.lookAt(scene.position); //设置相机方向(指向的场景对象)
```
```
PerspectiveCamera( fov, aspect, near, far )// near-->far由近到远的距离默认0.1---1000
```
- - fov表示视场，所谓视场就是能够看到的角度范围，人的眼睛大约能够看到180度的视场，视角大小设置要根据具体应用，一般游戏会设置60~90度
  - aspect表示渲染窗口的长宽比，如果一个网页上只有一个全屏的canvas画布且画布上只有一个窗口，那么aspect的值就是网页窗口客户区的宽高比

three常用的API

有规则立体的API
矩形，球形，多面体等
可以把一个二维图形通过拉伸为三维体力图。
```
/**
创建扫描网络模型
/
var shape = new TRHEE.Shape()
/四条直线绘制一个矩形轮廓*/
shape.moveTo(0,0)
shape.lineTo(0,10)
shape.lineTo(10,10)
shape.lineTo(10,0)
shape.linrTo(0,0)
/创建轮廓扫描成3D立体图*/
var curve = new THREE.sPLINEcURVES([
```
   new THREE.Vector3(-10,-50,-50),
   new THREE.Vector3(10,0,0),
   new THREE.Vector3(8,50,50),
   new THREE.Vector3(-5,0,100)]);
```
var geometry = new THREE.ExtrudeGeometry(//拉伸造型
shape,//二位轮廓
//拉伸参数
{
```
   bevelEnabled: true, //五棱角
   extrudePath:curve, //选择扫描轨迹
   steps:50 //扫描方向细分数
```
}
）；
// 例图说明 ``` # three对立体图的交叉并集合也有相应的库

threebsp.js正是对交叉并集的封装里面有有些常用的API

https://johnson2heng.github.io/three.js-demo/lib/threebsp.js

this.matrix = matrix;
this.intersect = __bind(this.intersect, this); // 交集
this.union = __bind(this.union, this);  //并集
this.subtract = __bind(this.subtract, this); // 差集
this.toGeometry = __bind(this.toGeometry, this);
this.toMesh = __bind(this.toMesh, this);
this.toTree = __bind(this.toTree, this);

想要动态的改变三维立体的参数这个时候就会用到OrbitControls.js

OrbitControls.js是专门分封装了一些事件，包括键盘和鼠标。

鼠标左键：应该是改变相机的位置，进而转换视角。
鼠标右键：拖动位置。
鼠标滚轮：进行缩放三维立体的大小。原理应该是改变三维场景显示范围控制系数（相机焦距）
http://www.yanhuangxueyuan.com/threejs/examples/js/controls/OrbitControls.js

曲线

在threejs里面也有两种曲线API(样条曲线，贝塞尔曲线)

样条曲线

样本曲线又分为两种：二维，三维

1605278419907

所谓样条曲线就是没两点之间形成一定的弧度，把所有点链接成一条具有弧度的光滑曲线

注意：这里可以通过样曲线先根据二维坐标画出二维图然后通过拉伸可以实现3D效果，比较方便。

贝塞尔曲线（2D，3D）

贝塞尔曲线分为一次和二次

大概就是两点之间形成一定弧度，而这个弧度是可以控制的关键点就是中间的一个（一次），二个（二次）的点。

如图：

一次（中间只有一个点）

var p1 = new THREE.Vector3(-80, 0, 0);
var p2 = new THREE.Vector3(20, 100, 0);
var p3 = new THREE.Vector3(80, 0, 0);
// 三维二次贝赛尔曲线
var curve = new THREE.QuadraticBezierCurve3(p1, p2, p3);

二次（弧度由两个点控制，这两个点都不在贝塞尔曲线上）

var p1 = new THREE.Vector3(-80, 0, 0);
var p2 = new THREE.Vector3(-40, 100, 0);
var p3 = new THREE.Vector3(40, 100, 0);
var p4 = new THREE.Vector3(80, 0, 0);
// 三维三次贝赛尔曲线
var curve = new THREE.CubicBezierCurve3(p1, p2, p3, p4);