Three.js 鼠标移动与图像交互教程

一、引言

在现代网页设计中，为用户提供丰富的交互体验是非常重要的。Three.js 作为一个强大的 3D 库，为我们实现复杂的 3D 交互效果提供了便利。本教程将详细介绍如何使用 Three.js 实现鼠标移动与 3D 图像的交互效果。

二、基础知识准备

1. Three.js 基本概念

Three.js 是一个基于 WebGL 的 JavaScript 3D 库，它简化了在网页中创建和渲染 3D 场景的过程。在使用 Three.js 时，我们需要了解以下几个核心概念：

• 场景（Scene） ：场景是所有 3D 对象的容器，类似于舞台。

• 相机（Camera） ：相机决定了我们从哪个角度观察场景。

• 渲染器（Renderer） ：渲染器负责将场景和相机的内容渲染到屏幕上。

• 几何体（Geometry） ：几何体定义了 3D 对象的形状。

• 材质（Material） ：材质定义了 3D 对象的外观。

• 网格（Mesh） ：网格是几何体和材质的组合，形成一个完整的 3D 对象。

2. 鼠标交互基础

在 Three.js 中实现鼠标交互，主要涉及以下几个方面：

• 鼠标位置计算：将鼠标屏幕坐标转换为标准化设备坐标（NDC）。

• 射线投射（Raycasting） ：通过鼠标位置发射一条射线，检测与哪些对象相交。

• 事件监听：监听鼠标移动、点击等事件，触发相应的交互逻辑。

三、实现鼠标移动与图像交互

1. 环境搭建

首先，我们需要创建一个基本的 Three.js 环境。以下是一个简单的初始化代码：

// 初始化场景、相机和渲染器
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);
document.body.appendChild(renderer.domElement);
// 添加一个立方体
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);
// 设置相机位置
camera.position.z = 5;
// 渲染循环
function animate() {
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
}
animate();

2. 鼠标位置计算

为了实现鼠标与 3D 对象的交互，我们首先需要将鼠标的屏幕坐标转换为 Three.js 可以使用的标准化设备坐标（NDC）。标准化设备坐标的范围是从 -1 到 1，分别对应屏幕的左边界和右边界（X 轴）以及下边界和上边界（Y 轴）。

以下是实现鼠标位置计算的代码：

// 鼠标位置变量
const mouse = new THREE.Vector2();
// 监听鼠标移动事件
window.addEventListener('mousemove', (event) => {
    // 计算鼠标在标准化设备坐标中的位置（-1 到 +1）
    mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
    mouse.y = - (event.clientY / window.innerHeight) * 2 + 1;
});

3. 射线投射（Raycasting）

射线投射是 Three.js 中实现鼠标交互的核心技术。它通过鼠标位置发射一条射线，检测与哪些 3D 对象相交。以下是实现射线投射的代码：

// 创建射线投射器
const raycaster = new THREE.Raycaster();
// 在渲染循环中更新射线并检测相交
function animate() {
    requestAnimationFrame(animate);
    
    // 更新射线
    raycaster.setFromCamera(mouse, camera);
    
    // 计算射线与场景中对象的交点
    const intersects = raycaster.intersectObjects(scene.children);
    
    // 如果有交点
    if (intersects.length > 0) {
        // 第一个交点是最近的交点
        const intersection = intersects[0];
        
        // 在这里可以处理交点，例如改变对象颜色
        intersection.object.material.color.set(0xff0000);
    } else {
        // 如果没有交点，恢复所有对象的原始颜色
        scene.children.forEach(child => {
            if (child.isMesh) {
                child.material.color.set(0x00ff00);
            }
        });
    }
    
    renderer.render(scene, camera);
}
animate();

4. 完整示例代码

下面是一个完整的示例代码，展示了如何实现鼠标移动与 3D 立方体的交互：

// 初始化场景、相机和渲染器
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);
document.body.appendChild(renderer.domElement);
// 添加多个立方体
const cubes = [];
const geometries = [
    new THREE.BoxGeometry(1, 1, 1),
    new THREE.SphereGeometry(0.5, 32, 32),
    new THREE.ConeGeometry(0.5, 1, 32)
];
for (let i = 0; i < 3; i++) {
    const geometry = geometries[i];
    const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
    const cube = new THREE.Mesh(geometry, material);
    
    // 设置位置
    cube.position.x = (i - 1) * 2;
    
    scene.add(cube);
    cubes.push(cube);
}
// 设置相机位置
camera.position.z = 5;
// 鼠标位置变量
const mouse = new THREE.Vector2();
// 创建射线投射器
const raycaster = new THREE.Raycaster();
// 监听鼠标移动事件
window.addEventListener('mousemove', (event) => {
    // 计算鼠标在标准化设备坐标中的位置（-1 到 +1）
    mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
    mouse.y = - (event.clientY / window.innerHeight) * 2 + 1;
});
// 渲染循环
function animate() {
    requestAnimationFrame(animate);
    
    // 更新射线
    raycaster.setFromCamera(mouse, camera);
    
    // 计算射线与场景中对象的交点
    const intersects = raycaster.intersectObjects(scene.children);
    
    // 重置所有立方体颜色
    cubes.forEach(cube => {
        cube.material.color.set(0x00ff00);
    });
    
    // 如果有交点
    if (intersects.length > 0) {
        // 第一个交点是最近的交点
        const intersection = intersects[0];
        
        // 改变相交对象的颜色
        intersection.object.material.color.set(0xff0000);
    }
    
    renderer.render(scene, camera);
}
animate();
// 监听窗口大小变化，调整渲染器和相机
window.addEventListener('resize', () => {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
});

