8.1官方扩展库 (examplesjsm)

文档摘要

8.1官方扩展库 (examples/jsm) Three.js 官方扩展库 (examples/jsm) 详解与实践 Three.js 官方扩展库，通常位于目录下，是一个宝贵的资源库，它包含了大量的示例代码、工具和模块，可以极大地扩展 Three.js 的功能，并帮助开发者更高效地构建复杂的 3D 应用程序。代表 JavaScript Modules，表明这些扩展库采用 ES Modules 规范，方便模块化开发和代码复用。 8.1.1 的组织结构与主要模块目录的结构相对清晰，主要按功能模块进行组织。常见的模块包括： controls: 各种相机控制器的实现，例如 , , 等。 loaders: 各种 3D 模型格式的加载器，例如 , , 等。

8.1官方扩展库 (examples/jsm)

Three.js 官方扩展库 (examples/jsm) 详解与实践

Three.js 官方扩展库，通常位于 examples/jsm 目录下，是一个宝贵的资源库，它包含了大量的示例代码、工具和模块，可以极大地扩展 Three.js 的功能，并帮助开发者更高效地构建复杂的 3D 应用程序。jsm 代表 JavaScript Modules，表明这些扩展库采用 ES Modules 规范，方便模块化开发和代码复用。

8.1.1 `examples/jsm` 的组织结构与主要模块

examples/jsm 目录的结构相对清晰，主要按功能模块进行组织。常见的模块包括：

controls: 各种相机控制器的实现，例如 OrbitControls, FirstPersonControls, TrackballControls 等。
loaders: 各种 3D 模型格式的加载器，例如 GLTFLoader, OBJLoader, FBXLoader 等。
postprocessing: 后期处理效果，例如 EffectComposer, RenderPass, ShaderPass, BloomPass 等。
utils: 实用工具函数，例如 BufferGeometryUtils, SceneUtils 等。
geometries: 各种预定义的几何体，例如 RoundedBoxGeometry, TeapotGeometry 等。
exporters: 模型导出器，可以将 Three.js 场景导出为不同格式，例如 GLTFExporter, OBJExporter。
shaders: 自定义着色器，用于实现各种视觉效果。
curves: 曲线相关的工具，例如 Curve, CurvePath。
nodes: 基于节点的材质系统，允许以图形化的方式创建复杂的材质。
physics: 物理引擎集成，例如 AmmoPhysics, OimoPhysics。

8.1.2 常用模块详解与代码实践

接下来，我们将深入探讨一些常用的 examples/jsm 模块，并提供代码示例。

8.1.2.1 相机控制器 (controls)

相机控制器允许用户通过鼠标或键盘与 3D 场景进行交互。 OrbitControls 是最常用的控制器之一，它允许用户围绕目标点旋转、缩放和平移相机。

代码示例：OrbitControls


import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
// 创建场景、相机和渲染器
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// 创建一个立方体
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;
// 创建 OrbitControls
const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true; // 启用阻尼，使旋转更平滑
controls.dampingFactor = 0.05;
controls.screenSpacePanning = false; // 禁止屏幕空间平移
controls.minDistance = 1;
controls.maxDistance = 10;
// 动画循环
function animate() {
    requestAnimationFrame(animate);
    controls.update(); // 必须在渲染之前调用 update
    renderer.render(scene, camera);
}
animate();

代码解释：

导入模块: import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'; 导入 OrbitControls。
创建 OrbitControls: const controls = new OrbitControls(camera, renderer.domElement); 创建 OrbitControls 实例，需要传入相机和渲染器的 DOM 元素。
更新 Controls: controls.update(); 在渲染循环中调用 controls.update()，以更新相机的位置和方向。

8.1.2.2 模型加载器 (loaders)

模型加载器用于加载各种 3D 模型格式，例如 GLTF, OBJ, FBX 等。 GLTFLoader 是加载 GLTF 模型的常用加载器。

代码示例：GLTFLoader


import * as THREE from 'three';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
// 创建场景、相机和渲染器
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
camera.position.z = 5;
// 创建 GLTFLoader
const loader = new GLTFLoader();
// 加载 GLTF 模型
loader.load(
    'path/to/your/model.gltf', // 模型路径
    function (gltf) {
        scene.add(gltf.scene); // 将模型添加到场景中
        gltf.animations; // 动画剪辑
        gltf.scene; // 场景
        gltf.scenes; // 场景列表
        gltf.cameras; // 相机列表
        gltf.asset; // 资源信息
    },
    function (xhr) {
        console.log((xhr.loaded / xhr.total * 100) + '% loaded'); // 加载进度
    },
    function (error) {
        console.log('An error happened'); // 加载错误
    }
);
// 动画循环
function animate() {
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
}
animate();

代码解释：

