Threejs在vue中使用(场景、相机、渲染器、gltf模型添加、环境贴图等）

前言

Three.js ( Javascript 3D library ) 是基于原生WebGL封装运行的三维引擎，WebGL可以看成是浏览器给我们提供的接口，在JavaScript中可以直接用这些API进行3D图形的绘制；而Three.js它封装了诸如场景、灯光、阴影、材质、贴图、空间运算等一系列功能，让你不必要再从底层WebGL开始写起。 Three.js是通过对WebGL接口的封装与简化而形成的一个易用的图形库。
Three.js开发3D应用，通常包括渲染器（Renderer）、场景（Scene）、照相机（Camera），以及在场景中创建的物体，光照等。

一、threejs的安装

1、NPM的安装

   npm install --save three

2、组件内使用

import * as THREE from "three";

二、场景

1、场景（scene）介绍

它相当于一个容器，在3d场景中要展现的所有物体、灯光、摄像机等都必须添加到这个容器里面。

2、创建场景对象Scene

Var scene = new THREE.Scene();

3、设置场景的背景色

scene.background = new THREE.Color("#F7F7F7");

三、相机

在threejs中提供了一系列的相机，其中最常用到的是 PerspectiveCamera（透视相机） 和 OrthographicCamera（正交投影相机），它们之间的区别在于透视相机在观察场景中的物体时，呈现出来的物体近大远小，最接近自然的视图。正交投影相机无论从哪个角度观察物体，大小都是一样的。

1、PerspectiveCamera创建， 确定视野范围

let camera = new THREE.PerspectiveCamera(fov, aspect, near, far);

参数说明：
fov: 视场；垂直方向的观察角度，也就是眼睛上下俯视的观察角度。
aspect: （长宽比）是照相机水平方向和竖直方向长度的比值。
near: （近面距离）相机到视景体最近的距离。
far: （远面距离）相机到视景体最远的距离。

2、确定相机的位置

this.camera.position.set(0, 10, 20);

3、操作相机

在很多场景下，我们需要移动相机来观察物体的各个角度，这时需要相机操作控件来控制相机的位置。常用的控制器有：OrbitControls(轨道控制器)、TrackballControls(轨迹球控制器)

OrbitControls：可以使用鼠标控制场景中的对象围绕场景中心旋转和平移
TrackballControls：可以使用鼠标（或控制球）来轻松移动、平移和缩放场景
Pointerlockcontrols：第一人称控制器，以第一人称视角观察室内场景

1）添加控制器

controls = new OrbitControls(camera, canvas);

2）设置控制器聚焦点

 controls.target.set(0, 5, 0);

四、光照

在场景中，如果没有光源，那所有的物体都将看不见。最常用的几种光源是AmbientLight、PointLight、SpotLight、DirectionalLight。
AmbientLight：环境光；全局均匀地照亮场景中的所有对象。
PointLight：点光源；从空间中的一点向所有方向发射光线。
SpotLight：聚光源；投射出的是类似圆锥形的光线。
DirectionalLight：平行光；比如太阳光。
例：

 {
   
    const color = 0xf1f1f1;  //光的颜色
    const intensity = 1;