Threejs初教程

最新推荐文章于 2024-07-08 09:56:34 发布
最新推荐文章于 2024-07-08 09:56:34 发布
阅读量4.1k 收藏 24
点赞数 26
分类专栏： threejs html 文章标签： three.js webgl
Lcc
本文链接：https://blog.csdn.net/weixin_50601484/article/details/118928285
版权

Threejs初教程学习记录

threejs是什么 可以做什么

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

threejs文档教程 官网 案例

能提供的就这么多了，我相信html能实现的vue也能全面实现

  1. threejs中文文档
  2. threejs国外官网
  3. 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();
无恃而安
关注
  • 26
    点赞
  • 踩
  • 24
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
three.js教程
11-23
three.js的官方入门教程，全套教程及很多实例，对学习three.js有很大帮助
ThreeJS视频教程
06-16
对整threeJS体系进行全面剖析。整理出全面的教学大纲，涵盖内容面非常广。 此教学版本为threeJS107版本。 关于版本不建议大家使用低于90的版本学习。 以下是课程目录 1-ThreeJS概览（基本图形简介，什么是点线面如何...
ThreeJS入门教程
Within的博客
08-11 513
可以通过源码下载部署到自己本地运行查看文档和例子。index.html引入main.js。
three.js入门学习
最新发布
m0_73847536的博客
07-08 667
vscode,webpack/vite/其他,Live Server项目开发环境引入：尽量加上版本号。
ThreeJs教程
weixin_45407811的博客
08-25 2340
three.js
Three.js 教程
qq_46610638的博客
03-21 2957
了解Three.js Threejs是一款WebGL三维引擎，在所有WebGL引擎中，Three.js是国内文资料最多、使用最广泛的三维引擎。 如何学习Three.js 当你开始思考你应该如何学习WebGL和Three.js的时候，相信你至少对相关的关键词了解过了，希望通过WebGL或Three.js实现你想要的Web3D功能。 也许你也会去思考通过WebGL或Three.js能不能实现你想要的功能，也许你是因为领导临时分配任务，还不太清楚WebGL和Three.js是什么，个人建议是不要做过多思考，先看看
three.js入门教程--零基础也能学会
baekpcyyy的博客
11-28 2368
three.js入门教程--零基础也能学会
Threejs实践教程
05-31
【Three.js实践教程】 Three.js 是一款基于 WebGL 的 JavaScript 库，用于在浏览器中创建交互式的3D场景。本教程面向初学者，旨在提供实践性的学习资料，帮助开发者快速掌握Three.js的基础和进阶技巧。 1. **...
threejs 火焰效果
04-13
threejs 火焰效果 threejs 烟雾效果
Threejs天空盒示例
04-22
Three.js 是一个基于 WebGL 的 JavaScript 库，用于在 Web 浏览器中创建三维图形和交互式场景。天空盒（Skybox）是 Three.js 中一个常见的技术，它为场景提供了一个无限远的背景，通常用来模拟环境的天空或周围环境...
threejs 切换场景
07-29
threejs切换场景 实现图朴上的切换效果， 而不是相机的视角移动，不浪费性能，非常棒的效果，代码简单，实现思路简单，适合新手开发项目中，遇到当前视角切换到模型内部 等效果 ， threejs scene的切换 ， 视角的...
Three.js入门指南-中文基础教程
12-25
适合初学者 three.js webgl three.js入门 three.js教程 webgl开发
three.js学习教程
11-21
three.js的入门初级教程 帮助零基础学习three.js 适合新人
Three.js初级教程，JavaScript 3D页面
09-28
什么是threejs，很简单，你将它理解成three + js就可以了。three表示3D的意思，js表示javascript的意思。那么合起来，three.js就是使用javascript 来写3D程序的意思。
JS库之Three.js 简易入门教程(详解之一)
12-12
开场白 webGL可以让我们在canvas上实现3D效果。而three.js是一款webGL框架，由于其易用性被广泛应用。如果你要学习webGL，抛弃那些复杂的原生接口从这款框架入手是一个不错的选择。 博主目前也在学习three.js，发现相关资料非常稀少，甚至官方的api文档也非常粗糙，很多效果需要自己慢慢敲代码摸索。所以我写这个教程的目的一是自己总结，二是与大家分享。 本篇是系列教程的第一篇：入门篇。在这篇文章中，我将以一个简单的demo为例，阐述three.js的基本配置方法。学完这篇文章，你将学会如何在浏览器中绘制一个立体图形！ 准备工作 在写代码之前，你首先要去下最新的three.j
『Three.js』入门教程
热门推荐
ReturnTmp的博客
10-28 2万+
目的：方便模块化进行three.js项目的学习和开发Building a web app with Parcel | Parcel 中文网。
Three.JS第 1 篇，Three.js新手教学，如何使用Three.js（three.js使用流程，three.js使用详细，three.js的使用方式，three.js创建3d物体）
weixin_65793170的博客
03-27 3832
Three.js封装了WebGL的底层细节，是一款运行在浏览器中的 3D 引擎，可以用它创建各种三维场景，包括了摄影机、光影、材质等各种对象，目前在Git上已经拥有90k+的star。
【Three.js】Three.js快速上手教程
余浩的博客
12-19 6635
`three.js`是`JavaScript`编写的`WebGL`第三方库。提供了非常多的3D显示功能，是一个常见的`web 3D`库。
threejs editor教程
06-28
### 回答1： three.js Editor 是一个基于 three.js 的在线编辑器，可以帮助开发者创建和编辑 3D 场景。它提供了一个直观的用户界面，允许开发者通过简单拖放和调整来添加模型、灯光、材质等，并在实时渲染中观察场景。 three.js Editor 的教程有助于初学者从基础开始学习如何使用该编辑器。下面是一些常见的教程内容： 1. 场景创建与配置：教程会介绍如何创建一个空白的场景，设置场景的背景颜色、光照、相机等。 2. 模型导入与编辑：教程会教你如何导入外部模型文件，并对导入的模型进行缩放、旋转、平移和删除等操作。 3. 材质与纹理编辑：教程会讲解如何为模型添加材质，并对材质进行编辑，包括颜色、贴图、透明度等属性的调整。 4. 动画与动态效果：教程会演示如何创建简单的动画效果，如模型的旋转、平移、缩放以及透明度的变化等。 5. 导出与部署：教程会指导如何将编辑好的场景导出为可执行的 HTML 文件，并将其嵌入到网页中展示，以及如何将其部署到网络服务器上。 除了上述内容，还会涉及一些高级的功能和技巧，如自定义着色器、创建物理效果、使用建模工具等。教程通常包括文字说明、示例代码和实际演示，帮助开发者更好地理解和掌握 three.js Editor 的使用技巧。 总之，通过 three.js Editor 的教程，开发者可以学习如何使用该编辑器创建交互性和视觉效果丰富的 3D 场景，并应用到自己的项目中。该教程既适合初学者入门学习，也适合有一定基础的开发者进阶学习。 ### 回答2： three.js Editor是一个基于Web的3D建模和动画工具，它可以帮助用户快速、轻松地创建和编辑3D场景。以下是关于three.js Editor的简要教程。 首先，进入three.js Editor的官方网站，下载并引入three.js库和Editor的插件文件。然后，创建一个DIV容器，用于显示3D场景。 在代码中，初始化一个场景对象、一个渲染器和一个相机，并将它们添加到DOM容器中。接下来，设置相机的位置和目标，以及渲染器的大小和背景色。 在场景中添加各种几何体、材质和灯光，可以使用Editor提供的工具栏或键盘快捷键进行操作。选中一个对象后，可以对它进行平移、旋转和缩放等变换操作，也可以改变其材质和光照属性。 通过场景对象的traverse方法，可以遍历场景中的所有对象，并对它们进行一系列操作。例如，可以通过编程方式创建和移除对象，或者检查对象之间的碰撞关系。 此外，Editor还提供了一个时间轴，用于创建和编辑动画。可以通过向时间轴添加关键帧来定义对象的动画路径和属性变化。可以使用插值算法对关键帧之间的属性进行平滑过渡，从而使动画更加流畅。 最后，通过监听鼠标、键盘等输入事件，可以实现用户交互。例如，通过鼠标左键拖拽场景中的对象，可以改变其位置。通过方向键控制相机的移动，可以浏览整个场景。 总结来说，three.js Editor是一个功能强大的3D建模和动画工具，通过它可以在Web上创建精美的3D场景。希望以上简要教程能够帮助您入门和使用three.js Editor。如果想要进一步学习和探索，建议参考官方文档和示例代码。 ### 回答3： three.js editor是一个基于three.js库的可视化编辑器工具，用于创建和编辑三维场景。它提供了一个直观易用的界面，可以帮助用户轻松地导入和管理模型、纹理等资源，以及创建、调整和组织场景中的物体和光源。 使用three.js editor的第一步是了解其基本概念和功能。官方文档中有详细的说明和示例，可以从中学习如何使用编辑器。另外，也可以在社区论坛或开发者的博客中找到一些优秀的教程和案例，这些内容可以帮助您更深入地了解编辑器的用法和技巧。 在使用编辑器的过程中，您需要掌握一些基本的三维图形概念，比如坐标系、材质、光照等。这些知识可以在学习three.js库的基础知识时了解到。同时，编辑器还提供了一些工具和选项，以便更好地处理场景中的对象和材质属性，比如实时渲染器、材质编辑器等。 为了更好地理解和使用编辑器，构建自己的项目是非常重要的。您可以从简单的场景开始，尝试不同的对象和材质配置，通过实践来熟悉编辑器的各种功能。随着经验的积累，您还可以尝试更复杂的场景，添加交互功能或特效等，以展示更丰富的三维体验。 总之，通过学习three.js editor的基本概念和功能，以及通过实践构建自己的项目，您将逐渐掌握使用该编辑器的技巧和技能。同时，多参与社区讨论和学习，与其他开发者分享经验和资源，也是提升自己的宝贵途径。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值