(一) 记录H5做AR的过程,Three.js 介绍

简介

最近突然想做基于H5的AR应用,记录下学习过程

开始AR项目之前，首先从选择3D框架开始，老牌引擎 Three.js 和微软的 Babylon.js 都不错，因为我们需要用到 AR.js，而AR.js的核心就包含Three.js。

AR.js的核心部分

artoolkit5 https://github.com/artoolkit/artoolkit5
three.js https://threejs.org

要学习AR.js,对于Three.js需要有一定的掌握,所以今天我们来了解一下Three.js

Three.js 基础概念

使用 Three.js 前，首先要理解以下几个核心概念：

Sence 场景

在 Three.js 中首先需要创建一个三维空间，我们称之为场景。场景可以想象成是一个容器，里面存放着所有渲染的物体和使用的光源。

Axes 坐标轴

Three.js 采用的是右手坐标系，拇指、食指、中指分别表示 X、Y、Z 轴的方向。

Camera 摄像机

摄像机就相当于我们的双眼，决定了能够在场景中的所见所得。
Three.js 中提供以下几种摄像机类型，最为常用的是透视摄像机，其他了解下即可。

ArrayCamera 阵列摄像机

一个 ArrayCamera 会包含多个子摄像机，通过这一组子摄像机渲染出实际效果，适用于 VR 场景。

CubeCamera 立方摄像机

创建六个 PerspectiveCamera（透视摄像机），适用于镜面场景。

StereoCamera 立体相机

双透视摄像机适用于 3D 影片、视差效果。

OrthographicCamera 正交摄像机

OrthographicCamera（正交摄像机）定义了一个矩形可视区域，物体只有在这个区域内才是可见的，另外物体无论距离摄像机是远或事近，物体都会被渲染成一个大小，所以这种摄像机类型适用于 2.5D 场景（例如斜 45 度游戏）

PerspectiveCamera 透视摄像机

最为常用的摄像机类型，模拟人眼的视觉，根据物体距离摄像机的距离，近大远小。默认情况下，摄像机的初始位置 X、Y、Z 都为 0，摄像机方向是从正 Z 轴向负 Z 轴看去。通过 Near和 Far 定义最近和最远的可视距离，Fov 定义可视的角度。

Mesh 网格

有了场景和摄像头就可以看到 3D 场景中的物体，场景中的我们最为常用的物体称为网格。

网格由两部分组成：几何体和材质

Geometry 几何体

记录了渲染一个 3D 物体所需要的基本数据：Face 面、Vertex 顶点等信息。

例如下面这个网格是由三角形组成，组成三角形的点称为顶点，组成的三角形称为面。

Material 材质

材质就像是物体的皮肤，决定了几何体的外表。
外表的定义可以让一个物体看起来是否有镜面金属感、暗淡、纯色、或是透明与否等效果。

Light 光源

光源相当于在密闭空间里的一盏灯，对于场景是必不可少的

在 Three.js 常用的有这几种光源：

AmbientLight 环境光源

属于基础光源，为场景中的所有物体提供一个基础亮度。

DirectionalLight 平行光源

效果类似太阳光，发出的光源都是平行的。

HemisphereLight 半球光

只有圆球的半边会发出光源。

PointLight 点光源

一个点向四周发出光源，一般用于灯泡。

SpotLight 聚光灯光源

一个圆锥体的灯光。

Shadow 阴影

另外要注意并不是每一种光源都能产生阴影，目前只有三种光源可以：

DirectionalLight 平行光源
PointLight 点光源
SpotLight 聚光灯光源

另外如果要开启模型的阴影的话，模型是由多个 Mesh 组成的，只开启父的 Mesh 的阴影是不行的，还需要遍历父 Mesh 下所有的子 Mesh 为其开启投射阴影 castShadow 和接收投射阴影 receiveShadow。

// 遍历子 Mesh 开启阴影
object.traverse(function(child) {if (child instanceof THREE.Mesh) {child.castShadow = truechild.receiveShadow = true}
})

欢迎来我的博客查看更多 https://blog.xollipop.top/