玩转 Three.js：用鼠标滚动控制模型和相机，让你动画活起来！

前端

2023-08-13 00:57:44

Three.js滚动控制：赋予你的3D模型生命

在Three.js的奇妙世界中，我们不仅能创造出精美的3D模型，还能让它们动起来，赋予它们生命。而滚动控制就像一个魔术棒，能让你轻松实现模型动画和相机动画的交互控制，让你的作品更具生动性。

滚动控制：交互式3D动画的钥匙

Three.js的滚动控制功能由ScrollControls工具提供，它允许你将模型动画和相机动画与鼠标滚轮或触摸板的滚动动作联系起来。通过几行简单的代码，你就可以让模型随着鼠标滚轮的滚动播放动画，或让相机随着触摸板的上下移动改变视角。

解锁交互式动画的神奇力量

滚动控制为交互式3D动画开启了大门，让你的观众能够沉浸在你的作品中。想象一下，当你滚动鼠标滚轮时，模型开始旋转或改变颜色。或者，当你滑动触摸板时，相机平移或缩放，为你展示场景的不同视角。

如何使用滚动控制

使用滚动控制非常简单：

加载ScrollControls库： 在你的代码中导入ScrollControls库。
创建滚动控制器： 使用ScrollControls类创建一个滚动控制器，并将它与模型或相机关联起来。
设置参数： 配置控制器以指定动画行为，例如动画速度和滚动方向。
绑定事件侦听器： 将事件侦听器绑定到鼠标滚轮或触摸板事件，以触发动画。

代码示例：滚动模型动画

import * as THREE from 'three';
import {ScrollControls} from 'three/examples/jsm/controls/ScrollControls.js';

// 创建场景、相机、模型
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({color: 0x00ff00});
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

// 创建滚动控制器
const scrollControls = new ScrollControls(camera, document.body);

// 设置参数
scrollControls.dampingFactor = 0.2; // 阻尼因子，控制动画速度
scrollControls.scrollY = true; // 启用 y 轴滚动控制

// 绑定事件侦听器
scrollControls.addEventListener('scroll', (event) => {
  // 更新模型旋转角度
  cube.rotation.x += event.delta * 0.01;
});