导入模块: import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'; 导入 GLTFLoader。
创建 GLTFLoader: const loader = new GLTFLoader(); 创建 GLTFLoader 实例。
加载模型: loader.load('path/to/your/model.gltf', ...) 使用 loader.load() 方法加载模型，需要传入模型路径，以及加载成功、加载进度和加载错误的回调函数。
添加到场景: scene.add(gltf.scene); 将加载的模型的场景添加到 Three.js 场景中。

8.1.2.3 后期处理 (postprocessing)

后期处理可以在渲染完成后对图像进行处理，以添加各种视觉效果，例如模糊、发光、色彩校正等。 EffectComposer 是后期处理的核心组件。

代码示例：BloomPass


import * as THREE from 'three';
import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer.js';
import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass.js';
import { BloomPass } from 'three/examples/jsm/postprocessing/BloomPass.js';
// 创建场景、相机和渲染器
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// 创建一个立方体
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;
// 创建 EffectComposer
const composer = new EffectComposer(renderer);
// 添加 RenderPass
const renderPass = new RenderPass(scene, camera);
composer.addPass(renderPass);
// 添加 BloomPass
const bloomPass = new BloomPass(
    1,    // strength
    25,   // kernelSize
    4,    // sigma ?
    256  // blurResolution
);
composer.addPass(bloomPass);
// 动画循环
function animate() {
    requestAnimationFrame(animate);
    // 使用 EffectComposer 渲染
    composer.render();
}
animate();

代码解释：

导入模块: import { EffectComposer, RenderPass, BloomPass } from 'three/examples/jsm/postprocessing/...'; 导入 EffectComposer, RenderPass 和 BloomPass。
创建 EffectComposer: const composer = new EffectComposer(renderer); 创建 EffectComposer 实例，需要传入渲染器。
添加 RenderPass: const renderPass = new RenderPass(scene, camera); composer.addPass(renderPass); RenderPass 用于渲染场景到 EffectComposer。
添加 BloomPass: const bloomPass = new BloomPass(...); composer.addPass(bloomPass); BloomPass 用于添加发光效果。
使用 EffectComposer 渲染: composer.render(); 使用 EffectComposer 的 render() 方法渲染场景，而不是直接使用渲染器的 render() 方法。

8.1.2.4 实用工具 (utils)

examples/jsm/utils 目录下包含各种实用工具函数，例如 BufferGeometryUtils。

代码示例：BufferGeometryUtils.mergeBufferGeometries


import * as THREE from 'three';
import { BufferGeometryUtils } from 'three/examples/jsm/utils/BufferGeometryUtils.js';
// 创建两个立方体几何体
const geometry1 = new THREE.BoxGeometry(1, 1, 1);
const geometry2 = new THREE.BoxGeometry(1, 1, 1);
geometry2.translate(2, 0, 0);
// 合并几何体
const mergedGeometry = BufferGeometryUtils.mergeBufferGeometries([geometry1, geometry2]);
// 创建材质和网格
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const mesh = new THREE.Mesh(mergedGeometry, material);
// 创建场景、相机和渲染器
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
camera.position.z = 5;
scene.add(mesh);
// 动画循环
function animate() {
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
}
animate();

代码解释：

导入模块: import { BufferGeometryUtils } from 'three/examples/jsm/utils/BufferGeometryUtils.js'; 导入 BufferGeometryUtils。
合并几何体: const mergedGeometry = BufferGeometryUtils.mergeBufferGeometries([geometry1, geometry2]); 使用 BufferGeometryUtils.mergeBufferGeometries() 方法合并两个几何体。

8.1.3 `examples/jsm` 的优势与注意事项

优势：

丰富的功能: 提供了大量的扩展功能，可以满足各种需求。
官方维护: 由 Three.js 官方维护，质量有保证。
模块化设计: 采用 ES Modules 规范，方便模块化开发和代码复用。
学习资源: 提供了大量的示例代码，可以作为学习 Three.js 的良好资源。

注意事项：

版本兼容性: examples/jsm 中的代码可能与 Three.js 的特定版本相关，需要注意版本兼容性。
性能优化: 某些扩展库可能会影响性能，需要根据实际情况进行优化。
代码质量: 虽然是官方维护，但代码质量参差不齐，需要仔细阅读和理解代码。
不断更新: examples/jsm 会不断更新，需要定期关注更新内容。

8.1.4 总结

examples/jsm 是 Three.js 的一个宝贵资源库，它包含了大量的扩展功能，可以极大地扩展 Three.js 的能力。通过学习和使用 examples/jsm 中的模块，可以更高效地构建复杂的 3D 应用程序。希望本文能够帮助你更好地理解和利用 examples/jsm。记住，实践是最好的老师，多尝试、多实验，才能真正掌握这些扩展库的用法。

作者与出处

原作者：灏天文库

来源：灏天文库

原文： 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

整理：灏天文库整理

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

8.1官方扩展库 (examplesjsm)

文档摘要