vue3中如何使用three,js实现点击事件

在Vue 3中使用Three.js实现点击事件的步骤如下：

1. 在Vue项目中安装Three.js库。

npm install three

2. 在Vue组件中引入Three.js库。

import * as THREE from 'three';

3. 创建一个Three.js场景，并在场景中添加需要响应点击事件的物体。

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

// 创建一个立方体
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);

// 将立方体添加到场景中
scene.add(cube);

4. 在Vue组件的模板中创建一个canvas元素，并且设置该元素的点击事件。

<template>
  <div>
    <canvas ref="canvas" @click="onClick"></canvas>
  </div>
</template>

5. 在Vue组件中创建一个Three.js渲染器，并将渲染器的输出结果显示在canvas元素中。

// 在Vue组件中创建一个Three.js渲染器
const renderer = new THREE.WebGLRenderer({ canvas: this.$refs.canvas });

// 将渲染器的输出结果显示在canvas元素中
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

6. 实现点击事件处理函数。

onClick(event) {
  // 获取鼠标点击位置
  const x = event.clientX;
  const y = event.clientY;

  // 将鼠标点击位置转换为Three.js中的坐标系
  const mouse = new THREE.Vector2();
  mouse.x = (x / window.innerWidth) * 2 - 1;
  mouse.y = -(y / window.innerHeight) * 2 + 1;

  // 创建一个Three.js射线对象
  const raycaster = new THREE.Raycaster();
  raycaster.setFromCamera(mouse, camera);

  // 判断射线是否与物体相交
  const intersects = raycaster.intersectObjects(scene.children);
  if (intersects.length > 0) {
    console.log('点击到了立方体');
  }
}

完整代码示例：

<template>
  <div>
    <canvas ref="canvas" @click="onClick"></canvas>
  </div>
</template>

<script>
import * as THREE from 'three';

export default {
  mounted() {
    // 创建场景
    const scene = new THREE.Scene();

    // 创建一个立方体
    const geometry = new THREE.BoxGeometry();
    const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
    const cube = new THREE.Mesh(geometry, material);

    // 将立方体添加到场景中
    scene.add(cube);

    // 在Vue组件中创建一个Three.js渲染器
    const renderer = new THREE.WebGLRenderer({ canvas: this.$refs.canvas });

    // 将渲染器的输出结果显示在canvas元素中
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

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

    // 渲染场景
    function animate() {
      requestAnimationFrame(animate);
      cube.rotation.x += 0.01;
      cube.rotation.y += 0.01;
      renderer.render(scene, camera);
    }
    animate();

    // 实现点击事件处理函数
    this.onClick = function(event) {
      // 获取鼠标点击位置
      const x = event.clientX;
      const y = event.clientY;

      // 将鼠标点击位置转换为Three.js中的坐标系
      const mouse = new THREE.Vector2();
      mouse.x = (x / window.innerWidth) * 2 - 1;
      mouse.y = -(y / window.innerHeight) * 2 + 1;

      // 创建一个Three.js射线对象
      const raycaster = new THREE.Raycaster();
      raycaster.setFromCamera(mouse, camera);

      // 判断射线是否与物体相交
      const intersects = raycaster.intersectObjects(scene.children);
      if (intersects.length > 0) {
        console.log('点击到了立方体');
      }
    }
  },
  beforeUnmount() {
    // 销毁事件处理函数
    this.onClick = null;
  }
};
</script>