加载和管理模型：在Three.js中引入外部物体

# 1. 理解Three.js中的模型加载

## 1.1 Three.js中模型加载的基本原理
在Three.js中，加载和管理模型是实现三维场景的重要步骤之一。模型加载的基本原理是将外部的模型文件引入到Three.js中，并将其转换为可被渲染的Three.js对象。

Three.js提供了一系列的加载器（Loader）用于加载不同格式的模型文件，例如OBJLoader、FBXLoader、GLTFLoader等。这些加载器会读取模型文件中的数据，解析出模型的结构和属性，并创建对应的Three.js对象。

## 1.2 支持的模型格式及其特点
Three.js支持多种常见的模型格式，每种格式有其独特的特点和适用场景。以下是一些常见的模型格式：

- OBJ格式：OBJ是一种基础的三维模型格式，它以文本形式存储模型的几何信息、材质信息和纹理坐标等。OBJ格式文件相对较小，易于使用和编辑，适用于简单的模型加载和展示。
- FBX格式：FBX是一种由Autodesk开发的通用三维模型交换格式，它支持几乎所有的三维软件工具。FBX格式文件可以包含模型的几何信息、材质、动画、灯光等，适用于复杂的模型和动画加载。
- GLTF格式：GLTF是一种基于JSON的开放标准，用于在Web上展示三维图形。GLTF格式文件采用二进制编码，文件体积小、加载速度快，并支持几乎所有的Three.js功能，是目前Web上广泛使用的模型格式。

通过使用不同的加载器，我们可以根据模型文件的格式选择合适的加载方式，并在Three.js中有效地加载和管理外部模型。

# 2. 加载外部模型到Three.js

在Three.js中，加载外部模型是非常常见和重要的操作。本章将介绍如何将外部模型加载到Three.js场景中，包括静态模型文件和动态加载外部数据源的模型。

#### 2.1 使用Three.js加载已有的模型文件

在Three.js中，可以通过以下步骤加载已有的模型文件：

1. 首先，确保你已经创建了场景（Scene）、相机（Camera）和渲染器（Renderer）。

// 创建场景
var scene = new THREE.Scene();

// 创建透视摄像头
var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);

// 创建WebGL渲染器
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

2. 然后，选择合适的模型文件格式（如OBJ、STL、GLTF等），并使用对应的Loader加载器加载模型文件。

// 使用OBJLoader加载OBJ格式的模型
var loader = new THREE.OBJLoader();

// 加载模型文件
loader.load(
    // 模型文件的URL
    'models/model.obj',

    // 加载完成后的回调函数
    function (obj) {
        // 将加载的模型添加到场景中
        scene.add(obj);
    },

    // 加载进度的回调函数
    function (xhr) {
        console.log((xhr.loaded / xhr.total * 100) + '% 完成');
    },

    // 加载出错的回调函数
    function (error) {
        console.log('加载模型出错：' + error);
    }
);

3. 最后，渲染场景和相机即可看到加载的模型在Three.js中的效果。

// 渲染循环函数
function animate() {
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
}

// 调用渲染函数
animate();

通过以上步骤，我们就可以成功地在Three.js中加载已有的模型文件。接下来，我们将介绍如何从外部数据源动态加载模型。

#### 2.2 从外部数据源动态加载模型

除了加载本地的静态模型文件，有时我们还需要从外部数据源动态加载模型。这通常涉及到从服务器获取模型数据，然后在客户端进行加载和显示。以下是一个简单的示例：

// 使用GLTFLoader加载GLTF格式的模型
var loader = new THREE.GLTFLoader();

// 从外部数据源加载模型
loader.load(
    // 模型文件的URL
    'http://example.com/models/model.gltf',

    // 加载完成后的回调函数
    function (gltf) {
        // 将加载的模型添加到场景中
        scene.add(gltf.scene);
    },

    // 加载进度的回调函数
    function (xhr) {
        console.log((xhr.loaded / xhr.total * 100) + '% 完成');
    },

    // 加载出错的回调函数
    function (error) {
        console.log('加载模型出错：' + error);
    }
);

以上是在Three.js中加载外部模型的基本方法，包括加载已有的模型文件和动态加载外部数据源的模型。通过这些方法，可以灵活地引入外部模型并在Three.js场景中进行渲染和展示。

# 3. 模型的基本管理

在Three.js中，一旦我们成功加载了外部模型，接下来就需要对模型进行基本的管理，包括控制模型的位置、旋转、缩放，以及添加材质和纹理到加载的模型中。

#### 3.1 控制模型的位置、旋转和缩放

一旦我们加载了模型，通常需要对其进行位置、旋转和缩放的调整。在Three.js中，我们可以通过修改模型的属性来实现这些效果。以下是一个