three.js增加点击事件

2021-01-19

three.js增加点击事件

实现

增加点击事件的函数

二维

methods: {
    onDocumentMouseDown: function (event) {
      event.preventDefault()

      // 通过鼠标点击的位置计算出raycaster所需要的点的位置，以屏幕中心为原点，值的范围为-1到1
      let mouse = new Three.Vector2(
        (event.clientX / window.innerWidth) * 2 - 1,
        -(event.clientY / window.innerHeight) * 2 + 1
      )

      // 通过鼠标点的位置和当前相机的矩阵计算出raycaster
      let raycaster = new Three.Raycaster()
      raycaster.setFromCamera(mouse, this.camera)

      // 获取raycaster直线和所有模型相交的数组集合
      let intersects = raycaster.intersectObjects(this.scene.children, true)
      console.log(intersects)
      
      alert("clickde!!")

      //currObj为点击到的第一个对象
      let currObj = intersects[0].object;
      console.log(currObj.name)
      // if (currObj.name == "XXX") {
      // 点击对象执行的方法
      // }
    }
}

三维

methods: {
    onDocumentMouseDown: function (event) {
      event.preventDefault()

      // 基于屏幕上的点击位置创建一个向量
      let vector = new Three.Vector3(
        (event.clientX / window.innerWidth) * 2 - 1,
        -(event.clinetY / window / innerHeight) * 2 + 1,
        0.5
      )

      // 用unproject函数将点击位置转换成Three.js场景中的坐标
      vector = vector.unproject(this.camera)

      // 用THREE.Raycaster对象向点击位置发射光线
      let raycaster = new Three.Raycaster(
        this.camera.position,
        vector.sub(this.camera.position).normalize()
      );

      // 计算射线相机捕捉到的对象，返回一个数组，根据距离相机远近排列
      // 第二个参数设置是否递归，默认false；当scene添加了Group对象实例时，需要设置此参数为true
      // 第一个参数可不传、穿一个或传多个scene.children
      let intersects = raycaster.intersectObjects(
        this.scene.children,
        true
      );
      console.log(intersects)

      alert("clickde!!");

      //currObj为点击到的第一个对象
      let currObj = intersects[0].object;
      console.log(currObj.name)
      // if (currObj.name == "XXX") {
      // 点击对象执行的方法
      // }
    }
}

执行点击函数

mounted () {
    document.addEventListener("dblclick", this.onDocumentMouseDown, false)
}

Vue下完整component代码

<template>
<body></body>
</template>

<script>
import * as Three from 'three';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';

export default {
  name: 'Test',
  data () {
    return {
      scene: null,      // 场景
      camera: null,     // 相机
      renderer: null,   // 渲染器
      controls: null,   // 控制器
    }
  },
  methods: {
    init: function () {
      // 新建空白场景
      this.scene = new Three.Scene()

      // 新建透视相机
      this.camera = new Three.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 1000)
      //设置相机位置
      this.camera.position.set(-10, 40, -180)
      // 相机指向原点
      this.camera.lookAt(new Three.Vector3(0, 0, 0))

      // 设置灯光，环境光
      let light = new Three.AmbientLight(0xffffff)
      this.scene.add(light)

      // 初始化渲染器
      this.renderer = new Three.WebGLRenderer({ antialias: true })
      this.renderer.setSize(window.innerWidth, window.innerHeight)
      // this.renderer.setClearColor("#39609B")
      document.body.appendChild(this.renderer.domElement)

      // 初始化控制器
      this.controls = new OrbitControls(this.camera, this.renderer.domElement)

      // 加载外部模型
      // 模型文件放在静态路径文件夹
      let loader = new GLTFLoader()
      let self = this
      loader.load('../../static/glTF/finish/Unity2GLTF.gltf', function (gltf) {
        // 添加场景
        self.scene.add(gltf.scene)
      }, function (xhr) {
        console.log((xhr.loaded / xhr.total * 100) + '% loaded')
      }, function (error) {
        console.error(error, 'load error!')
      });
    },
    onDocumentMouseDown: function (event) {
      event.preventDefault()

      // 通过鼠标点击的位置计算出raycaster所需要的点的位置，以屏幕中心为原点，值的范围为-1到1
      let mouse = new Three.Vector2(
        (event.clientX / window.innerWidth) * 2 - 1,
        -(event.clientY / window.innerHeight) * 2 + 1
      )

      // 通过鼠标点的位置和当前相机的矩阵计算出raycaster
      let raycaster = new Three.Raycaster()
      raycaster.setFromCamera(mouse, this.camera)

      // 获取raycaster直线和所有模型相交的数组集合
      let intersects = raycaster.intersectObjects(this.scene.children, true)
      console.log(intersects)

      //currObj为点击到的第一个对象
      let currObj = intersects[0].object;
      alert(currObj.name)
      // if (currObj.name == "XXX") {
      // 点击对象执行的方法
      // }
    },
    animate: function () {
      // 动画系统
      requestAnimationFrame(this.animate)
      this.renderer.render(this.scene, this.camera)
    }
  },
  mounted () {
    this.init()
    document.addEventListener("dblclick", this.onDocumentMouseDown, false)
    this.animate()
  }
}
</script>
<style scoped>
body {
  overflow: hidden;
}
</style>

补充

若建模工具导出的GLTF模型为文件夹，则three.js程序的static文件夹需全部引入。
但GLTFLoader().load()只加载.gltf后缀的文件。

详细说明文章

Three.js获取鼠标点击的三维坐标事件：https://my.oschina.net/u/4258573/blog/3327468
Three.js 通过THREE.Raycaster给模型绑定点击事件：https://blog.csdn.net/qq_30100043/article/details/79054862