8.2常用第三方库与工具

文档摘要

8.2常用第三方库与工具 Three.js 扩展与生态领域：8.2 常用第三方库与工具 8.2.1 加载器 (Loaders) Three.js 自身提供了一些加载器，但对于更复杂或特定的文件格式，通常需要借助第三方加载器。 1. GLTFLoader (glTF) glTF (GL Transmission Format) 是一种用于传输和加载 3D 模型的开放标准格式，它具有体积小、加载快、易于解析等优点。是 Three.js 官方推荐的 glTF 加载器。代码详解: : 导入 GLTFLoader 类。注意要从导入，而不是直接从导入。 : 创建一个 GLTFLoader 实例。 : 使用方法加载 glTF 模型。该方法接受四个参数：模型 URL。加载成功后的回调函数。

8.2常用第三方库与工具

8. Three.js 扩展与生态领域：8.2 常用第三方库与工具

8.2.1 加载器 (Loaders)

Three.js 自身提供了一些加载器，但对于更复杂或特定的文件格式，通常需要借助第三方加载器。

1. GLTFLoader (glTF)

glTF (GL Transmission Format) 是一种用于传输和加载 3D 模型的开放标准格式，它具有体积小、加载快、易于解析等优点。GLTFLoader 是 Three.js 官方推荐的 glTF 加载器。


import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
const loader = new GLTFLoader();
loader.load( 'models/scene.gltf', function ( gltf ) {
    scene.add( gltf.scene );
    gltf.animations; // Array<THREE.AnimationClip>
    gltf.scene;      // THREE.Group
    gltf.scenes;     // Array<THREE.Group>
    gltf.cameras;    // Array<THREE.Camera>
    gltf.asset;      // Object
}, undefined, function ( error ) {
    console.error( error );
} );

代码详解:

import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';: 导入 GLTFLoader 类。注意要从three/examples/jsm/loaders/GLTFLoader.js 导入，而不是直接从 three 导入。
const loader = new GLTFLoader();: 创建一个 GLTFLoader 实例。
loader.load( 'models/scene.gltf', ... );: 使用 load() 方法加载 glTF 模型。该方法接受四个参数：
- 模型 URL。
- 加载成功后的回调函数。该回调函数接收一个 gltf 对象，其中包含模型的场景、动画、相机等信息。
- 加载过程中的回调函数 (可选)。
- 加载失败后的回调函数 (可选)。
scene.add( gltf.scene );: 将加载的场景添加到 Three.js 的场景中。
gltf.animations;, gltf.scene;, gltf.scenes;, gltf.cameras;, gltf.asset;: 访问 glTF 对象中的各种属性，例如动画、场景、相机和资产信息。

2. DRACOLoader (glTF 压缩)

DRACOLoader 用于加载经过 Draco 压缩的 glTF 模型。 Draco 是一种由 Google 开发的开源压缩算法，专门用于压缩 3D 图形数据，可以显著减小模型的文件大小，从而提高加载速度。


import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader.js';
// Instantiate a loader
const loader = new GLTFLoader();
// Optional: Provide a DRACOLoader instance to decode compressed data
const dracoLoader = new DRACOLoader();
dracoLoader.setDecoderPath( '/examples/jsm/libs/draco/' ); // 确保路径正确
loader.setDRACOLoader( dracoLoader );
// Load a glTF resource
loader.load(
	// resource URL
	'models/gltf/scene-compressed.glb',
	// called when the resource is loaded
	function ( gltf ) {
		scene.add( gltf.scene );
		gltf.animations; // Array<THREE.AnimationClip>
		gltf.scene;      // THREE.Group
		gltf.scenes;     // Array<THREE.Group>
		gltf.cameras;    // Array<THREE.Camera>
		gltf.asset;      // Object
	},
	// called while loading is progressing
	function ( xhr ) {
		console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );
	},
	// called when loading has errors
	function ( error ) {
		console.log( 'An error happened' );
	}
);

代码详解:

import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader.js';: 导入 DRACOLoader 类。
const dracoLoader = new DRACOLoader();: 创建一个 DRACOLoader 实例。
dracoLoader.setDecoderPath( '/examples/jsm/libs/draco/' );: 设置 Draco 解码器的路径。 这是非常重要的一步，必须确保路径正确，否则 DRACOLoader 无法正常工作。 解码器文件通常位于 three/examples/jsm/libs/draco/ 目录下。
loader.setDRACOLoader( dracoLoader );: 将 DRACOLoader 实例设置给 GLTFLoader，以便 GLTFLoader 可以使用 DRACOLoader 解码压缩的 glTF 模型。

