threejs 范围放大

Three.js 是一个用于在 Web 上创建 3D 图形的 JavaScript 库。要实现范围放大，可以使用 Three.js 中的相机(Camera)和控制器(Controls)。

首先，你需要定义一个透视相机 (PerspectiveCamera) 并设置初始的位置和视角。然后，你需要添加一个控制器，例如 OrbitControls，这样用户就可以通过鼠标和键盘控制相机的位置和旋转。

要实现范围放大，你可以在控制器上添加一个事件监听器，当用户滚动鼠标滚轮时，你可以通过改变相机的 fov 属性来实现放大和缩小。

以下是一个简单的示例代码：

// 创建一个透视相机
const camera = new THREE.PerspectiveCamera(
  75, // 视角
  window.innerWidth / window.innerHeight, // 宽高比
  0.1, // 近截面
  1000 // 远截面
);
camera.position.z = 5; // 初始位置

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

// 监听鼠标滚轮事件，实现范围放大
controls.addEventListener('mousewheel', (event) => {
  // 改变相机的 fov 属性
  camera.fov += event.deltaY * 0.05;
  camera.updateProjectionMatrix();
});

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

在这个示例代码中，我们创建了一个透视相机，然后使用 OrbitControls 控制器来控制相机的位置和旋转。我们添加了一个事件监听器来监听鼠标滚轮事件，然后根据滚轮的滚动距离改变相机的 fov 属性，从而实现范围放大。

请注意，相机的 fov 属性是一个角度值，表示相机的视角大小。当 fov 值越小时，相机的视野范围就越小，看起来就会越近。当 fov 值越大时，相机的视野范围就越大，看起来就会越远。因此，通过改变相机的 fov 属性，我们可以实现范围放大和缩小的效果。