1.threejs库引入
import * as THREE from 'three'2.性能检测插件Stats
使用了帧数（fps）的概念，帧数越高，画面的感觉越好。
const stats = new Stats();//fps
container.appendChild( stats.dom );调用stats.update()函数来统计时间和帧数。
stats.update();//fps
3.图形界面工具lil-gui
lil-gui 是 three.js社区中非常流行的 UI 库，语法简单，上手快。
常用方法：
.add() 将控制器添加到GUI，使用typeof运算符推断控制器类型。
.addColor() 将颜色控制器添加到GUI。
.addFolder() 以层级的形式创建一个新的GUI。
4.相机控件OrbitControls
通过OrbitControls可以对三维场景进行缩放、平移、旋转。
引入方式：
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';旋转、缩放、平移的实现：
const controls = new OrbitControls( camera, renderer.domElement );controls.enablePan = false; // 禁止拖拽
controls.enableZoom = false; // 禁止缩放 默认true
controls.enableRotate = false; // 禁止旋转
controls.enableDamping = true; // 启用阻尼效果5.室内环境RoomEnvironment
用于创建逼真的室内环境的类。
RoomEnvironment 类可以通过 THREE.RoomEnvironment() 构造函数来创建实例。它接受一个参数 path，用于指定立方体贴图的路径。典型的用法是加载预先准备好的立方体贴图，然后将其作为参数传递给 RoomEnvironment。
一旦创建了 RoomEnvironment 实例，并使用合适的立方体贴图进行设置，你就可以将其应用到场景中的任何对象上，以实现逼真的全局光照效果。例如，你可以将它应用到物体的 material 中的 envMap 属性上，以便让物体反射和折射周围的环境。
需要注意的是，使用 RoomEnvironment 可能需要一些额外的计算和加载时间，因为它需要进行预计算和处理较大的立方体贴图。在使用过程中，请确保你的设备具备足够的性能来处理这些计算和加载任务。
6.GLTFLoader模型加载器
引入：
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';初始化、设置gltf文件路径、开始加载文件、添加到scene：
const loader = new GLTFLoader();
loader.setPath('./statics/models/gltf/');
loader.load('mount.gltf', function (gltf) {
gltf.scene.traverse(function (child) {
if (child.isMesh) {}
});
scene.add(gltf.scene);
})7.DRACOLoader
DRACOLoader 是 Three.js 中用于加载和解码 DRACO 压缩几何模型的辅助类。DRACO 是一种高效的压缩算法，可以显著减小几何模型文件的大小，并在运行时快速解码，以便在 Three.js 中进行渲染和交互。
引入：
import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader.js';创建一个 GLTFLoader 实例，并通过 setDRACOLoader 方法将刚才创建的 DRACOLoader 实例绑定到 GLTFLoader 上。最后，使用 loader.load 方法加载包含 DRACO 压缩模型的 glTF 文件，并在加载完成后进行处理。
const dracoLoader = new DRACOLoader();
dracoLoader.setDecoderPath('path/to/draco/decoder/'); // DRACO 解码器文件所在的路径
dracoLoader.setDecoderConfig({}); // 可选 - DRACO 解码器的配置
const loader = new THREE.GLTFLoader();
loader.setDRACOLoader(dracoLoader);
// 加载包含 DRACO 压缩模型的 glTF 文件
loader.load('path/to/model.glb', (gltf) => {
// glTF 模型加载完成后的处理
console.log(gltf);
}, (progress) => {
// 加载进度的处理
console.log('Loading progress:', progress);
}, (error) => {
// 错误处理
console.error('Error loading glTF model:', error);
});8.Clock
Clock 本质上就是对 Date 进行封装，提供了一些方法和属性。
常用方法：getDelta()
- 获得前后两次执行该方法的时间间隔
- 假设你执行一次
.getDelta ()方法，再执行一次.getDelta ()方法，第二次执行.getDelta ()方法时候，可以返回上次调用该方法到本次调用之间的时间间隔，返回间隔时间单位是秒
9.WebGLRenderer
WebGLRenderer 是 Three.js 中用于在 Web 上渲染 3D 场景的渲染器。它使用 WebGL 技术，将 3D 场景的几何体、材质和光照效果渲染到 HTML5 的 <canvas> 元素上。
要使用 WebGLRenderer，首先需要将其作为一个模块导入或加载 Three.js 库文件。然后，你可以创建 WebGLRenderer 的实例，并配置它以适应你的需求。
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// 创建场景、相机、几何体等
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
camera.position.z = 5;
// 渲染循环
function animate() {
requestAnimationFrame(animate);
// 控制几何体的动画或交互
renderer.render(scene, camera);
}
animate();
在上述示例中，首先创建一个 WebGLRenderer 实例，并使用 setSize 方法将其大小设置为浏览器窗口的尺寸。然后，将渲染器的 canvas 元素添加到 <body> 中，以便在网页上显示渲染结果。
接下来，创建了一个基本的场景 Scene、透视相机 PerspectiveCamera、立方体几何体 BoxGeometry 和基本的材质 MeshBasicMaterial。将几何体和材质结合起来，创建一个三维对象 Mesh，并将其添加到场景中。
在渲染循环中，使用 requestAnimationFrame 方法创建一个动画循环，并在每一帧中更新几何体的动画或交互，然后调用 renderer.render 方法将场景和相机作为参数渲染到页面上。
renderer.setPixelRatio( window.devicePixelRatio ); setPixelRatio 方法允许我们设置渲染器的像素比例，以控制渲染画面的分辨率。它接受一个数字作为参数，表示期望的像素比例。例如，如果传入 2，则表示渲染器将以设备实际像素的两倍分辨率进行渲染。
10.AnimationMixer动画混合器
动画混合器是用于场景中特定对象的动画的播放器。当场景中的多个对象独立动画时，每个对象都可以使用同一个动画混合器。
.clipAction(AnimationClip) 返回所传入的剪辑参数的AnimationAction对象。AnimationAction用来调度存储在AnimationClip中的动画。
11.PMREMGenerator
PMREMGenerator 是 three.js 中的一个类，用于预计算和生成基于物理的全局辐射度预过滤贴图（Packed Mipmapped Radiance Environment Map）。