Three.js (一) 场景、相机、渲染器

概述

• WebGL把 JavaScript和 OpenGL ES 2.0结合在一起，从而为前端开发者提供了使用 JavaScript编写 3D效果的能力，并为 HTML5Canvas提供硬件 3D加速渲染。
• Canvas区别于原本的 2dcontext，还可以作为WebGL的载体提供 webglcontext 。
• Three.js 是使用 JavaScript对 WebGL接口进行封装与简化而形成的一个易用的 3D库。

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

场景具有以下属性

key	作用	默认值
fog:Fog	定义了影响场景中的每个物体的雾的类型	null
overrideMaterial:Material	强制场景中的每个物体使用这里的材质来渲染	null
autoUpdate:boolean	自动检查每一帧是否需要更新场景及物体矩阵	true
background:Color/Texture	场景背景，且背景总是首先被渲染	null

雾化

场景中的物体离摄像机越远就会变得越模糊。
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);

实例化参数

key	作用	默认值
canvas	绑定渲染器的canvas	null
context	将渲染器附加到已有的渲染环境中	null
antialias	抗锯齿	false
alpha	canvas是否支持透明度 (不透明时canvas内无法有透明物体，且canvas下的html也总是被覆盖)	false

常用属性、方法

key	作用	默认值
autoClear	每次render是否自动清除上一次内容，若为false则每次渲染会叠加	true
domElement	一个canvas，渲染器在其上绘制输出。渲染器的构造函数会自动创建(如果没有传入canvas参数)	null
shadowMap	关于阴影的一些属性配置	-
.clear( color : Boolean = true, depth : Boolean = true, stencil : Boolean = true)	清除缓存	-
.dispose()	清理渲染器	-
.render()	进行渲染	-
.setClearColor(color:Color, alpha:Float)	设置默认颜色和透明度	-
.setSize( width : Integer, height : Integer, updateStyle : Boolean )	调整大小，通常使用入参window.innerWidth,window.innerHeight	-
.setPixelRatio(value : number)	设置设备像素比。通常用于避免HiDPI设备上绘图模糊，通常入参直接使用window.devicePixelRatio	-

转载：https://www.jianshu.com/p/07dd7be8acd8