Three.js相机和视图控制：实现鼠标和触摸交互

# 1. Three.js简介和基础概念

## 1.1 Three.js概述

Three.js是一个基于JavaScript的开源3D图形库，它可以在网页上创建、渲染和控制3D图形场景。它依赖于WebGL技术，可以利用GPU的强大计算能力进行图形处理，从而在网页上实现流畅且逼真的3D效果。Three.js提供了丰富的API和功能，使得创建和操作3D场景变得简单和高效。

## 1.2 什么是相机和视图控制

在Three.js中，相机用于定义场景中的视角和观察点。它决定了最终渲染到屏幕上的图像。Three.js提供了多种类型的相机，包括透视相机（PerspectiveCamera）和正交相机（OrthographicCamera）。透视相机模拟了人眼的视角，使得远处的物体显得小一些，近处的物体显得大一些；正交相机则展示了场景中所有物体的真实大小。

视图控制器用于控制相机的位置和方向，以实现用户交互。通过鼠标和触摸事件，用户可以改变相机的位置和角度，从而调整场景的视角，并实现视觉上的3D导航。

## 1.3 为什么需要实现鼠标和触摸交互

鼠标和触摸交互可以让用户更直观地操作Three.js场景，提升用户的交互体验。通过鼠标控制，用户可以自由旋转和缩放相机，观察场景的不同角度和细节。而通过触摸控制，用户可以在触摸设备上简单而直观地操作场景，比如通过手指滑动实现相机的旋转和缩放。

在开发基于Three.js的交互式应用或游戏时，实现鼠标和触摸交互可以提供更灵活的场景导航和用户操作，增加应用的可玩性和吸引力。

接下来，我们将详细介绍如何创建基本场景和相机。

# 2. 创建基本场景和相机

在使用Three.js创建3D场景之前，我们首先需要初始化一个场景，并添加相机和视图控制器。这些是创建基本场景和相机的步骤。

### 2.1 初始化Three.js场景

首先，我们需要在HTML文件中创建一个用于显示Three.js场景的容器。可以通过以下代码添加一个`<div>`元素来创建容器：

<div id="container"></div>

接下来，在JavaScript中，我们需要用以下代码初始化Three.js场景：

// 获取容器元素
const container = document.getElementById('container');

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

// 创建渲染器并设置其大小
const renderer = new THREE.WebGLRenderer();
renderer.setSize(container.clientWidth, container.clientHeight);

// 将渲染器的输出添加到容器中
container.appendChild(renderer.domElement);

这段代码将创建一个新的Three.js场景，并将渲染器的输出添加到容器中。

### 2.2 添加相机和视图控制器

在Three.js中，相机用于定义场景中的观察者视角。可以通过以下代码创建一个相机：

// 创建相机
const camera = new THREE.PerspectiveCamera(75, container.clientWidth / container.clientHeight, 0.1, 1000);

// 设置相机的位置
camera.position.set(0, 0, 5);

// 将相机添加到场景中
scene.add(camera);

在这段代码中，我们使用`PerspectiveCamera`创建一个透视相机，并设置其位置为`(0, 0, 5)`。然后，将相机添加到场景中。

为了能够对相机进行交互控制，我们需要添加一个视图控制器。可以使用`OrbitControls`类来实现基本的鼠标控制和旋转操作。可以通过以下代码添加视图控制器：

// 创建视图控制器
const controls = new THREE.OrbitControls(camera, renderer.domElement);

在这段代码中，我们通过传递相机和渲染器的输出元素，创建了一个`OrbitControls`实例。然后，我们可以通过鼠标拖动来旋转相机和控制场景。

### 2.3 设置相机的初始位置和方向

在创建相机后，我们可以通过设置其初始位置和方向来调整相机的视角。可以使用以下代码来设置相机的初始位置和方向：

// 设置相机的初始位置和目标点
camera.position.set(0, 0, 10);
camera.lookAt(new THREE.Vector3(0, 0, 0));

在这段代码中，我们使用`position`属性来设置相机的位置，并使用`lookAt`方法来设置相机的目标点。通过这样设置相机的初始位置和方向，我们可以确保初始时场景中的物体正好位于相机的视野中心。

这就是创建基本场景和相机的步骤。接下来，我们可以开始添加3D对象和实现交互功能。

### 示例代码

完整的示例代码如下：

// 获取容器元素
const container = document.getElementById('container');

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

// 创建渲染器并设置其大小
const renderer = new THREE.WebGLRenderer();
renderer.setSize(contain