3. OBJLoader (OBJ)

OBJLoader 用于加载 OBJ 文件格式的模型。OBJ 是一种较老的 3D 模型格式，通常与 MTL 文件一起使用，MTL 文件包含材质信息。


import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader.js';
const loader = new OBJLoader();
loader.load(
	'models/model.obj',
	function ( object ) {
		scene.add( object );
	},
	function ( xhr ) {
		console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );
	},
	function ( error ) {
		console.log( 'An error happened' );
	}
);

代码详解:

import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader.js';: 导入 OBJLoader 类。
const loader = new OBJLoader();: 创建一个 OBJLoader 实例。
loader.load( 'models/model.obj', ... );: 使用 load() 方法加载 OBJ 模型。加载方式与 GLTFLoader 类似。

4. MTLLoader (MTL)

MTLLoader 用于加载 MTL 文件，该文件包含 OBJ 模型的材质信息。通常与 OBJLoader 配合使用。


import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader.js';
import { MTLLoader } from 'three/examples/jsm/loaders/MTLLoader.js';
// Instantiate a MTL loader
const mtlLoader = new MTLLoader();
mtlLoader.load('models/model.mtl', (materials) => {
  materials.preload();
  // Instantiate an OBJ loader
  const objLoader = new OBJLoader();
  objLoader.setMaterials(materials);
  objLoader.load('models/model.obj', (object) => {
    scene.add(object);
  });
});

代码详解:

import { MTLLoader } from 'three/examples/jsm/loaders/MTLLoader.js';: 导入 MTLLoader 类。
const mtlLoader = new MTLLoader();: 创建一个 MTLLoader 实例。
mtlLoader.load('models/model.mtl', ...): 加载 MTL 文件。
materials.preload();: 预加载材质。
objLoader.setMaterials(materials);: 将加载的材质传递给 OBJLoader，以便 OBJ 模型可以使用这些材质。

其他加载器:

除了上述加载器之外，还有许多其他加载器可用于加载各种文件格式，例如 FBXLoader (FBX)、ColladaLoader (DAE)、PLYLoader (PLY) 等。你可以根据需要选择合适的加载器。

8.2.2 控制器 (Controls)

控制器允许用户通过鼠标、键盘或触摸等方式与 3D 场景进行交互，例如旋转、缩放、平移等。

1. OrbitControls

OrbitControls 允许用户围绕目标点旋转、缩放和平移相机。它是 Three.js 中最常用的控制器之一。


import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
const controls = new OrbitControls( camera, renderer.domElement );
// Optional: Enable damping for smoother camera movements
controls.enableDamping = true;
controls.dampingFactor = 0.05;
// Optional: Set min and max distance to prevent zooming too far in or out
controls.minDistance = 1;
controls.maxDistance = 100;
// In your animation loop:
function animate() {
    requestAnimationFrame( animate );
    controls.update(); // Required if damping or auto-rotation are enabled
    renderer.render( scene, camera );
}
animate();

代码详解:

import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';: 导入 OrbitControls 类。
const controls = new OrbitControls( camera, renderer.domElement );: 创建一个 OrbitControls 实例，并将相机和渲染器的 DOM 元素传递给它。
controls.enableDamping = true;, controls.dampingFactor = 0.05;: 启用阻尼效果，使相机运动更加平滑。
controls.minDistance = 1;, controls.maxDistance = 100;: 设置最小和最大距离，防止相机过度缩放。
controls.update();: 在动画循环中调用 update() 方法，更新控制器状态。 如果启用了阻尼或自动旋转，则必须调用此方法。

2. FirstPersonControls

FirstPersonControls 允许用户以第一人称视角在场景中移动。


import { FirstPersonControls } from 'three/examples/jsm/controls/FirstPersonControls.js';
const controls = new FirstPersonControls( camera, renderer.domElement );
controls.movementSpeed = 10;
controls.lookSpeed = 0.1;
// In your animation loop:
function animate() {
    requestAnimationFrame( animate );
    controls.update( delta ); // delta is the time elapsed since the last frame
    renderer.render( scene, camera );
}
animate();

代码详解:

