概述

Canvas -> JavaScript -> Three.js -> WebGL -> OpenGL ->.... -> 显卡

• OpenGL是底层的驱动级的图形接口（是显卡有直接关系的） 类似于 DirectX
• WebGL是浏览器API，允许JS去调用部分封装过的 OpenGL ES2.0标准接口，并为Canvas提供硬件级别的3D图形加速功能
• Three.js 是使用 JavaScript对 WebGL接口进行封装与简化而形成的一个易用的 3D库。
• Canvas区别于原本的 2dcontext，还可以作为WebGL的载体提供 webglcontext 。

Three.js基本组件关系

对比真实世界视觉形成

兼容性

WebGL本身可以通过引入WebGL.js进行检测

<script type="module">
  import { WEBGL } from '/js/three/WebGL.js';
  if(!WEBGL.isWebGLAvailable()){
    ...
  }
  if(WEBGL.isWebGL2Available()){
    ...
  }
</script>

除此之外还使用了以下特性或API，可能需要进行Polyfills

• Typed Arrays
• Web Audio API
• WebVR API
• Blob

基本步骤

1. 创建一个容纳三维空间的场景 — Sence
2. 将需要绘制的元素加入到场景中，对元素的形状、材料、阴影等进行设置
3. 给定一个观察场景的位置和角度 — Camera
4. 将相机和场景通过渲染器呈现到页面上 — Renderer

网格 ( Mesh ) 模型

场景 Scene

场景是各种绘制内容的容器

• 通过.add()可以向场景中添加内容，默认添加在(0,0,0)位置

var scene = new THREE.Scene();

• 通过.remove()可以删除场景中的内容，注意删除mesh时还要对其材料和纹理调用.dispose()

targetGold.geometry.dispose();
targetGold.material.dispose();
scene.remove(targetGold);

场景具有以下属性

雾化

场景中的物体离摄像机越远就会变得越模糊。
Fog( color : Integer, near : Float = 1, far : Float = 1000 )
分别为颜色、雾化开始时距离、全雾化处距离

scene.fog = new THREE.Fog(0xf7d9aa, 100, 950);

也可以随着距离呈指数增长的雾化效果，只需要设置雾的颜色和浓度即可。如：

scene.fog = new THREE.FogExp2(0xffffff,0.02);

坐标系

Three.js中使用的坐标系为右手坐标系。

scene.add(new THREE.AxisHelper(600));

相机

• 当窗口大小变化时保持物体尺寸不变
  视野高度计算公式:
  visible_height = 2 * Math.tan( ( Math.PI / 180 ) * camera.fov / 2 ) * distance_from_camera;
• 窗口大小变化时保持视野居中
  此时如果窗口高不变宽变短，则物体大小不变，依然居中
  此时如果窗口宽不变高变短，则物体变小

window.addEventListener('resize', handleWindowResize, false);
function handleWindowResize() {
  // update height and width of the renderer and the camera
  HEIGHT = window.innerHeight;
  WIDTH = window.innerWidth;
  renderer.setSize(WIDTH, HEIGHT);
  camera.aspect = WIDTH / HEIGHT;
  camera.updateProjectionMatrix();
}

正投影相机 OrthographicCamera( left, right, top, bottom, near, far )

只是简单的将三维空间法向投影到二维屏幕(相机)，远近高低比例都相同。

通常我们将浏览器窗口的宽度和高度作为视景体的高度和宽度，相机正好在窗口的中心点上:

new THREE.OrthographicCamera( window.innerWidth / - 2, window.innerWidth / 2, window.innerHeight  / 2, window.innerHeight / - 2, 1, 1000 );

透视投影相机 PerspectiveCamera( fov, aspect, near, far )

近大远小，符合视觉的投影

• fov 视角
  视角越小，物体看起来越大
• aspect 宽高比
  通常等同于canvas宽高比，否则会失真

var camera = new THREE.PerspectiveCamera(45,window.innerWidth / window.innerHeight, 0.1, 1000);

position、lookAt

• position属性指定了相机所处的位置(即设置了camera.position.x、camera.position.y、camera.position.z)。
• lookAt函数指定相机观察的方向(即设置了相机角度)，通常选择场景中心。
• up属性指定了相机以哪个方向为上方(即设置了camera.up.x、camera.up.y、camera.up.z)。

camera.position.set(30, 40, 50);
camera.up.set(0, 0, 1);
camera.lookAt(scene.position);//new THREE.Vector3(0, 0, 0)

如仅改变.position而不重新调用.lookAt()，则视角不变，等于相机在场景中平移。

updateProjectionMatrix

改变相机实例构造函数入参对应属性时，需要调用camera.updateProjectionMatrix()才会生效。

camera.aspect = WIDTH / HEIGHT;
camera.updateProjectionMatrix();
renderer.render(scene, camera);

相机缩放

通常使用以下属性

• .getFocalLength () : Float
  返回当前.fov（视野角度）相对于.filmGauge（胶片尺寸）的焦距。
• .setFocalLength ( focalLength : Float ) : null
  通过相对于当前.filmGauge的焦距，设置FOV。

  document.body.addEventListener('mousewheel', (e) => {
    e.preventDefault();
    var isDown = (e.wheelDelta < 0);
    var m = camera.getFocalLength();
    if (isDown) {
      if (m > _minFocalLength) m -= m * 0.05;
    } else {
      if (m < _maxFocalLength) m += m * 0.05;
    }
    camera.setFocalLength(m);

  }, { passive: false })

相机旋转

场景Scene、相机Camera、物体模型Object Model，均可以旋转

1. 欧拉角旋转
   最常用的旋转方式，直接指定围绕其自身的一条轴旋转(因此当相机自身lookAt不是正交坐标轴时，如果进行旋转，看到的内容也是倾斜的)

//旋转90°
camera.rotateY(Math.PI / 2);
camera.rotation.y = Math.PI / 2;

2. 矩阵(Matrix)
   mutiply():矩阵的乘法。
   transpose():矩阵转置。
   getInverse(m):求逆矩阵。
   makeRotationFromEuler(euler) :通过一个欧拉类型的值来设置矩阵的值。
   makeRotationFromQuaternion(q):通过一个四元数类型的值来设置矩阵。
   makeRotationonAxis(axis,theta):按一个轴旋转θ°，然后设置矩阵的值。

3. 四元数(Quaternion)

获取相机当前旋转向量的三个方法

var vector1 = new THREE.Vector3(0, 0, - 1);
vector1.applyQuaternion(camera.quaternion);
console.log(vector1);

var vector2 = new THREE.Vector3(0, 0, -1);
vector2.applyEuler(camera.rotation, camera.eulerOrder);
console.log(vector2);

var vector3 = new THREE.Vector3(0, 0, 0);
camera.getWorldDirection( vector3 );
console.log(vector3);

渲染器

渲染器需要与一个canvas元素绑定，可以在实例化时就指定一个现有的canvas元素。此时可以直接使用WebGL2。

var canvas = document.getElementById('canvas');
var context = canvas.getContext('webgl2', { alpha: false });
var renderer = new THREE.WebGLRenderer({ canvas: canvas, context: context });

如未指定则renderer.domElement将是一个虚拟dom元素

var renderer = new THREE.WebGLRenderer();
renderer.render(scene, camera);
document.getElementById("container").appendChild(renderer.domElement);

实例化参数

常用属性、方法