Three.js
1.Three.js 介绍
OpenGL（英语：Open Graphics Library，译名：开放图形库或者“开放式图形库”）是用于渲染2D、3D矢量图形的跨语言、跨平台的应用程序编程接口（API）。这个接口由近350个不同的函数调用组成，用来从简单的图形比特绘制复杂的三维景象。而另一种程序接口系统是仅用于Microsoft Windows上的Direct3D。OpenGL常用于CAD、虚拟实境、科学可视化程序和电子游戏开发。
WebGL（全写Web Graphics Library）是一种3D绘图协议，这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起，通过增加OpenGL ES 2.0的一个JavaScript绑定，WebGL可以为HTML5 Canvas提供硬件3D加速渲染，这样Web开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了，还能创建复杂的导航和数据视觉化。显然，WebGL技术标准免去了开发网页专用渲染插件的麻烦，可被用于创建具有复杂3D结构的网站页面，甚至可以用来设计3D网页游戏等等。
Three.js(Javascript 3D library)，使用JavaScript语言对WebGL进行了封装，让前端开发人员在不需要掌握很多数学知识和绘图知识的情况下，也能够轻松进行web 3D开发，降低了门槛，同时大大提升了效率。总结来一句话：就是你不懂计算机图形学，只要理解了three.js的一些基本概念就可以开始入门网页端的3D开发。
2.Three.js 从入门到放弃
简单的一个threejs示例，可以理解为一个空间或者环境，就像一个房间一样，建造一个房间之后，可以在房间里放置任何可以放置的东西，也就是threejs中的物体。房间里如果光线很暗需要有灯，就是threejs中的光源，需要有一个观察对象可以看到这些东西，也就是threejs中的相机，也可以简单理解为我们的眼镜，来捕捉映射这个房间内的物体和光线等。渲染器可以理解为我们大脑中对各种颜色和物体的认识，比如红色的方块，如果单纯来说方块只是一个物体，但是经过渲染器，有了颜色和形状。
基本要素1：场景
场景能够让你在什么地方、摆放什么东西来交给three.js来渲染，这是你放置物体、灯光和摄像机的地方。
const scene = new THREE.Scene(); //创建一个场景
基本要素2：相机
相机就类似我们的人眼，可以观察到环境中的物体，以及光线效果等。
Threejs中相机主要分为两种：正交相机(OrthographicCamera)和透视相机(PerspectiveCamera)，正交相机是正交投影所反映的效果，透视相机是透视投影所反映的效果。从效果而言，就是正交相机看到的东西不会因为距离而改变，只会因为相机的角度改变物体显示效果。而透视相机类似人眼，近大远小，距离和角度都会影响物体的显示效果
正交相机OrthographicCamera
在这种投影模式下，无论物体距离相机距离远或者近，在最终渲染的图片中物体的大小都保持不变。这对于渲染2D场景或者UI元素是非常有用的。
//OrthographicCamera( left : Number, right : Number, top : Number, bottom : Number, near : Number, far : Number )
//left — 摄像机视锥体左侧面。
//right — 摄像机视锥体右侧面。
//top — 摄像机视锥体上侧面。
//bottom — 摄像机视锥体下侧面。
//near — 摄像机视锥体近端面。
//far — 摄像机视锥体远端面。
const camera = new THREE.OrthographicCamera( width / - 2, width / 2, height / 2, height / - 2, 1, 1000 );
scene.add( camera );
透视相机(PerspectiveCamera)
这一投影模式被用来模拟人眼所看到的景象，它是3D场景的渲染中使用得最普遍的投影模式。
透视投影：从某个投射中心将物体投射到单一投影面上所得到的图形
//PerspectiveCamera( fov : Number, aspect : Number, near : Number, far : Number )
//fov — 摄像机视锥体垂直视野角度
//aspect — 摄像机视锥体长宽比
//near — 摄像机视锥体近端面
//far — 摄像机视锥体远端面
const camera = new THREE.PerspectiveCamera( 45, width / height, 1, 1000 );
scene.add( camera );
基本要素3：灯光
threejs的场景中默认都是没有光的，就像一个没有窗户的空间，需要增加光源才能看到物体。
种类介绍备注
AmbientLight环境光：环境光会均匀的照亮场景中的所有物体。环境光不能用来投射阴影，因为它没有方向。
AmbientLightProbe环境光探针：光照探针是一种在3D场景中添加光源的另一种方法。 AmbientLightProbe 是场景中单个环境光的光照估算数据
DirectionalLight平行光：平行光是沿着特定方向发射的光。这种光的表现像是无限远,从它发出的光线都是平行的。常常用平行光来模拟太阳光 的效果; 太阳足够远，因此我们可以认为太阳的位置是无限远，所以我们认为从太阳发出的光线也都是平行的平行光可以投射阴影
HemisphereLight半球光：光源直接放置于场景之上，光照颜色从天空光线颜色渐变到地面光线颜色。贝塔模型中使用
HemisphereLightProbe半球光探针：光照探针是一种在3D场景中添加光源的另一种方法。 HemisphereLightProbe 是场景中单个半球光的光照估算数据。
LightProbe光照探针：光照探针是一种在3D场景中添加光源的另一种方法。与经典光源（平行光、点光、聚光）不同， 光照探针不发光。相反，光照探针存储着有关穿过3D空间的光线的信息。 渲染过程中，通过使用来自光照探针的数据，来逼近打到3D物体上的光线光照探测是一种快速计算实时渲染应用中的光照技术，通常会用于处理游戏世界的人物角色或是动态物体的光照，为在场景中的移动物体上提供高质量的照明（包括间接反射光（indirect bounced light）（GI）（实例场景中白色方块上的黄色和蓝色光）），它的优点在于运行时有不错的处理性能而且预计算也相当快速。
PointLight点光源：从一个点向各个方向发射的光源。一个常见的例子是模拟一个灯泡发出的光。
RectAreaLight平面光光源：平面光光源从一个矩形平面上均匀地发射光线。这种光源可以用来模拟像明亮的窗户或者条状灯光光源。
SpotLight聚光灯：光线从一个点沿一个方向射出，随着光线照射的变远，光线圆锥体的尺寸也逐渐增大。该光源可以投射阴影
//以贝塔模型中用到的光源为类
//创建环境光
//环境中默认都是添加的，就像自然界的太阳光，月光，如果只给场景添加特定光源，那么特定光照不到的模型位置有可能就是黑色的，不会渲染的。
const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
this.scene.add(ambientLight);
//创建半球光
const light = new THREE.HemisphereLightProbe(0xffffff, 0x080820, 0.5); //添加半球光
this.scene.add(light);
基本要素4：网格
这里所说的网格也就是threejs场景中的物体，可以是2D效果的面板，也可以是3D效果的立方体，或者外部导入的符合规范的模型，这里所有的物体显示效果都是通过网格也就是一个个三角形来拼接，最后平滑过渡为面。mesh可以设置material材质，来实现不同的效果。
在计算机的世界里，一条弧线是由有限个点构成的有限条线段连接得到的。当线段数量越多，长度就越短，当达到你无法察觉这是线段时，一条平滑的弧线就出现了。计算机的三维模型也是类似的。只不过线段变成了平面，普遍用三角形组成的网格来描述。我们把这种模型称之为 Mesh 模型。
var geometry = new THREE.PlaneGeometry(700, 700, 1);
this.texture = this.textureLoader.load(item.printUrl);
var material = new THREE.MeshBasicMaterial({
map: this.texture,
side: THREE.FrontSide,
});
let frontPlane = new THREE.Mesh(geometry, material);
this.scene.add(frontPlane);
基本要素5：渲染器
WebGL Render 用WebGL渲染出你精心制作的场景。
let renderer = new THREE.WebGLRenderer({
antialias: true,// true/false表示是否开启反锯齿
alpha: true,// true/false 表示是否可以设置背景色透明
precision: 'highp',// highp/mediump/lowp 表示着色精度选择
preserveDrawingBuffer: true, //true/false 是否保留缓直到手动清除或被覆盖。 默认false. 决定画布是否能导出快照
premultipliedAlpha: false,// true/false 表示是否可以设置像素深度（用来度量图像的分率）preserveDrawingBuffer: true,// true/false 表示是否保存绘图缓冲
)}
3.外部模型的导入：加载器loader
TextureLoader 纹理加载器（加载texture的一个类。 内部使用ImageLoader来加载文件）
const texture = new THREE.TextureLoader().load( 'textures/land_ocean_ice_cloud_2048.jpg' );
// 立即使用纹理进行材质创建
const material = new THREE.MeshBasicMaterial( { map: texture } );
OBJLoader （贝塔模型）
用于加载.obj资源的加载器。
OBJ 文件格式是一种简单的数据格式， 这种格式以人类可读的形式来表示3D几何体，即每个顶点的位置、每个纹理坐标顶点的UV位置、顶点法线、 将使每个多边形定义为顶点列表的面以及纹理顶点。
// model 创建obj模型加载器
const loader = new OBJLoader(manager);
//加载obj模型文件
loader.load( 'a.obj', function (obj) {
object = obj;
that.currObj = object;
object.scale.set(0.8, 0.8, 0.8);
});
//使用纹理加载器加载法向贴图 实现模型细腻纹理(如凹凸效果 褶皱效果等) 普通纹理即map只是大范围贴图，实现材质铺满。
that.normalMapTexture = that.textureLoader.load(
that.fullPrintingVo.sil3dMappingNormal
);
//创建材质加载器
var material = new THREE.MeshPhongMaterial({
map: that.texture,
normalMap: that.normalMapTexture,
});
//设置材质的映射面 可分为 前THREE.Frontside、后THREE.Frontside、前+后THREE.Doubleside 在此处则为样衣模型的内外
material.side = THREE.DoubleSide;
//渲染纹理
object.children.forEach((mesh) => {
mesh.material = material;
});
},
that.onProgress,
that.onError
);
GLTFLoader (指纹模型)
用于载入glTF 2.0资源的加载器
glTF（gl传输格式）是一种开放格式的规范 （open format specification）， 用于更高效地传输、加载3D内容。该类文件以JSON（.glft）格式或二进制（.glb）格式提供， 外部文件存储贴图（.jpg、.png）和额外的二进制数据（.bin）。一个glTF组件可传输一个或多个场景， 包括网格、材质、贴图、蒙皮、骨架、变形目标、动画、灯光以及摄像机。
const loader = new GLTFLoader();
loader.load('a.gltf',
function (gltf) {
object = gltf;
that.map = that.textureLoader.load("/3D1.jpeg");
gltf.scene.traverse(function (child) {
if (child.isMesh) {
child.material.map = that.map;
}
});
that.scene.add(object.scene);
}
);
Tip: 参考网站
threejs官方网站：https://threejs.org/
threejs非官方中文网：http://www.yanhuangxueyuan.com/Three.js/
obj模型文件免费下载网站：https://www.aigei.com/s?type=3d&term=obj
网友评论