Threejs初教程

Threejs初教程学习记录threejs是什么可以做什么three.js是JavaScript编写的WebGL第三方库。提供了非常多的3D显示功能。Three.js 是一款运行在浏览器中的 3D 引擎，你可以用它创建各种三维场景，包括了摄影机、光影、材质等各种对象vue-3D可以将3D模型展示到浏览器中，进行展示滑动转动threejs可以做更多关于3D的东西threejs文档教程官网案例

无恃而安

4237人浏览 · 2021-07-20 17:35:05

无恃而安 · 2021-07-20 17:35:05 发布

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();

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

Vue

echarts堆叠柱状图

Vue

Vue里echarts根据页面大小动态调整/自适应

Vue

所有评论(0)

查看更多评论

无恃而安

@weixin_50601484

已为社区贡献1条内容

Threejs初教程

无恃而安

Threejs初教程学习记录

threejs是什么 可以做什么

threejs文档教程 官网 案例

好了 开始学习 第一课

场景

相机 摄像机

相机共同配置

1 (透视摄像机)

2正交摄像机OrthographicCamera

渲染器

模型

1 立方体

2 PlaneGeometry是二维平面几何体

3 几何体 不太懂

4 基本几何形状 球体

5 圆形（CircleGeometry）

6 圆柱体（CylinderGeometry） 圆台 圆锥 棱锥

7 多面体

8 圆环面（TorusGeometry）

9 圆环结（TorusKnotGeometry）

10 管道体 TubeGeometry

11 三维文字TextGeometry

材质

看这 这个解释在有详细解释 各种材质 解释 共同属性等 https://www.hangge.com/blog/cache/detail_1815.html

1 当网格中加入 wireframe: true 会变成几何体边框 普通材质

2 THREE.LineBasicMaterial用于绘制线段的基础材质。

3 高级材质THREE.MeshLambertMaterial

4 THREE.MeshPhongMaterial（网格 Phong 材质）

网格

绘制轴

旋转是让在模型的网格旋转 模型才会旋转

加载 FontLoader 字体库

加载外部模型 OBJ类型 OBJLoader

加载外部模型 mtl类型 MTLLoader

加载外部模型 dae类型 ColladaLoader

光源

点光源

环境光源

聚光灯

平行光

Color颜色对象，有以下多种初始化方法。

Texture 纹理属性

另外要知道的小知识

window.requestAnimationFrame()

THREEJS状态显示类stats的应用

所有评论(0)

无恃而安

threejs是什么可以做什么

threejs文档教程官网案例

好了开始学习第一课

相机摄像机

3 几何体不太懂

4 基本几何形状球体

6 圆柱体（CylinderGeometry）圆台圆锥棱锥

看这这个解释在有详细解释各种材质解释共同属性等 https://www.hangge.com/blog/cache/detail_1815.html

1 当网格中加入 wireframe: true 会变成几何体边框普通材质

旋转是让在模型的网格旋转模型才会旋转