three.js 中如何实现网格表面上的点阵拖动限制？

2024-03-02 17:04:50

引言

当开发者希望在三维空间中让用户与对象交互时，例如通过鼠标或触摸屏拖动物体上的特定点，可能会遇到如何将这些操作限制在一个目标网格表面的问题。本文旨在提供一种解决方案，以确保点只能沿着指定的网格移动。

实现步骤概览

实现这一功能主要分为几个部分：创建网格、定义点阵及其初始位置、添加交互逻辑以及处理拖动事件。每个环节都需精心设计，保证最终效果既精确又稳定。

创建基础网格与材质

首先需要在 Three.js 环境中建立一个基础网格，并设置适当的材质以展示其表面。这一步骤是整个项目的基础，不可或缺。

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

// 创建一个平面作为示例网格
let geometry = new THREE.PlaneGeometry(4, 2);
let material = new THREE.MeshBasicMaterial({ color: 0x8888ff });
let planeMesh = new THREE.Mesh(geometry, material);
scene.add(planeMesh);

定义点阵及其初始位置

接下来，需要创建代表用户交互点的点对象，并设置它们在网格上的初始位置。这可以通过定义点的位置数组并将其与网格相关联实现。

let pointsArray = [];
// 示例：两个点位于平面的不同位置
pointsArray.push(new THREE.Vector3(-1, 0.5, 0));
pointsArray.push(new THREE.Vector3(1, -0.5, 0));

// 将这些点添加到场景中，以便可视化它们的位置变化。
for (let point of pointsArray) {
    let sphere = new THREE.Mesh(new THREE.SphereGeometry(0.05), new THREE.MeshBasicMaterial({ color: 0xff00ff }));
    scene.add(sphere);
}

添加交互逻辑与拖动处理

为了限制点只能在网格上移动，需要实现一个事件监听器来捕捉用户的输入，并根据这些输入更新点的位置。这包括计算用户试图将点拖动到的新位置是否仍在网格表面上。

// 假设我们使用 raycasting 来确定鼠标点击或触摸位置对应的网格表面点。
function onMouseMove(event) {
    // 更新 mouse 对象的值，x 和 y 的范围是 (-1 到 1)
    const x = (event.clientX / window.innerWidth) * 2 - 1;
    const y = -(event.clientY / window.innerHeight) * 2 + 1;

    // 设置射线的起点为屏幕中心
    raycaster.setFromCamera(new THREE.Vector2(x, y), camera);

    const intersects = raycaster.intersectObjects(scene.children);
    
    if (intersects.length > 0 && intersects[0].object === planeMesh) {
        // 确保只更新与平面网格相交的点
        for (let point of pointsArray) {
            let sphere = scene.getObjectByName(`point${pointsArray.indexOf(point)}`);
            sphere.position.copy(intersects[0].point);
        }
    }
}
window.addEventListener('mousemove', onMouseMove, false);