import { FirstPersonControls } from 'three/examples/jsm/controls/FirstPersonControls.js';: 导入 FirstPersonControls 类。
const controls = new FirstPersonControls( camera, renderer.domElement );: 创建一个 FirstPersonControls 实例。
controls.movementSpeed = 10;, controls.lookSpeed = 0.1;: 设置移动速度和视角旋转速度。
controls.update( delta );: 在动画循环中调用 update() 方法，并传递时间间隔 delta 作为参数。

3. FlyControls

FlyControls 允许用户像飞行一样在场景中自由移动。


import { FlyControls } from 'three/examples/jsm/controls/FlyControls.js';
const controls = new FlyControls( camera, renderer.domElement );
controls.movementSpeed = 10;
controls.rollSpeed = Math.PI / 24;
controls.autoForward = false;
controls.dragToLook = false;
// In your animation loop:
function animate() {
    requestAnimationFrame( animate );
    controls.update( delta ); // delta is the time elapsed since the last frame
    renderer.render( scene, camera );
}
animate();

代码详解:

与 FirstPersonControls 类似，FlyControls 也需要在 animate 函数中使用 controls.update(delta) 来更新。

其他控制器:

Three.js 还有其他一些控制器，例如 TrackballControls、PointerLockControls 等。你可以根据需要选择合适的控制器。

8.2.3 后期处理 (Post-processing)

后期处理是在渲染完成后对图像进行处理，以添加各种视觉效果，例如 Bloom、Depth of Field、FXAA 等。

1. EffectComposer

EffectComposer 是 Three.js 中用于实现后期处理的主要工具。它可以将多个后期处理通道 (Pass) 组合在一起，形成一个完整的后期处理流程。


import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer.js';
import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass.js';
import { ShaderPass } from 'three/examples/jsm/postprocessing/ShaderPass.js';
import { FXAAShader } from 'three/examples/jsm/shaders/FXAAShader.js';
// Create an EffectComposer
const composer = new EffectComposer( renderer );
// Add a RenderPass to render the scene
const renderPass = new RenderPass( scene, camera );
composer.addPass( renderPass );
// Add an FXAA pass for anti-aliasing
const fxaaPass = new ShaderPass( FXAAShader );
const pixelRatio = renderer.getPixelRatio();
fxaaPass.material.uniforms[ 'resolution' ].value.x = 1 / ( window.innerWidth * pixelRatio );
fxaaPass.material.uniforms[ 'resolution' ].value.y = 1 / ( window.innerHeight * pixelRatio );
composer.addPass( fxaaPass );
// In your animation loop:
function animate() {
    requestAnimationFrame( animate );
    composer.render(); // Render the composer instead of the renderer
}
animate();

代码详解:

import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer.js';: 导入 EffectComposer 类。
import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass.js';: 导入 RenderPass 类。 RenderPass 用于渲染场景。
import { ShaderPass } from 'three/examples/jsm/postprocessing/ShaderPass.js';: 导入 ShaderPass 类。 ShaderPass 用于应用自定义着色器效果。
import { FXAAShader } from 'three/examples/jsm/shaders/FXAAShader.js';: 导入 FXAAShader。 FXAA 是一种快速抗锯齿算法。
const composer = new EffectComposer( renderer );: 创建一个 EffectComposer 实例，并将渲染器传递给它。
const renderPass = new RenderPass( scene, camera );: 创建一个 RenderPass 实例，并将场景和相机传递给它。
composer.addPass( renderPass );: 将 RenderPass 添加到 EffectComposer 中。
const fxaaPass = new ShaderPass( FXAAShader );: 创建一个 ShaderPass 实例，并使用 FXAAShader 作为着色器。
fxaaPass.material.uniforms[ 'resolution' ].value.x = 1 / ( window.innerWidth * pixelRatio );, fxaaPass.material.uniforms[ 'resolution' ].value.y = 1 / ( window.innerHeight * pixelRatio );: 设置 FXAA 着色器的分辨率 uniform。
composer.addPass( fxaaPass );: 将 FXAA Pass 添加到 EffectComposer 中。
composer.render();: 在动画循环中调用 composer.render() 方法，渲染 EffectComposer。 不要再调用 renderer.render() 方法。

2. 其他后期处理通道:

Three.js 提供了许多其他的后期处理通道，例如 BloomPass、FilmPass、GlitchPass、OutlinePass 等。你可以根据需要选择合适的通道。

