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)

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学习

three入门

三要素

three常用的API