四、进阶交互效果

1. 鼠标悬停高亮效果

上面的示例已经实现了基本的鼠标悬停高亮效果。当鼠标移动到某个对象上时，该对象会变为红色，移开后恢复绿色。

2. 鼠标点击交互

除了悬停效果，我们还可以实现鼠标点击交互。以下是添加点击交互的代码：

// 监听鼠标点击事件
window.addEventListener('click', () => {
    // 更新射线
    raycaster.setFromCamera(mouse, camera);
    
    // 计算射线与场景中对象的交点
    const intersects = raycaster.intersectObjects(scene.children);
    
    // 如果有交点
    if (intersects.length > 0) {
        // 获取第一个交点
        const intersection = intersects[0];
        
        // 处理点击事件，例如让对象旋转
        intersection.object.rotation.x += 0.5;
        intersection.object.rotation.y += 0.5;
    }
});

3. 平滑跟随鼠标移动

我们可以实现 3D 对象平滑跟随鼠标移动的效果，增强交互体验。以下是实现代码：

// 目标旋转值
const targetRotation = { x: 0, y: 0 };
// 在鼠标移动事件中更新目标旋转值
window.addEventListener('mousemove', (event) => {
    // 计算鼠标在标准化设备坐标中的位置（-1 到 +1）
    mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
    mouse.y = - (event.clientY / window.innerHeight) * 2 + 1;
    
    // 根据鼠标位置计算目标旋转值
    targetRotation.y = mouse.x * 0.5;
    targetRotation.x = -mouse.y * 0.5;
});
// 在渲染循环中平滑更新对象旋转
function animate() {
    requestAnimationFrame(animate);
    
    // 更新射线
    raycaster.setFromCamera(mouse, camera);
    
    // 平滑更新所有立方体的旋转
    cubes.forEach(cube => {
        // 使用插值实现平滑过渡
        cube.rotation.y += (targetRotation.y - cube.rotation.y) * 0.1;
        cube.rotation.x += (targetRotation.x - cube.rotation.x) * 0.1;
    });
    
    // 其他代码保持不变...
    
    renderer.render(scene, camera);
}
animate();

五、性能优化与注意事项

1. 限制射线投射频率

在上面的示例中，我们在每一帧都进行了射线投射计算，这在复杂场景中可能会影响性能。可以通过限制射线投射的频率来优化性能，例如每 5 帧进行一次计算：

let frameCount = 0;
function animate() {
    requestAnimationFrame(animate);
    
    frameCount++;
    
    // 每 5 帧进行一次射线投射
    if (frameCount % 5 === 0) {
        raycaster.setFromCamera(mouse, camera);
        // 处理相交逻辑...
    }
    
    renderer.render(scene, camera);
}
animate();

2. 只对可交互对象进行射线检测

在复杂场景中，可能有大量对象不需要进行交互检测。可以创建一个专门的数组来存储需要交互的对象，只对这些对象进行射线检测：

// 创建可交互对象数组
const interactiveObjects = [];
// 添加可交互对象
cubes.forEach(cube => {
    interactiveObjects.push(cube);
});
// 只对可交互对象进行射线检测
const intersects = raycaster.intersectObjects(interactiveObjects);

3. 使用层次结构优化

对于复杂场景，可以使用 Three.js 的层次结构来优化交互检测。例如，将一组相关对象放在同一个父对象下，当检测到父对象被选中时，再进一步检测具体的子对象。

六、总结

通过本教程，我们学习了如何使用 Three.js 实现鼠标移动与 3D 图像的交互。主要包括以下内容：

• Three.js 的基本概念和环境搭建

• 鼠标位置计算和标准化设备坐标

• 射线投射技术及其应用

• 实现鼠标悬停高亮、点击交互和平滑跟随效果

• 性能优化和注意事项

这些技术可以应用于各种 Web 3D 项目，如数据可视化、产品展示、游戏等，为用户提供更加丰富和沉浸式的交互体验。希望本教程对你有所帮助，祝你在 Three.js 的世界中创造出更多精彩的交互效果！