Threejs初教程学习记录
threejs是什么 可以做什么
- three.js是JavaScript编写的WebGL第三方库。提供了非常多的3D显示功能。
- Three.js 是一款运行在浏览器中的 3D 引擎，你可以用它创建各种三维场景，包括了摄影机、光影、材质等各种对象
- vue-3D可以将3D模型展示到浏览器中，进行展示 滑动 转动
- threejs可以做更多关于3D的东西
threejs文档教程 官网 案例
能提供的就这么多了，我相信html能实现的vue也能全面实现
- threejs中文文档
- threejs国外官网
- threejs初级案例下载
好了 开始学习 第一课
场景 scene 、相机camera 和渲染器renderer 必不可少 还要添加网格Mesh 模型BoxGeometry 模型材质MeshBasicMaterial 光源PointLight 颜色对象color 纹理属性Texture 添加到场景中
场景
var scene = new THREE.Scene(); //创建场景
相机 摄像机
相机共同配置
camera.position.set(0, 0, 5);//设置相机距离模型距离 不写默认会 0,0,0 ,模型也是0,0,0重合不显示
camera.lookAt(new THREE.Vector3(0, 0, 0));//设置相机观察的目标点 正中央
//相机设置全部完成后 加入场景中
scene.add(camera);three.js里有几种不同的相机
1 (透视摄像机)
四个参数fov：视野角度 w/h:长宽比 近截面（near）和远截面（far）
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );2正交摄像机OrthographicCamera
new THREE.OrthographicCamera（）构造函数用于创建一个正交摄像机，该构造函数中有六个参数，分别是left，right，top，bottom，near，far。
left — 摄像机视锥体左侧面。
right — 摄像机视锥体右侧面。
top — 摄像机视锥体上侧面。
bottom — 摄像机视锥体下侧面。
near — 摄像机视锥体近端面。
far — 摄像机视锥体远端面。
left的值不能够大于right的值，而且left和right设置的值必须位于摄像机position中x坐标的两侧，否则将看不到影像。
对应的top和bottom也一样，bottom值不能大于top值，且位于摄像机position坐标y值两边，否则也会看不到投影影像。
var camera = new THREE.OrthographicCamera(-2, 2, 1.5, -1.5, 1, 10);正交摄像机第一次看到可能会很懵 但是多尝试一下还是可以理解的
摄像机视锥体 不是很熟悉 但是这个值是决定x轴和y轴·和z轴的距离 值越大 物体宽高就要写的大点
值越小 物体就可以写的很小 占的比例是相同的 left一般和right相加是等于零 right 和top 比例应该和画布大小比例相同
举个栗子 画布大小为 w 400 h 300 right 和top比例应该是4比3 16比12 都可以
四个值你写-4，4，3，-3 可以 你写 -16，16，12，-12 也可以
正方形 x =2 y = 2 和 x=8 y = 8 是一样的大小
z轴的话就不限制
渲染器
看到的不同都写上去
第一种
//页面
<canvas id="mainCanvas" width="400px" height="300px" ></canvas>
//定义渲染器
var renderer = new THREE.WebGLRenderer({
canvas: document.getElementById('mainCanvas')
});
renderer.setClearColor(0x000000); //设置渲染器背景颜色
//最后一步 渲染
renderer.render(scene, camera);第二种
//页面为空
//创建
var renderer = new THREE.WebGLRenderer();
document.body.appendChild( renderer.domElement );
//最后一步渲染
renderer.render( scene, camera );哪种实用就用哪种
模型
1 立方体
参数为 X Y Z px py pz 的值 X Y Z也就决定正宽高高度 px py pz表示三个方向上的分段数
//老版本立方体
new THREE.CubeGeometry(1, 2, 3)
//新版本立方体
var geometry = new THREE.BoxGeometry( 1, 1, 1 );2 PlaneGeometry是二维平面几何体
看上去是扁平的，因为它只有两个维度，给定宽高，即可创建这种几何体。 立方体
width：x方向上的长度；
height：是y方向上的长度；
widthSegments：x轴方向的分段；
heightSegments：y轴方向的分段。
var planeGeo = new THREE.PlaneGeometry(1.5, 3);3 几何体 不太懂
//见过的写法1
var triGeo = new THREE.Geometry();//声明一个几何体对象Geometry
triGeo.vertices = [new THREE.Vector3(0, -0.8, 0),new THREE.Vector3(-2, -0.8, 0), new THREE.Vector3(-1, 0.8, 0)];//三个顶点坐标 写几个坐标就是几条边
triGeo.faces.push(new THREE.Face3(0, 2, 1));
//见过的写法2 Z轴线条
var zGeo = new THREE.Geometry();
zGeo.vertices.push(new THREE.Vector3(0, 0, 0));
zGeo.vertices.push(new THREE.Vector3(0, 0, 5));
var zMat = new THREE.LineBasicMaterial({
color: 0x00ccff
});
var zAxis = new THREE.Line(zGeo, zMat);4 基本几何形状 球体
//构造函数
THREE.SphereGeometry(radius, segmentsWidth, segmentsHeight, phiStart, phiLength, thetaStart, thetaLength)
radius：是半径；
segmentsWidth：经度上的切片数，相当于经度被切成了几瓣；
segmentsHeight：纬度上的切片数，相当于纬度被切成了几层；
phiStart：经度开始的弧度；
phiLength：经度跨过的弧度；
thetaStart：纬度开始的弧度；
thetaLength：纬度跨过的弧度。
经度 X Y轴的圆
纬度 Z轴的圆
弧度为 Math.PI：180° Math.PI/2：90° Math.PI/3：60° Math.PI/4：45°
Math.PI/5：36° Math.PI/6：30°
var sphere = new THREE.Mesh(new THREE.SphereGeometry(3, 8, 6), material);
// var sphere = new THREE.Mesh(new THREE.SphereGeometry(3, 8, 6,
// 0, Math.PI * 2, Math.PI / 6, Math.PI / 2), material);
// var sphere = new THREE.Mesh(new THREE.SphereGeometry(3, 8, 6,
// Math.PI / 2, Math.PI, Math.PI / 6, Math.PI / 2), material);
// var sphere = new THREE.Mesh(new THREE.SphereGeometry(3, 8, 6,
// Math.PI / 6, Math.PI / 3), material);
// var sphere = new THREE.Mesh(new THREE.SphereGeometry(3, 8, 6,
// 0, Math.PI * 2, Math.PI / 6, Math.PI / 3), material);
// var sphere = new THREE.Mesh(new THREE.SphereGeometry(3, 8, 6,
// Math.PI / 2, Math.PI, Math.PI / 6, Math.PI / 2), material);5 圆形（CircleGeometry）
可以创建圆形或者扇形
构造函数：
THREE.CircleGeometry(radius, segments, thetaStart, thetaLength)
radius：半径；
segments：以一个点为中心的切片数（切蛋糕？）；
thetaStart：开始位置；
thetaLength：扇面跨度；
var circle = new THREE.Mesh(new THREE.CircleGeometry(3, 18, Math.PI / 3, Math.PI / 3 * 4), material);6 圆柱体（CylinderGeometry） 圆台 圆锥 棱锥
构造函数：
THREE.CylinderGeometry(radiusTop, radiusBottom, height, radiusSegments, heightSegments, openEnded)
radiusTop：顶面的半径；
radiusBottom：底面的半径；
height：是圆柱体的高度；
radiusSegments：两底面的分段切片；
heightSegments：侧面的分段切片；
openEnded：是一个布尔值，表示是否没有顶面和底面，缺省值为false，表示有顶面和底面。
例如，new THREE.CylinderGeometry(2, 2, 4, 20, 20, false)，将创建一个上下底面半径为2，高度为4，其各面的切片为20，有底面7 多面体
构造函数
正四面体（TetrahedronGeometry）、正八面体（OctahedronGeometry）、正二十面体（IcosahedronGeometry）的构造函数较为类似
正四面体（TetrahedronGeometry）THREE.TetrahedronGeometry(radius, detail)
正八面体（OctahedronGeometry）：THREE.OctahedronGeometry(radius, detail)
正二十面体（IcosahedronGeometry）：THREE.IcosahedronGeometry(radius, detail)
radius：半径；
detail：细节层次（Level of Detail）的层数
这里我们不对detail多作展开，一般可以对这个值缺省。
正四面体 ：var tetra = new THREE.Mesh(new THREE.TetrahedronGeometry(3), material);
正八面体：var octa = new THREE.Mesh(new THREE.OctahedronGeometry(3), material);
正二十面体：var icosa = new THREE.Mesh(new THREE.IcosahedronGeometry(3), material);8 圆环面（TorusGeometry）
构造函数 THREE.TorusGeometry(radius, tube, radialSegments, tubularSegments, arc)
radius：圆环半径；
tube：管道半径；
radialSegments与tubularSegments分别是两个分段数，详见下图；
arc是圆环面的弧度，缺省值为Math.PI * 2。
9 圆环结（TorusKnotGeometry）
构造函数THREE.TorusKnotGeometry(radius, tube, radialSegments, tubularSegments, p, q, heightScale)
圆环节和圆环很相似，只是多了一些参数。
radius ： 圆环的半径，默认值为1。
tube ： 管道的半径，默认值为0.4。
tubularSegments ： 管道的分段数量，默认值为64。
radialSegments ： 横截面分段数量，默认值为8。
p ： 这个值决定了几何体将绕着其旋转对称轴旋转多少次，默认值是2。
q ： 这个值决定了几何体将绕着其内部圆环旋转多少次，默认值是3。
var torus = new THREE.Mesh(new THREE.TorusKnotGeometry(2, 0.2, 30, 10), material);
var torus = new THREE.Mesh(new THREE.TorusKnotGeometry(2, 0.2, 230, 8,4,3), material);10 管道体 TubeGeometry
TubeGeometry(path : Curve, tubularSegments : Integer, radius : Float, radialSegments : Integer, closed : Boolean)
其中各参数描述如下：
path — Curve - 从曲线基类继承的路径（曲线，路径，即管道的形状）
tubularSegments — Integer - 构成管的段数，默认为64（管道分成多少段）
radius — Float - 管的半径，默认值为1（管道的半径）
radialSegments — Integer - 构成横截面的线段数，默认值为8 （管道口分成多少段，即管道口是几边形）
closed — Boolean 管是否打开或关闭，默认值为false （是否闭合管道，首尾相接的意思）
用法：
function CustomSinCurve( scale ) {
THREE.Curve.call( this );
this.scale = ( scale === undefined ) ? 1 : scale;
}
CustomSinCurve.prototype = Object.create( THREE.Curve.prototype );
CustomSinCurve.prototype.constructor = CustomSinCurve;
CustomSinCurve.prototype.getPoint = function ( t ) {
var tx = t * 3 - 1.5;
var ty = Math.sin( 2 * Math.PI * t );
var tz = 0;
return new THREE.Vector3( tx, ty, tz ).multiplyScalar( this.scale );
};
var path = new CustomSinCurve( 10 );
var tube = new THREE.Mesh(new THREE.TubeGeometry( path, 20, 1, 3, false ), material);11 三维文字TextGeometry
更好（容易）地生成三维文字
构造函数 THREE.TextGeometry(text : String, parameters : Object)
text — 需要显示的文本. （要显示的字符串）
parameters — 对象，该对象可以包含以下参数
font — an instance of THREE.Font.（字体格式）
size — Float. 文本的大小。默认值为100.（字体大小）
height — Float. 拉伸文本的厚度。默认值为50.（字体的深度）
curveSegments — Integer. 曲线上的点数。默认值为12.（曲线控制点数）
bevelEnabled — Boolean. 是否启用“倒角”。默认值为False.（斜角）
bevelThickness — Float. 斜角的深度。默认值为10.（斜角的深度）
bevelSize — Float. 斜角的大小。默认值为8.（斜角的大小）
bevelSegments — Integer. 斜面段数。默认值为3.（斜角段数）材质
我们知道一个材质结合 THREE.Geometry 对象，可以构成 THREE.Mesh 对象。材质就像物体的皮肤，决定了几何体的外表。例如皮肤定义了一个几何体看起来是否像金属、透明与否、或者显示为线框。
程序后面如果要改变材质或者模型可这样子写进行覆盖
var material = new THREE.MeshLambertMaterial({
color: 0xffff00
});
var geometry = new THREE.CubeGeometry(1, 2, 3);
var mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
mesh.material = new THREE.MeshLambertMaterial({
color: 0x00ff00
});看这 这个解释在有详细解释 各种材质 解释 共同属性等 https://www.hangge.com/blog/cache/detail_1815.html
MeshBasicMaterial是一种非常简单的材质，这种材质不考虑场景中光照的影响。使用这种材质的网格会被渲染成简单的平面多边形，而且也可以显示几何体的线框。
1 当网格中加入 wireframe: true 会变成几何体边框 普通材质
//color（颜色） 设置材质的颜色
//wireframe（线框） 设置这个属性的可以将材质渲染成线框，非常适合调试
//wireframeLinewidth（线框宽度） 如果已经打开了wirefreme，这个属性定义线框中线的宽度
//wireframeLinecap（线框线段端点） 这个属性定义了线框模式下顶点键线段的端点如何显示。可选的值包括butt（平）、round（圆）和square（方）。默认值为round。在实际使用中，这个属性的修改结果很难看出来。WebGLRenderer对象不支持该属性。
//wireframeLinejoin（线框线段连接点） 这个属性定义了线段的连接点如何显示。可选的值有round（圆）、bevel（斜角）和miter（尖角）。默认值为round。如果你在一个使用低透明度和wireframeLinewidth值很大的例子里靠近观察，就可以看到这个属性的效果。WebGLRenderer对象不支持该属性
//shading（着色） 该属性定义如何着色。可选的值有THREE.SmoothShading、THREE.NoShading和THREE.FlatShading。默认值为THREE.SmoothShading，这将产生一个平滑的对象，看不到单个面
//vertexColors（顶点颜色） 可以通过这个属性给每个顶点定义不同的颜色。默认值为THREE.NoColors。如果将这个值设置为THREE.VertexColors，渲染器会采用THREE.Geometry对象的colors属性的值。该属性对象CanvasRenderer不起作用，但对WebGLRenderer起作用
//fog（雾化） 该属性指定当前材质是否受全局雾化效果设置的影响。默认true，如果设置为false，将不会受雾化的影响
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00,<--wireframe: true--> } );2 THREE.LineBasicMaterial用于绘制线段的基础材质。
//color ：该属性设置材质的颜色，如果设置了vertexColors，这是属性将被忽略
//linewidth ：设置线的宽度，默认值为1.0
//linecap ：这个属性定义了线框模式下顶点间线段的端点如何显示。可选的值包括butt（平）、round（圆）和square（方）。默认值为round。在实际使用中，这个属性的修改结果很难看出来。WebGLRenderer对象不支持该属性
//linejoin ：这个属性定义了线段的连接点如何显示。可选的值有round（圆）、bevel（斜角）和miter（尖角）。默认值为round。
//如果你在一个使用低透明度和很大wireframeLinewidth值的例子里靠近观察，就可以看到这个属性的效果。WebGLRenderer对象不支持该属性
//vertexColors ：将这个属性设置成THREE.VertexColors值，就可以给每个顶点指定一种颜色
//fog ：该属性指定当前材质是否受全局雾化效果设置的影响
var material = new THREE.LineBasicMaterial( {
color: 0xffffff,
linewidth: 1,
linecap: 'round',
linejoin: 'round'
} );3 高级材质THREE.MeshLambertMaterial
//这种材质可以用来创建暗淡的并不光亮的表面。
//无光泽表面的材质，无镜面高光。
//这可以很好地模拟一些表面（如未经处理的木材或石头），但不能用镜面高光（如上漆木材）模拟光泽表面。
//该材质非常易用，而且会对场景中的光源产生反应。
//构造函数
var cubeMaterial = new THREE.MeshLambertMaterial({color: 0x00ffff});//实例化一个蓝色的材质
//参数名称 | 描述 |
color（颜色） | 设置材质的颜色 |
wireframe（线框） | 设置这个属性可以将材质渲染成线框，非常适用于调试。 |
wireframeLinewidth（线框线宽） | 如果已经打开了 wireframe，这个属性定义线框中线的宽度 |
wireframeLinecap（线框线段端点） | 这个属性定义了线框模式下顶点间线段的端点如何显示。可选的值包括：round 圆（默认值）butt：平 square：方 WebGLRenderer 对象不支持该属性 |
wireframeLinejoin（线框线段连接点） | 这个属性定义了线段的连接点如何显示。可选的值有：round：圆（默认值） bevel：斜角 miter：尖角 如果在一个使用低透明度和 wirefiameLinewidth 值很大的例子里靠近观察，就可以看到这个属性的效果。 WebGLRenderer 对象不支持该属性。 |
shading（着色） | 该属性定义如何着色。可选的值有： THREE.SmoothShading（默认值，这个将产生一个平滑的对象，看不到单个面） THREE.NoShading THREE.FlatShading |
vertexColors（顶点颜色） | 可以通过这个属性给每个顶点定义不同的颜色。默认值为：THREE.NoColors。如果将这个值设置为 THREE.VertexColors，渲染器会采用 THREE.Geometry 对象的 colors 属性的值。该属性对 CanvasRenderer不起作用，但对 WebGLRender 起作用。比如我们可以使用该属性为线段的不同部分设置不同的颜色。也可以使用这个属性为这种材质类型创建渐变效果。 |
fog（雾化） | 该属性指定当前材质是否受全局雾化效果设置的影响。如果将该属性设置为 false，那么我们全局雾化效果设置就不会影响当前对象的渲染 |
4 THREE.MeshPhongMaterial（网格 Phong 材质）
可以创建一种光亮的材质。
网格
两个参数 模型 和 材质
var plane = new THREE.Mesh(planeGeo, material);网格配置
plane.position.x = 1;//向X轴移动1
plane.position.y = 1;//向y轴移动1
plane.position.z = 1;//向z轴移动1
plane.position.set(-1.6,0,0)//x y z
plane.rotation.set(-1.6,0,0)//旋转角度 x y z绘制轴
// x-axis
var xGeo = new THREE.Geometry();
xGeo.vertices.push(new THREE.Vector3(0, 0, 0));
xGeo.vertices.push(new THREE.Vector3(5, 0, 0));
var xMat = new THREE.LineBasicMaterial({
color: 0xff0000
});
var xAxis = new THREE.Line(xGeo, xMat);
scene.add(xAxis);
// y-axis
var yGeo = new THREE.Geometry();
yGeo.vertices.push(new THREE.Vector3(0, 0, 0));
yGeo.vertices.push(new THREE.Vector3(0, 5, 0));
var yMat = new THREE.LineBasicMaterial({
color: 0x00ff00
});
var yAxis = new THREE.Line(yGeo, yMat);
scene.add(yAxis);
// z-axis
var zGeo = new THREE.Geometry();
zGeo.vertices.push(new THREE.Vector3(0, 0, 0));
zGeo.vertices.push(new THREE.Vector3(0, 0, 5));
var zMat = new THREE.LineBasicMaterial({
color: 0x00ccff
});
var zAxis = new THREE.Line(zGeo, zMat);
scene.add(zAxis);旋转是让在模型的网格旋转 模型才会旋转
正交摄像机 和 透视摄像机看到的框架也不相同
加载 FontLoader 字体库
var loader = new THREE.FontLoader();
loader.load('../lib/helvetiker_regular.typeface.json', function(font) {
var mesh = new THREE.Mesh(new THREE.TextGeometry('/', {
font: font,
size: 1,
height: 1
}), material);
scene.add(mesh);
// render
renderer.render(scene, camera);
});Threejs支持了许多格式的3D模型导入，包括*.obj、 .sea、.3mf 、.amf、.sea、.pmd、.json等。
加载外部模型 OBJ类型 OBJLoader
THREE.OBJLoader() 函数说明：
objLoader.setMaterials( materials )：设置obj使用的材质贴图
objLoader.setPath( options.objPath )：设置obj文件所在路径
objLoader.load( filename,onSuccess(object ),onProgress(xhr),onError(error))：obj文件名、 加载成功后回调处理(参数为生成的三维对象)、加载过程中回调处理(xhr对象属性可计算出已完成加载百分比)、失败回调处理。
在onSuccess(object ){}回调里我们可以对生成的三维对象做一些处理：对材质进行调色、设置透明度、设置贴图模式等，对设置旋转、缩放、位置摆放、自发光颜色、环境光颜色。
如果obj文件代表的三维对象是由多个子模型构成的模型组合，我们可以调用object.traverse(function(child){})来对每个子模型进行处理。
//上面摄像机
var loader = new THREE.OBJLoader();
loader.load('../lib/port.obj', function(obj) {
obj.traverse(function(child) {
if (child instanceof THREE.Mesh) {
child.material.side = THREE.DoubleSide;
}
});
mesh = obj;
scene.add(obj);
});
//下面光源修改OBJ文件的颜色等
//上面摄像机
var loader = new THREE.OBJLoader();
loader.load('../lib/port.obj', function(obj) {
obj.traverse(function(child) {
if (child instanceof THREE.Mesh) {
child.material = new THREE.MeshLambertMaterial({//高级材质
color: 0xff0000,
side: THREE.DoubleSide
});
}
});
mesh = obj;
scene.add(obj);
});
//下面光源加载外部模型 mtl类型 MTLLoader
THREE.MTLLoader()函数说明：
mtlLoader.setBaseUrl()：设置材质路径
mtlLoader.setPath()：设置mtl文件所在路径
mtlLoader.load(filename,onSuccess(materials ),onProgress(xhr),onError(error))：mtl文件名、 加载成功后回调处理(参数为生成的材质库)、加载过程中回调处理(xhr对象属性可计算出已完成加载百分比)、失败回调处理
//上面摄像机
var mtlLoader = new THREE.MTLLoader();
mtlLoader.setPath('../lib/');
mtlLoader.load('port.mtl', function(materials) {
materials.preload();
// model loader
var objLoader = new THREE.OBJLoader();
objLoader.setMaterials(materials);
objLoader.setPath('../lib/');
objLoader.load('port.obj', function(object) {
object.position.y = -95;
// if has object, add to scene
if(object.children.length > 0) {
scene.add(object.children[0]);
}
});
});
//下面光源加载外部模型 dae类型 ColladaLoader
Collada是一种用基于XML的格式定义数字内容的格式。这也是一种被广泛使用的格式，差不多所有的三维软件和渲染引擎都支持这种格式。
Collada模型中不仅定义了几何体，也定义了材质，甚至还可以定义光源。
//上面摄像机
var loader = new THREE.ColladaLoader();
loader.load('../lib/port.dae', function (collada) {
if (collada.scene.children.length > 0) {
scene.add(collada.scene.children[0]);
}
});
//下面光源光源
点光源
PointLight 点光源，照射所有方向的光源，例如灯泡发出的光，可以投射阴影。
构造函数
PointLight( color : Integer, intensity : Float, distance : Number, decay : Float )
参数 ：color：光源的颜色 intensity：光源的强度 distance：光的照射距离 decay：光的衰减指数
属性：
.decay : Float：光源的衰减指数
.distance : Float：光的照射距离
.isPointLight : Boolean：判断是否是点光源
.power : Float：光照强度，power = intensity * 4π
.shadow : LightShadow：阴影
方法： .copy ( source : PointLight ) : PointLight：把所有的属性复制到光源环境光源
THREE.AmbientLight()环境光源，一般不会单独使用，需要配合其他光源类似使用。
环境光会照亮场景中的所有物体，不能用来投射阴影，因为环境光是没有方向的。
不需要指定位置。
var light = new THREE.AmbientLight(0xcccccc);
//color：颜色值，默认为白色
//intensity：光的强度，默认为1聚光灯
THREE.SpotLight 聚光灯 是一种具有锥形效果的光源，该光源拥有产生光的方向和角度。我们可以将其与手电筒或者灯笼产生的光进行对比。THREE.SpotLight 是最常使用的光源之一
构造函数
SpotLight( color : Integer, intensity : Float, distance : Float, angle : Radians, penumbra : Float, decay : Float )
//color - (可选) 十六进制颜色的光 默认为 0xffffff(white).
//intensity - (可选) 光的强度数值. 默认值为1.
//distance - 光源从原点发出的距离，值越大，光的强度会逐渐衰减.
//angle - 光源的散射角度默认为Math.PI/2.
//penumbra - 光影聚焦的百分比 0-1之间，默认值为0，所以阴影会产生锯齿效果.
//decay - 光在距离上的强度.方法：
angle：角度。即光源发射出的光束的宽度。单位是弧度，默认值：Math.PI/3
castShadow：投影。如果设置为 true，这个光源就会生成阴影。
color：光源颜色。
distance：光源照射的距离。默认值为 0，这意味着光线强度不会随着距离增加而减弱。
exponent：光强衰减指数。使用 THREE.SpotLight 光源，发射的光线的强度随着光源距离的增加而减弱。exponent 属性决定了光线强度递减的速度。使用低值，从光源发出的光线将到达远处的物体，而使用高值，光线仅能到达非常接近 THREE.SpotLight 光源的物体。
intensity：光源照射的强度。默认值：1
onlyShadow：仅阴影。如果此属性设置为 true，则该光源只生成阴影，而不会在场景中添加任何光照。
position：光源在场景中的位置
shadow.bias：用来偏置阴影的位置。当你使用非常薄的对象时，可以使用它来解决一些奇怪的效果。如果你看到奇怪的阴影效果，将该属性设置为很小的值（例如 0.01）通常可以解决问题。此属性的默认值为 0。
shadow.camera.far：投影远点。表示到距离光源的哪一个位置可以生成阴影。默认值：5000
shadow.camera.fov：投影视场。表示用于生成阴影的视场有多大。默认值：50
shadow.camera.near：投影近点。表示距离光源的哪一个位置开始生成阴影。默认值为 50
shadow.map.width 和 shadow.map.height：阴影映射宽度和阴影映射高度。决定了有多少像素用来生成阴影。当阴影具有锯齿状边缘或看起来不光滑时，可以增加这个值。在场景渲染之后无法更改。两者的默认值均为：512
target：目标。使用 THREE.SpotLight 光源时，它的指向很重要。使用 target 属性，你可以将 THREE.SpotLight 光源指向场景中的特定对象或位置。注意，此属性需要一个 THREE.Object3D 对象（如 THREE.Mesh)。
visible：是否可见。如果该属性设置为 true（默认值），该光源就会打开。如果设置 false，光源就会关闭。
平行光
THREE.DirectionalLight 平行光 可以看作距离很远的光。它发出的所有光线都是平行的。比如太阳光，由于太阳离我们很远，我们可以把太阳的光线看作是平行的。
与点光源和聚光灯光源的区别
最大的区别就是，点光源和聚光灯光源距离物体越远光线越暗。光是从一点发出的。
而被平行光照亮的整个区域接收到的光强是一样的。光是平行的。
//第一个参数 Hex:光的颜色 第二个参数 Intensity：光源的强度，默认是1.0，如果为0.5，则强度是一半，意思是颜色会淡一些
//第三个参数 Distance：光线的强度，从最大值衰减到0，需要的距离。 默认为0，表示光不衰减，如果非0，则表示从光源的位置到Distance的距离，光都在线性衰减。到离光源距离Distance时，光源强度为0.
var light = new THREE.DirectionalLight(0xFF0000,1, 0);
var light = new THREE.DirectionalLight(0xffffff);
light.position.set(20, 10, 5);//位置Color颜色对象，有以下多种初始化方法。
//空的构造函数 -- 默认为白色
var color = new THREE.Color();
//十六进制颜色 （推荐使用）
var color = new THREE.Color( 0xff0000 );
//RGB 字符串
var color = new THREE.Color("rgb(255, 0, 0)");
var color = new THREE.Color("rgb(100%, 0%, 0%)");
//颜色值 - 140 种支持，不是驼峰命名
var color = new THREE.Color( 'skyblue' );
//HSL 字符串
var color = new THREE.Color("hsl(0, 100%, 50%)");
//RGB 值 在 0 到 1 之间
var color = new THREE.Color( 1, 0, 0 );Texture 纹理属性
构造函数
Texture( image, mapping, wrapS, wrapT, magFilter, minFilter, format, type, anisotropy )
//id 此纹理实例的唯一编号。
//uuid 此对象实例的UUID。这会自动分配，所以不应该编辑。
//name 对象的名称，可以重复，默认值为空字符串
//image 一个Image对象，通常使用 ImageUtils 或 ImageLoader 类来创建。Image对象可以包括图像 (比如 PNG, JPG, GIF, DDS), 视频 (e.g., MP4, OGG/OGV), 或者六幅图像的集合用于一个立方体贴图。 要使用视频作为一个纹理，你需要把一个HTML5视频元素作为纹理图像的源，并在视频播放时不断更新这个纹理-VideoTexture类会自动处理。
//mipmap 用户指定的mipmap数组（可选）
//mapping 如何将图像应用到对象。默认为 UV贴图（THREE.UVMapping）类型，这里U,V 坐标用来应用映射，要求是单个纹理。其他类型包括：THREE.CubeReflectionMapping：立方体反射映射THREE.CubeRefractionMapping：立方体折射映射THREE.EquirectangularReflectionMapping：圆柱反射映射THREE.EquirectangularRefractionMapping：圆柱折射映射THREE.SphericalReflectionMapping：球面反射映射
//wrapS 缺省为 THREE.ClampToEdgeWrapping, 表示边缘被夹到纹理单元（texels）的外边界。THREE.ClampToEdgeWrapping：夹边。超过1.0的值被固定为1.0。超过1.0的其它地方的纹理，沿用最后像素的纹理。用于当叠加过滤时，需要从0.0到1.0精确覆盖且没有模糊边界的纹理。其他两个选项是：THREE.RepeatWrapping：平铺重复。超过1.0的值都被置为0.0。纹理被重复一次。在渲染具有诸如砖墙之类纹理的物体时，如果使用包含一整张砖墙的纹理贴图会占用较多的内存，通常只需载入一张具有一块或多块砖瓦的较小的纹理贴图，再把它按照重叠纹理寻址模式在物体表面映射多次，就可以达到和使用整张砖墙贴图同样的效果。THREE.MirroredRepeatWrapping：镜像重复。每到边界处纹理翻转，意思就是每个1.0 u或者v处纹理被镜像翻转。
//wrapT 缺省为 THREE.ClampToEdgeWrapping, 表示边缘被夹到纹理单元（texels）的外边界。其他两个选项是 THREE.RepeatWrapping 和 THREE.MirroredRepeatWrapping。注意: 平铺图像纹理仅在图像尺寸是2的幂次方（2，4，8，16，32，64，128，256，512，1024，2048，…）时工作。每个维度的值不一定是相同的，但每一个维度都必须是2的幂次方。这是WebGL的限制，不是Three.js的。
//magFilter 该属性定义当一个纹理单元（texel）覆盖多个像素点时纹理如何采样。缺省为 THREE.LinearFilter，表示获取4个最近的纹理单元执行双向线性插值计算(显示效果好)。另外的选项是 THREE.NearestFilter, 表示使用最近的texel(性能优)。
//minFilter 该属性定义当一个纹理单元（texel）不足以覆盖单个像素点时纹理如何采样。缺省为 THREE.LinearMipMapLinearFilter, 表示使用多级纹理贴图（mipmapping）以及一个三线性滤波器。其他选项是：THREE.NearestFilter：最近滤镜。在纹理基层上执行最邻近过滤。THREE.NearestMipMapNearestFilter：选择最临近的mip层，并执行最临近的过滤。THREE.NearestMipMapLinearFilter：在mip层之间执行线性插补，并执行最临近的过滤。THREE.LinearFilter：在纹理基层上执行线性过滤。THREE.LinearMipMapNearestFilter：选择最临近的mip层，并执行线性过滤。THREE.LinearMipMapLinearFilter：在mip层之间执行线性插补，并执行线性过滤。
//anisotropy 表示纹理的各向异性。沿纹理单元密度最高方向的轴线所取样本数。默认情况下，这个值为1。较高的值比基础MipMap要更清晰，但需要更多的采样。 使用renderer.getMaxAnisotropy()方法来找到GPU最大有效各向异性值；这个值通常是2的幂次方。
//format 缺省纹理格式为THREE.RGBAFormat。其他格式有：THREE.AlphaFormat：对应于GL_ALPHA。Alpha 值THREE.RGBFormat：Red, Green, Blue 三原色值THREE.RGBAFormat：Red, Green, Blue 和 Alpha 值THREE.LuminanceFormat：灰度值THREE.LuminanceAlphaFormat：灰度值和 Alpha 值THREE.RGBEFormat
//type 缺省纹理格式为THREE.RGBAFormat。其他格式有：THREE.UnsignedByteType：无符号8位整形值(1个字节)THREE.ByteType：带符号8位整形值(1个字节)THREE.ShortType：带符号16位整形值(2个字节)THREE.UnsignedShortType：无符号16未整形值(2个字节)THREE.IntType：带符号32位整形值(4个字节)THREE.UnsignedIntType：无符号32位整形值(4个字节)THREE.FloatType：单精度浮点型(4个字节)THREE.HalfFloatType：半浮点型
//offset 在U和V方向上，纹理在模型表面上重复绘制时的偏移。通常范围是0.0 到 1.0。注意： offset属性是一个便捷修饰符，仅影响Texture对模型上第一组UV的应用。如果纹理用作需要额外UV集的贴图（例如，大多数库存材料的aoMap或lightMap），则必须手动分配这些UV以获得所需的偏移量。
//repeat 纹理在整个表面上重复多少次，在每个方向U和V上。如果在任一方向上repeat设置为大于1，则相应的Wrap参数也应设置为 THREE.RepeatWrapping或THREE.MirroredRepeatWrapping以实现所需的平铺影响。注意： repeat属性是一个便捷修饰符，仅影响Texture对模型上第一组UV的应用。如果纹理用作需要额外UV集的贴图（例如，大多数库存材料的aoMap或lightMap），则必须手动分配这些UV以实现所需的重复。
//rotation 纹理围绕中心点旋转多少，以弧度表示。正值是逆时针的。缺省值是0。
//center 旋转发生的点。值（0.5,0.5）对应于纹理的中心。默认值是（0，0），左下角。
//matrixAutoUpdate 是否更新纹理的UV-变换.matrix从纹理特性.offset，.repeat， .rotation和.center。默认情况下为真。如果直接指定uv-transform矩阵，则将其设置为false。
//matrix 纹理的uv转换矩阵。从质地特性渲染更新.offset，.repeat， .rotation和.center当纹理的.matrixAutoUpdate属性为true。当.matrixAutoUpdate属性为false时，可以手动设置此矩阵。默认值是单位矩阵。
//generateMipmaps 是否为纹理生成mipmap（如果可能）。默认情况下为真。如果您手动创建mipmap，请将其设置为false。
//premultiplyAlpha 在默认情况下，这是PNG图像的标准。如果RGB值已被预乘alpha，则设置为true。
//flipY 默认为真。翻转图像的Y轴以匹配WebGL纹理坐标空间。
//unpackAlignment 默认值为4。指定内容中每个像素行起点的对齐要求。有效值有 1 (字节对齐byte-alignment), 2 (行起点按偶数字节对齐), 4 (字对齐word-alignment), 和 8（行起点按双字对齐）。参阅：glPixelStorei 以了解更多信息。
//encoding 编码方式。默认设置为 THREE.LinearEncoding，但是支持 sRGB, RGBE, RGBM, RGBD, LogLuv 和 Gamma。 重要：如果纹理中的这个值在材料已用后被改变，则需要触发一个Material.needsUpdate操作，以便该值在着色器中得到实现。
//version 从0开始计算needsUpdate更新次数
//onUpdate 一个回调函数，当纹理被更新时调用（例如，当needsUpdate被设置为true并且纹理被使用时）。
//needsUpdate 将其设置为true以在下次使用纹理时触发更新。对于设置换行模式尤为重要。//案例：
// load a texture, set wrap mode to repeat
var texture = new THREE.TextureLoader().load( "textures/water.jpg" );
texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;
texture.repeat.set( 4, 4 );
//放入材质
var material = new THREE.MeshLambertMaterial({
map: texture
});另外要知道的小知识
window.requestAnimationFrame()
window.requestAnimationFrame() 告诉浏览器——你希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前执行
在threejs用到的有
var requestAnimationFrame = window.requestAnimationFrame
|| window.mozRequestAnimationFrame
|| window.webkitRequestAnimationFrame
|| window.msRequestAnimationFrame;
window.requestAnimationFrame = requestAnimationFrame;
id = requestAnimationFrame(draw);//传入一个函数 返回一个非零值 可当作id
function draw() {
mesh.rotation.y = (mesh.rotation.y + 0.01) % (Math.PI * 2);
renderer.render(scene, camera);
id = requestAnimationFrame(draw);//继续调用 id更新
}
function stop() {
if (id !== null) {
window.cancelAnimationFrame(id);//传入id 停止调用
id = null;
}
}THREEJS状态显示类stats的应用
效果如下：
当前场景的显存占用问题
当前场景的渲染帧率
用法：
//引入文件 ../lib/stat.js
//初始化的时候
var stat = null;
stat = new Stats();
stat.domElement.style.position = 'absolute';
stat.domElement.style.right = '0px';
stat.domElement.style.top = '0px';
document.body.appendChild(stat.domElement);
//渲染的时候
stat.begin();
mesh.rotation.y = (mesh.rotation.y + 0.01) % (Math.PI * 2);
renderer.render(scene, camera);
stat.end();