Three.js 入门基础

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

PlaneGeometry

webgl_lines_fat_wireframe

基本要素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

);

webgl_materials_lightmap

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

  }

);

webgl_loader_gltf

Tip: 参考网站

threejs官方网站：https://threejs.org/

threejs非官方中文网：http://www.yanhuangxueyuan.com/Three.js/

obj模型文件免费下载网站：https://www.aigei.com/s?type=3d&term=obj