Threejs初教程学习记录
threejs是什么 可以做什么
- three.js是JavaScript编写的WebGL第三方库。提供了非常多的3D显示功能。
- Three.js 是一款运行在浏览器中的 3D 引擎,你可以用它创建各种三维场景,包括了摄影机、光影、材质等各种对象
- vue-3D可以将3D模型展示到浏览器中,进行展示 滑动 转动
- threejs可以做更多关于3D的东西
threejs文档教程 官网 案例
能提供的就这么多了,我相信html能实现的vue也能全面实现
好了 开始学习 第一课
场景 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();