WebGL 三维场景交互：让你的世界触手可及

2024-01-03 07:00:15

在上一篇教程中，我们学习了如何使用 WebGL 绘制一个矩形体，对模型视图投影变换有了进一步的理解。这次，我们将深入探讨三维场景交互的奥秘，让你的 3D 世界变得触手可及！

WebGL 交互的基础：模型视图投影变换

三维场景交互的基础是模型视图投影变换。模型视图投影变换将模型坐标系中的点转换为屏幕坐标系中的点，从而实现模型在屏幕上的显示。模型视图变换将模型坐标系中的点转换为相机坐标系中的点，投影变换将相机坐标系中的点转换为屏幕坐标系中的点。

鼠标交互：在三维场景中漫游

鼠标交互是三维场景交互中最常见的一种方式。通过鼠标，我们可以平移、旋转和缩放相机，从而改变观察三维场景的角度和距离。在 WebGL 中，我们可以使用 onmousemove 和 onmousedown 事件监听鼠标事件，并根据鼠标事件的类型和位置来更新相机的位置和方向。

键盘交互：控制三维场景中的对象

除了鼠标交互，键盘交互也是一种常用的三维场景交互方式。通过键盘，我们可以控制三维场景中的对象，例如移动、旋转和缩放对象。在 WebGL 中，我们可以使用 onkeydown 和 onkeyup 事件监听键盘事件，并根据键盘事件的类型和按键来更新对象的位置和方向。

事件监听：捕获用户输入

无论是鼠标交互还是键盘交互，都需要使用事件监听来捕获用户的输入。在 WebGL 中，我们可以使用 addEventListener() 方法为元素添加事件监听器。事件监听器是一个函数，当指定的事件发生时，该函数将被调用。

实例：使用 Three.js 实现三维场景交互

Three.js 是一个流行的 JavaScript 3D 库，它提供了丰富的 API 来简化 WebGL 开发。在 Three.js 中，我们可以使用 OrbitControls 类来实现鼠标交互和键盘交互。

// 创建场景
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);

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

// 将渲染器添加到页面中
document.body.appendChild(renderer.domElement);

// 监听窗口大小变化事件
window.addEventListener('resize', () => {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth, window.innerHeight);
});

// 监听鼠标移动事件
window.addEventListener('mousemove', (event) => {
  controls.handleMouseMoveRotate(event);
});

// 监听鼠标按下事件
window.addEventListener('mousedown', (event) => {
  controls.handleMouseDownRotate(event);
});

// 监听鼠标松开事件
window.addEventListener('mouseup', (event) => {
  controls.handleMouseUpRotate(event);
});

// 监听键盘按下事件
window.addEventListener('keydown', (event) => {
  controls.handleKeyDown(event);
});

// 监听键盘松开事件
window.addEventListener('keyup', (event) => {
  controls.handleKeyUp(event);
});

// 动画循环
function animate() {
  requestAnimationFrame(animate);

  // 更新控制器
  controls.update();

  // 渲染场景
  renderer.render(scene, camera);
}

animate();