脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → Vue3+Three.js为模型添加点击事件

Vue3+Three.js实现为模型添加点击事件

 更新时间：2024年10月04日 10:14:15   作者：小杨同学0906  
本文主要介绍了如何在Vue3和Three.js环境中为模型添加点击事件监听,具体方法是利用Three.js的Vector2和Raycaster,首先,创建一个Vector2对象来获取鼠标位置；然后,创建一个Raycaster对象来投射光线

Vue3+Three.js为模型添加点击事件

监听鼠标点击事件

使用const mouse = new THREE.Vector2();鼠标位置；

使用Raycaster射线投射器，光线的位置。

// 射线投射器
const raycaster = new THREE.Raycaster();
const mouse = new THREE.Vector2();

const onMouseClick =(event) => {
  // 计算鼠标点击位置
  mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
  mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;

  // 更新射线投射方向
  raycaster.setFromCamera(mouse, camera);
  // 计算射线投射的物体交点
  const intersects = raycaster.intersectObjects(scene.children, true);
  if (intersects.length > 0) {
    // 点击到模型时的处理
    const selectedObject = intersects[0].object;
    // 检查点击的对象是否为模型
    if (selectedObject.name) {
      if (selectedObject.parent.position.z === 0) {
        selectedObject.parent.position.z += 10
      }else {
        selectedObject.parent.position.z -= 10
      }
    }

  }
}
// 鼠标点击事件监听器
window.addEventListener('click', onMouseClick, false);

通过鼠标的位置与光线的位置重合

来获取模型信息

if (intersects.length > 0) 成立的条件下，处理点击事件。

此处是将选中的模型组进行沿Z轴平移10个单位。

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

最新评论