cover

简介

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

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

AR.js的核心部分

要学习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。

1
2
3
4
5
6
7
// 遍历子 Mesh 开启阴影
object.traverse(function(child) {
  if (child instanceof THREE.Mesh) {
     child.castShadow = true
     child.receiveShadow = true
   }
})