threejs基础案例之十：模拟点击事件

// 假设我们已经有了threejs的基础场景和一个名为`mesh`的网格对象
 
// 创建鼠标位置对象，用于存储鼠标位置信息
var mouse = new THREE.Vector2();
 
// 监听鼠标点击事件
function onMouseClick(event) {
    // 将浏览器的2D坐标转换为three.js的标准设备坐标(-1到+1)
    mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
    mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
 
    // 更新鼠标位置对象
    raycaster.setFromCamera(mouse, camera);
 
    // 计算鼠标当前位置的所有物体
    var intersects = raycaster.intersectObjects(scene.children);
 
    // 如果存在交点
    if (intersects.length > 0) {
        // 取得最近的交点
        var intersect = intersects[0];
 
        // 如果交点的对象是我们之前定义的mesh
        if (intersect.object == mesh) {
            // 执行模型的某些动作，比如旋转等
            // 例如，旋转模型
            mesh.rotation.x += 0.1;
            mesh.rotation.y += 0.1;
        }
    }
}
 
// 为window添加点击事件监听
window.addEventListener('click', onMouseClick, false);
 
// 注意：以上代码仅作为示例，实际使用时需要结合实际的Three.js场景和对象。

这段代码首先定义了一个鼠标位置对象mouse，用于存储鼠标在屏幕上的位置。然后定义了一个onMouseClick函数，该函数将在用户点击窗口时被调用。在这个函数中，我们更新鼠标位置对象，并使用raycaster来检测鼠标点击位置上是否有物体，如果有，则执行相应的动作，比如旋转模型。最后，我们为window添加了点击事件的监听。