THREE常用API

WebGL

本教程只列出常用API，很多不常用的API一般默认值为true,只有极少数场景需要单独设置，本章不做说明。全部API

WebGLRenderer

构造器

/**
*@param {object} option - 是一个可选对象，包含用来定义渲染器行为的属性。
*/
var  renderer = new THREE.WebGLRenderer(option);

canvas --指定canvas作为绘制对象,初始化渲染器的方式之一

var renderer = new THREE.WebGLRenderer({
 canvas: document.getElementById('#canvas')
 });
//初始化渲染器方式二
var renderer = new THREE.WebGLRenderer();
document.getElementsByTagName('body')[0].appendChild(renderer.domElement);

alpha -- Boolean, 默认为 false 背景是否透明

var renderer = new THREE.WebGLRenderer({ alpha: true })

antialias -- Boolean, 默认为 false 是否抗锯齿

var renderer = new THREE.WebGLRenderer({ antialias: true })

属性

.domElement
一个用来绘制输出的 Canvas 对象。该对象通过构造函数中的渲染器所自动创建,你只需要将其添加到您的网页中。

.shadowMap.enabled
默认为 false. 如果设置了该参数，则启用在场景中的阴影贴图。

.shadowMap.type
阴影贴图类型定义,可选取值有： THREE.BasicShadowMap, THREE.PCFShadowMap, THREE.PCFSoftShadowMap. 默认为 THREE.PCFShadowMap。

方法

.getPixelRatio ()
返回当前设备的像素比。

.setPixelRatio ( value )
设置设备像素比。通常用于HiDPI设备防止模糊输出canvas。

.getSize (Integer,Integer)
返回一个包含渲染器输出canvas宽高的对象(整数型)，以像素为单位。

.setClearColor ( color, alpha )
设置清除的颜色和透明度。

.gammaOutput
所有纹理和颜色需要以预乘伽马输出,用于对亮度校验，默认值为false
..gammaFactor
默认值为2

//创建一个具有红色背景的渲染器
var renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( 200, 100 );
renderer.setClearColor( 0xff0000 );

.getClearColor()
获取当前清除颜色的 THREE.Color 实例。

.getClearAlpha()
获取清除透明度的 float。范围从0到1。

scene

var  scene = new THREE.Scene();

属性

.fog
雾实例定义雾的类型，影响场景中呈现的所有内容。默认值为NULL。

//随着距离线性增长的雾化效果
scene.fog = new THREE.Fog(0xffffff,0.015,100);
//（雾的颜色，near(近处属性值)，far(远处属性值)），这两个属性决定雾从什么地方开始，以及雾加深的程度。
//随着距离指数增长的雾化效果，浓度默认值为0.00025
scene.fog = new THREE.FogExp2(0xffffff,0.02);
//(颜色，浓度)

.overrideMaterial
将迫使在场景中的一切对象都使用该材料进行渲染。默认为空

 scene.overrideMaterial = new THREE.MeshLambertMaterial({color : 0xF39600,wireframe:true });

.children
children属性返回scene中的所有对象的数组

方法

.add()
在场景中添加指定物体

.remove()
在场景中移除指定物体

.getChildByName(name)
通过name属性直接获取指定对象

//删除场景中最后一个boxGeometry,检查最后一个物体是不是Mesh对象，防止删除光源和相机
var allChildren = scene.children;
var lastObject = allChildren[allChildren.length-1];
if(lastObject instanceof THREE.Mesh){
    scene.remove(lastObject)
}

.traverse()
可以将一个函数作为参数传递给traverse函数，这个传递来的函数将会在场景的每一个对象上调用一次。

scene.traverse(function(e){
    if(e instanceof THREE.Mesh && e!=plane){
    ···代码
    }
})

camera

构造器

//透视投影
/**
*@param {Number} fov - 视锥垂直视角。
*@param {Number} aspect - 视锥体宽高比。
*@param {Number} near - 视锥体近裁剪面。
*@param {Number} far - 视锥体远裁剪面。
*/
PerspectiveCamera( fov, aspect, near, far )
var camera =  new THREE.PerspectiveCamera(45, width / height, 1, 1000);
//正交投影
/**
*@param {Number} left -视椎体左面
*@param {Number} right -视椎体右面
*@param {Number} top -视椎体上面
*@param {Number} bottom -视椎体下面
*@param {Number} near -视锥体近裁剪面
*@param {Number} far - 视锥体远裁剪面。
*/
OrthographicCamera( left, right, top, bottom , near , far )
var camera = new THREE.OrthographicCamera( width / - 2, width / 2, height / 2, height / - 2, 1, 1000 );

属性

.isCamera
用于检查是否是摄像机，默认是true，不要去改变它的值。

.matrixWorldInverse
matrixWorld的逆矩阵。MatrixWorld包含相机的世界变换矩阵，结果是Matrix4矩阵

.projectionMatrix
投影变换矩阵，结果是Matrix4矩阵类

方法

.clone ()
返回一个克隆的相机

.copy(source : Camera, recursive : Boolean)
将源相机的属性复制到这一个

.getWorldDirection ( target : Vector3 )
target — 结果将被赋值到这个向量中，可以省略
该方法返回代表相机方向的一个在世界空间中的矢量

.lookAt ( target：vector3 )
设置相机的朝向

.updateProjectionMatrix ()
更新相机投影矩阵。必须在参数更改之后调用。

THREE方法

CatmullRomCurve3

用法：使用Catmull-Rom算法从一系列点创建平滑的三维样条曲线，返回一个Curve对象，Curve基类也有自己的属性和方法。
new THREE.CatmullRomCurve3( Array, closed:Boolean, curveType:String, tension:Float )

以下是“new THREE.CatmullRomCurve3”对象的属性。
* .points //Vector3点数组
* .closed - 曲线是否关闭。默认值为false
* .curveType - 曲线的类型。默认是centripetal(向心的)，可能值chordal and catmullrom
* .tension - 曲线的张力。默认值为0.5。当.curveType() = 'catmullrom'，定义该属性值

//Create a closed wavey loop
var curve = new THREE.CatmullRomCurve3( [
    new THREE.Vector3( -10, 0, 10 ),
    new THREE.Vector3( -5, 5, 5 ),
    new THREE.Vector3( 0, 0, 0 ),
    new THREE.Vector3( 5, -5, 5 ),
    new THREE.Vector3( 10, 0, 10 )
] );
curve.close = true;
var points = curve.getPoints( 50 );
var geometry = new THREE.BufferGeometry().setFromPoints( points );
var material = new THREE.LineBasicMaterial( { color : 0xff0000 } );
// Create the final object to add to the scene
var curveObject = new THREE.Line( geometry, material );