Three.js给模型添加点击事件

一、为什么需要添加点击事件？

在three.js的场景中，我们可以通过添加点击事件在模型上进行操作，例如模型的拖动、旋转等。这不仅丰富了用户的交互体验，也在一定程度上提高了模型的可操作性。

二、添加点击事件的方式

三、代码示例

下面是一个简单的示例，展示了如何使用射线检测来在模型上添加点击事件：

// 创建场景
var scene = new THREE.Scene();

// 创建相机
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;

// 创建渲染器
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 创建立方体模型
var geometry = new THREE.BoxGeometry(1, 1, 1);
var material = new THREE.MeshBasicMaterial({color: 0xff0000});
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);

// 创建射线检测器
var raycaster = new THREE.Raycaster();
var mouse = new THREE.Vector2();

// 添加鼠标事件监听器
document.addEventListener('mousedown', onDocumentMouseDown, false);

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

   // 计算鼠标在canvas中的坐标
   mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
   mouse.y = - (event.clientY / window.innerHeight) * 2 + 1;

   // 把鼠标坐标转换为three.js中的坐标
   raycaster.setFromCamera(mouse, camera);

   // 计算射线和立方体的交点
   var intersects = raycaster.intersectObjects([cube]);

   // 处理点击事件
   if (intersects.length > 0) {
      cube.rotation.x += 0.1;
      cube.rotation.y += 0.1;
   }
}

// 渲染场景
function render() {
   requestAnimationFrame(render);
   renderer.render(scene, camera);
}
render();

四、总结

通过射线检测和在模型中添加userData两种方式，我们可以为three.js中的模型添加点击事件，从而实现各种交互效果。添加点击事件不仅可以提高用户的交互体验，还可以提高模型的可操作性。