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