【three.js】三维模型

目录

1. 常用的三维模型格式

2. 加载常用外部三维模型

2.1 OBJ 格式

2.2 STL 格式

2.3 FBX 格式

2.4 glTF格式

3. 错误处理与性能优化

3.1 错误处理

3.2 性能优化

1. 常用的三维模型格式

以下是一些常见的三维模型格式：

• OBJ：OBJ（Wavefront Object）是一种简单的 3D 模型文件格式，广泛用于 3D 建模和动画。OBJ 文件主要包含顶点、纹理坐标、法线和面的信息。这种格式易于解析，但文件较大，不适合实时应用。OBJ 格式不支持动画、骨骼和蒙皮。通常与 MTL 材质文件一起使用。
• STL：STL（Stereolithography）格式是一种主要用于 3D 打印和快速原型制造的 3D 模型文件格式。STL 文件通常包含三维模型的表面三角形信息，但不包含颜色、纹理或其他材质信息。STL 格式的文件通常较大，不适合实时应用。
• FBX：FBX（Filmbox）是由 Autodesk 开发的一种 3D 模型文件格式。FBX 文件支持多种 3D 数据类型，包括几何体、材质、纹理、动画、骨骼和蒙皮等。FBX 文件可以在多个 3D 软件和游戏引擎中无缝传输，是一种非常通用的格式。然而，FBX 格式是专有的，可能在解析和导入时遇到一些问题。
• glTF：glTF（GL Transmission Format）是一种开放标准的 3D 模型文件格式，被誉为 "JPEG for 3D"。glTF 文件支持几何体、材质、纹理、动画、骨骼和蒙皮等多种数据类型。glTF 格式被设计为 GPU 友好，易于解析和加载，适用于实时应用和网络传输。glTF 是目前推荐的 3D 模型文件格式。

2. 加载常用外部三维模型

2.1 OBJ 格式

OBJ：使用 THREE.OBJLoader 加载 OBJ 文件：

import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader';
import { MTLLoader } from 'three/examples/jsm/loaders/MTLLoader';

// 加载材质
const mtlLoader = new MTLLoader();
mtlLoader.load('path/to/model.mtl', (materials) => {
  materials.preload();

  // 加载模型
  const objLoader = new OBJLoader();
  objLoader.setMaterials(materials);
  objLoader.load('path/to/model.obj', (object) => {
    scene.add(object);
    // 示例：将模型添加到场景中后，可以对其进行一些操作，如旋转或平移
    object.rotation.x = Math.PI / 4; // 旋转模型45度
    object.position.set(0, 1, 0); // 将模型平移到y轴1单位处
  });
});

示例：假设你有一个名为 "robot.obj" 和 "robot.mtl" 的模型文件，你可以将 'path/to/model.obj' 和 'path/to/model.mtl' 替换为这些文件的实际路径，如 'models/robot.obj' 和 'models/robot.mtl'

2.2 STL 格式

STL：使用 THREE.STLLoader 加载 STL 文件：

import { STLLoader } from 'three/examples/jsm/loaders/STLLoader.js';

const loader = new STLLoader();
loader.load('path/to/your/model.stl', (geometry) => {
  const material = new THREE.MeshStandardMaterial({ color: 0x606060 });
  const mesh = new THREE.Mesh(geometry, material);
  scene.add(mesh);
  // 示例：为模型添加一个点击事件监听器
  mesh.userData = { clickable: true }; // 自定义属性，用于识别可点击对象
  mesh.on('click', (event) => {
    console.log('STL模型被点击！');
  });
});

示例：假设你有一个名为 "car.stl" 的模型文件，你可以将 'path/to/your/model.stl' 替换为 'models/car.stl'。

2.3 FBX 格式

FBX：使用 THREE.FBXLoader 加载 FBX 文件：

import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader.js';
​
const loader = new FBXLoader();
loader.load('path/to/your/model.fbx', (object) => {
  scene.add(object);
});

2.4 glTF格式

glTF：使用 THREE.GLTFLoader 加载 glTF 文件：

import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader.js';
​
const loader = new FBXLoader();
loader.load('path/to/your/model.fbx', (object) => {
  scene.add(object);
});

3. 错误处理与性能优化

3.1 错误处理

在加载外部三维模型时，可能会遇到一些错误，例如文件找不到、格式错误等。为了更好地处理这些错误，可以使用加载器的 onError 回调函数：

import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';

const gltfLoader = new GLTFLoader();
gltfLoader.load(
  'path/to/model.gltf',
  (gltf) => {
    scene.add(gltf.scene);
  },
  undefined, // onProgress 可选回调函数
  (error) => {
    console.error('加载模型时发生错误：', error);
    // 示例：在发生错误时，显示一个错误提示给用户
    alert('加载模型失败，请检查文件路径和格式！');
  }
);

3.2 性能优化

加载大量或复杂的三维模型可能会导致性能问题。为了优化性能，可以考虑以下策略：

选择合适的模型格式：使用高效的格式，如 glTF（推荐）或 FBX，可以减少文件大小和解析时间。glTF 格式被设计为 GPU 友好，易于加载和解析。

例：虽然 glTF 格式的选择主要在模型导出阶段进行，但加载时可以使用 THREE.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);

const loader = new GLTFLoader();
loader.load('path/to/your/model.glb', function (gltf) {
    scene.add(gltf.scene);
    render();
}, undefined, function (error) {
    console.error(error);
});

function render() {
    requestAnimationFrame(render);
    renderer.render(scene, camera);
}

减少模型复杂度：在导出模型时，尽量减少顶点和多边形的数量。这可以通过在 3D 建模软件中使用网格简化、网格合并等技术来实现。这样可以减少模型的大小，加快加载速度，并降低 GPU 计算负担。

