ThreeJS入门（140）：THREE.Mouse 知识详解，示例代码

作者： 还是大剑师兰特 ，曾为美国某知名大学计算机专业研究生，现为国内GIS领域高级前端工程师，CSDN知名博主，深耕openlayers、leaflet、mapbox、cesium，webgl，ThreeJS，canvas，echarts等技术开发，欢迎加微信（gis-dajianshi），一起交流。

在这里插入图片描述

查看本专栏目录 - 本文是第 140篇入门文章

文章目录

- - 常量
  - 使用场景
  - 示例
  - 常量的使用
  - 总结

THREE.MOUSE 是 Three.js 中的一个枚举对象，它包含了一些预定义的常量，用于标识鼠标的不同按键。这些常量通常在处理用户的鼠标输入时使用，特别是当需要响应鼠标按钮的点击事件时。

常量

THREE.MOUSE 对象定义了以下常量：

THREE.MOUSE.LEFT：表示鼠标左键。
THREE.MOUSE.MIDDLE：表示鼠标中键（通常是滚轮）。
THREE.MOUSE.RIGHT：表示鼠标右键。

这些常量通常用于处理用户的鼠标交互事件，特别是在实现拖拽、点击等交互时非常有用。

使用场景

这些常量通常在处理用户的交互事件时使用，例如：

鼠标按下：当用户按下鼠标键时触发。
鼠标释放：当用户释放鼠标键时触发。
鼠标移动：当用户移动鼠标时触发。

示例

假设你需要处理用户的鼠标点击事件来选择一个物体：

// 创建一个场景、相机和渲染器
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;

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.MeshStandardMaterial({
    
     color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

// 添加光线来照亮场景
const light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(0, 1, 1).normalize();
scene.add(light);

// 鼠标事件处理函数
function handleMouseEvent(event) {
    
    
    event.preventDefault();

    // 计算鼠标点击的坐标
    const mouseX = (event.clientX / window.innerWidth) * 2 - 1;
    const mouseY = -(event.clientY / window.innerHeight) * 2 + 1;

    // 将坐标转换为射线
    const raycaster = new THREE.Raycaster();
    raycaster.setFromCamera(new THREE.Vector2(mouseX, mouseY), camera);

    // 检查是否有物体被点击
    const intersects = raycaster.intersectObjects(scene.children, true);

    if (intersects.length > 0) {
    
    
        console.log("Clicked on:", intersects[0].object);
        intersects[0].object.material.color.set(0xff0000); // 改变颜色
    }
}

// 添加鼠标事件监听器
window.addEventListener('mousedown', (event) => {
    
    
    if (event.button === THREE.MOUSE.LEFT) {
    
    
        handleMouseEvent(event);
    }
});

// 渲染循环
function animate() {
    
    
    requestAnimationFrame(animate);

    renderer.render(scene, camera);
}
animate();

在这个示例中，我们添加了一个鼠标点击事件的处理函数 handleMouseEvent，当用户点击鼠标左键时，该函数会计算鼠标点击的位置，并使用射线投射（raycasting）技术检测场景中的物体是否被点击。

常量的使用

在上述示例中，我们使用 THREE.MOUSE.LEFT 来检查是否为鼠标左键点击。如果需要处理中键或右键点击，可以相应地使用 THREE.MOUSE.MIDDLE 和 THREE.MOUSE.RIGHT。

window.addEventListener('mousedown', (event) => {
    
    
    if (event.button === THREE.MOUSE.LEFT) {
    
    
        // 处理左键点击
    } else if (event.button === THREE.MOUSE.MIDDLE) {
    
    
        // 处理中键点击
    } else if (event.button === THREE.MOUSE.RIGHT) {
    
    
        // 处理右键点击
    }
});

总结

THREE.MOUSE 是 Three.js 中用于标识鼠标不同按键的一个枚举对象。它包含了一些预定义的常量，如 THREE.MOUSE.LEFT、THREE.MOUSE.MIDDLE 和 THREE.MOUSE.RIGHT，用于处理鼠标的左键、中键和右键点击事件。

在实际应用中，结合 THREE.Raycaster 和其他 Three.js 功能，可以轻松实现各种基于鼠标输入的交互功能，如物体的选择、拖动等。这些常量使得在 Three.js 中处理鼠标的点击和其他交互事件变得更加简单和直观。

需要注意的是，Three.js 的版本可能会有所不同，因此具体的方法和属性可能会有所变化。在实际使用时，请参考最新的 Three.js 文档。