8.2.4 GUI 工具 (Graphical User Interface)

GUI 工具可以帮助你轻松地调整 Three.js 场景中的各种参数，例如材质颜色、光照强度、相机位置等。

1. dat.GUI

dat.GUI 是一个轻量级的 JavaScript GUI 库，非常适合用于 Three.js 项目。


import * as dat from 'dat.gui';
const gui = new dat.GUI();
const parameters = {
    color: '#ffffff',
    intensity: 1,
    rotationSpeed: 0.01
};
gui.addColor(parameters, 'color')
    .onChange(function(value) {
        light.color.set(value);
    });
gui.add(parameters, 'intensity', 0, 2)
    .onChange(function(value) {
        light.intensity = value;
    });
gui.add(parameters, 'rotationSpeed', -0.1, 0.1);
function animate() {
    requestAnimationFrame( animate );
    cube.rotation.x += parameters.rotationSpeed;
    cube.rotation.y += parameters.rotationSpeed;
    renderer.render( scene, camera );
}
animate();

代码详解:

import * as dat from 'dat.gui';: 导入 dat.GUI 库。
const gui = new dat.GUI();: 创建一个 dat.GUI 实例。
const parameters = { ... };: 定义一个包含需要调整的参数的对象。
gui.addColor(parameters, 'color') ...: 添加一个颜色控制器，用于调整 parameters.color 属性。
gui.add(parameters, 'intensity', 0, 2) ...: 添加一个滑块控制器，用于调整 parameters.intensity 属性，范围为 0 到 2。
gui.add(parameters, 'rotationSpeed', -0.1, 0.1);: 添加一个滑块控制器，用于调整 parameters.rotationSpeed 属性，范围为 -0.1 到 0.1。
.onChange(function(value) { ... });: 为每个控制器添加 onChange 回调函数，当控制器值发生变化时，会调用该回调函数，从而更新 Three.js 场景中的相应属性。

2. Tweakpane

Tweakpane 是另一个流行的 JavaScript GUI 库，它提供了更现代化的界面和更丰富的功能。

8.2.5 物理引擎 (Physics Engines)

物理引擎可以模拟物体之间的物理交互，例如碰撞、重力、摩擦力等。

1. Cannon.js

Cannon.js 是一个轻量级的 JavaScript 物理引擎。

2. Ammo.js

Ammo.js 是 Bullet 物理引擎的 JavaScript 移植版本。 Bullet 是一个强大的 C++ 物理引擎，Ammo.js 提供了 Bullet 的大部分功能，并且可以在 Web 浏览器中运行。

8.2.6 实用工具 (Utilities)

1. Stats.js

Stats.js 是一个简单的 JavaScript 性能监视器，可以显示 FPS (每秒帧数) 和内存使用情况。


import Stats from 'three/examples/jsm/libs/stats.module.js';
const stats = new Stats();
document.body.appendChild( stats.dom );
function animate() {
    requestAnimationFrame( animate );
    stats.update();
    renderer.render( scene, camera );
}
animate();

代码详解:

import Stats from 'three/examples/jsm/libs/stats.module.js';: 导入 Stats 类。
const stats = new Stats();: 创建一个 Stats 实例。
document.body.appendChild( stats.dom );: 将 Stats 的 DOM 元素添加到页面中。
stats.update();: 在动画循环中调用 stats.update() 方法，更新性能监视器。

2. Three.js Editor

Three.js Editor 是一个基于 Web 的 Three.js 场景编辑器。它可以让你在浏览器中创建、编辑和导出 Three.js 场景。

8.2.7 图表总结

总结

本节介绍了 Three.js 中一些常用的第三方库和工具，包括加载器、控制器、后期处理、GUI 工具、物理引擎和实用工具。掌握这些库和工具可以帮助你更高效地开发 Three.js 项目，并创建更令人惊叹的 3D 体验。在实际项目中，应根据具体需求选择合适的库和工具。随着 Three.js 生态系统的不断发展，未来还将涌现出更多优秀的第三方库和工具。

作者与出处

原作者：灏天文库

来源：灏天文库

原文： https://aiknowledge.cn/collection/220-threejs-3d%E5%8F%AF%E8%A7%86%E5%8C%96%E5%BC%80%E5%8F%91%E5%AE%9E%E6%88%98

整理：灏天文库整理

由灏天文库平台收录，内容或由平台用户上传，仅供学习交流