这通常在 3D 建模软件（如 Blender）中完成，但可以通过导出不同复杂度的模型来演示效果

// 假设你有两个版本的模型：low_poly_model.glb 和 high_poly_model.glb
const lowPolyLoader = new GLTFLoader();
lowPolyLoader.load('path/to/low_poly_model.glb', function (gltf) {
    scene.add(gltf.scene);
    // 可以在此处设置一个定时器或监听事件来加载高精度模型
    setTimeout(() => {
        scene.remove(gltf.scene);
        const highPolyLoader = new GLTFLoader();
        highPolyLoader.load('path/to/high_poly_model.glb', function (highGltf) {
            scene.add(highGltf.scene);
        });
    }, 5000); // 5秒后加载高精度模型
}, undefined, function (error) {
    console.error(error);
});

使用压缩纹理：使用压缩纹理格式（如 DXT、PVRTC 或 ASTC）可以显著减小纹理文件大小，从而加快加载速度。此外，这还可以降低 GPU 内存占用和渲染时的带宽需求。

纹理压缩通常在纹理生成或导出阶段进行，但加载时可以检查文件大小

// 假设DXT压缩纹理已经准备好
const textureLoader = new THREE.TextureLoader();
textureLoader.load('path/to/compressed_texture.dds', function (texture) {
    const material = new THREE.MeshBasicMaterial({ map: texture });
    const geometry = new THREE.BoxGeometry();
    const cube = new THREE.Mesh(geometry, material);
    scene.add(cube);
});

使用 DRACO 压缩：DRACO 是一种用于压缩几何体数据的技术。使用 DRACO 压缩可以显著减小模型文件大小，从而加快加载速度。请注意，解压缩 DRACO 数据需要一些额外的计算，但在大多数情况下，这是值得的。

在导出 glTF 模型时启用 DRACO 压缩，加载时无需特殊处理，但确保加载器支持 DRACO。

// 确保引入了支持DRACO的GLTFLoader
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader.js';

const dracoLoader = new DRACOLoader();
dracoLoader.setDecoderPath('path/to/draco/gltf/'); // 设置DRACO解码器路径

const loader = new GLTFLoader();
loader.setDRACOLoader(dracoLoader);
loader.load('path/to/draco_compressed_model.glb', function (gltf) {
    scene.add(gltf.scene);
    render();
}, undefined, function (error) {
    console.error(error);
});

异步加载和渐进式显示：通过使用 THREE.LoadingManager 和 THREE.GLTFLoader 等加载器，您可以实现异步加载和渐进式显示。这可以避免在加载大型模型时阻塞主线程，从而提高用户体验。

使用 THREE.LoadingManager 和 THREE.GLTFLoader 实现异步加载，并显示加载进度

const loadingManager = new THREE.LoadingManager();
loadingManager.onLoad = function () {
    console.log('Loading complete!');
};
loadingManager.onProgress = function (item, loaded, total) {
    console.log(`Loading: ${item}, Loaded: ${loaded}, Total: ${total}`);
};

const loader = new GLTFLoader(loadingManager);
const progressBar = document.getElementById('progress-bar'); 
// 假设你有一个进度条元素
loader.load('path/to/your/model.glb', function (gltf) {
    scene.add(gltf.scene);
    progressBar.style.width = '100%'; // 更新进度条
    render();
}, undefined, function (error) {
    console.error(error);
}, function (xhr) {
    const percentComplete = (xhr.loaded / xhr.total * 100);
    progressBar.style.width = `${percentComplete}%`; // 更新进度条
});

使用 LOD 技术：对于大型场景和高精度模型，使用 LOD 技术（Level of Detail）可以根据物体与相机的距离，动态选择渲染不同精度的模型。这可以有效减少渲染时的计算量，提高性能。

根据相机距离动态切换 LOD 级别

const lod = new THREE.LOD();

// 加载不同精度的模型
const loader = new GLTFLoader();
loader.load('path/to/low_poly_model.glb', function (gltfLow) {
    lod.addLevel(gltfLow.scene, 1000); // 1000米外使用低精度模型
}, undefined, function (error) {
    console.error(error);
});
loader.load('path/to/medium_poly_model.glb', function (gltfMedium) {
    lod.addLevel(gltfMedium.scene, 500); 
// 500米外使用中等精度模型
}, undefined, function (error) {
    console.error(error);
});
loader.load('path/to/high_poly_model.glb', function (gltfHigh) {
    lod.addLevel(gltfHigh.scene, 0); 
// 0米内使用高精度模型
    scene.add(lod);
    render();
}, undefined, function (error) {
    console.error(error);
});

// 更新 LOD
function updateLOD() {
    const cameraDistance = camera.position.distanceTo(lod.getWorldPosition());
    lod.currentLOD = Math.floor(cameraDistance / 100) * 100; 
// 根据距离调整LOD级别（这里以100米为间隔）
}

function render() {
    requestAnimationFrame(render);
    updateLOD();
    renderer.render(scene, camera);
}

缓存已加载的模型：当需要多次加载相同模型时，可以将已加载的模型存储在内存中，以便后续快速访问。这可以避免重复加载和解析模型，从而提高性能。

实现一个简单的模型缓存系统

const modelCache = {};

function loadModel(url, callback) {
    if (modelCache[url]) {
        callback(modelCache[url]);
    } else {
        const loader = new GLTFLoader();
        loader.load(url, function (gltf) {
            modelCache[url] = gltf.scene;
            callback(gltf.scene);
        }, undefined, function (error) {
            console.error(error);
        });
    }
}

// 使用缓存加载模型
loadModel('path/to/your/model.glb', function (model) {
    scene.add(model);
    render();
});

码字不易，各位大佬点点赞呗