学习threejs，通过THREE.Raycaster给模型绑定点击事件

news2024/11/25 22:40:53

👨‍⚕️ 主页： gis分享者
👨‍⚕️ 感谢各位大佬点赞👍 收藏⭐ 留言📝 加关注✅!
👨‍⚕️ 收录于专栏：threejs gis工程师

文章目录

一、🍀前言
- 1.1 ☘️THREE.Raycaster光线投射概念
二、🍀通过THREE.Raycaster给模型绑定点击事件
- 1. ☘️实现思路
- 2. ☘️代码样例

一、🍀前言

本文详细介绍如何基于threejs在三维场景中实现通过THREE.Raycaster给模型绑定点击事件，亲测可用。希望能帮助到您。一起学习，加油！加油！

1.1 ☘️THREE.Raycaster光线投射概念

THREE.Raycaster 光线投射，常用于和3D图形之间做一些点击事件和交互操作，也可用于碰撞检测等
创建方法：
Raycaster( origin : Vector3, direction : Vector3, near : Float, far : Float )
origin：光线投射的原点向量。
direction：向射线提供方向的方向向量，应当被标准化。
near：返回的所有结果比near远。near不能为负值，其默认值为0。
far：返回的所有结果都比far近。far不能小于near，其默认值为Infinity（正无穷。）
属性
far：远距离因数（投射远点）。这个值表明哪些对象可以基于该距离而被raycaster所丢弃。这个值不应当为负，并且应当比near属性大。
near：近距离因数（投射近点）。这个值表明哪些对象可以基于该距离而被raycaster所丢弃。这个值不应当为负，并且应当比far属性小。
camera : 对依赖于视图的对象进行光线投射时使用的相机。默认为空。
layers：Raycaster 在执行相交测试时使用它来选择性地忽略 3D 对象。
ray：用于进行光线投射的射线。

二、🍀通过THREE.Raycaster给模型绑定点击事件

1. ☘️实现思路

1、初始化renderer渲染器
2、初始化Scene三维场景
3、初始化camera相机，定义相机位置 camera.position.set，定义相机方向lookAt。
4、加载模型：添加THREE.AxesHelper坐标辅助工具，添加3000个位置随机的THREE.BoxGeometry立方体，scene场景中加入坐标辅助工具和立方体。
5、创建THREE.Raycaste光线投射对象，创建onMouseClick事件，定义THREE.Raycaster光线投射与scene中立方体交互事件。
6、加入controls，加入stats监控器，监控帧数信息。

2. ☘️代码样例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>learn27(通过THREE.Raycaster给模型绑定点击事件)</title>
    <script src="lib/threejs/127/three.js-master/build/three.js"></script>
    <script src="lib/threejs/127/three.js-master/examples/js/utils/SceneUtils.js"></script>
    <script src="lib/threejs/127/three.js-master/examples/js/controls/OrbitControls.js"></script>
    <script src="lib/threejs/127/three.js-master/examples/js/libs/stats.min.js"></script>
    <script src="lib/threejs/127/three.js-master/examples/js/libs/dat.gui.min.js"></script>
</head>
<style>
    body {
        margin: 0;
    }

    canvas {
        width: 100%;
        height: 100%;
        display: block;
    }
</style>
<body onload="draw()">
</body>
<script>
  var renderer
  var initRender = () => {
    renderer = new THREE.WebGLRenderer({antialias: true})
    renderer.setClearColor(0xffffff)
    renderer.setSize(window.innerWidth, window.innerHeight)
    document.body.appendChild(renderer.domElement)
  }
  var scene
  var initScene = () => {
    scene = new THREE.Scene()
  }
  var camera
  var initCamera = () => {
    camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000)
    camera.position.set(0, 40, 100)
    camera.lookAt(new THREE.Vector3(0, 0, 0))
  }
  var initModel = () => {
    var helper = new THREE.AxesHelper(20)
    scene.add(helper)

    var s = 25
    var cube = new THREE.BoxGeometry(s, s, s)
    for (var i = 0; i < 3000; i++) {
      var material = new THREE.MeshBasicMaterial({color: randomColor()})
      var mesh = new THREE.Mesh(cube, material)
      mesh.position.x = 800 * ( 2.0 * Math.random() - 1.0 )
      mesh.position.y = 800 * ( 2.0 * Math.random() - 1.0 )
      mesh.position.z = 800 * ( 2.0 * Math.random() - 1.0 )

      mesh.rotation.x = Math.random() * Math.PI
      mesh.rotation.y = Math.random() * Math.PI
      mesh.rotation.z = Math.random() * Math.PI

      mesh.updateMatrix()

      scene.add(mesh)
    }
  }

  var randomColor = () => {
    var arrHex = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "a", "b", "c", "d", "e", "f"],
      strHex = "#",
      index;
    for (var i = 0; i < 6; i++) {
      index = Math.round(Math.random() * 15)
      strHex += arrHex[index]
    }
    return strHex
  }

  var raycaster = new THREE.Raycaster()
  var mouse = new THREE.Vector2()

  var onMouseClick = (event) => {
    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)
    console.log(intersects)
    for (var i = 0; i < intersects.length; i++) {
      intersects[i].object.material.color.set(0xff0000)
    }
  }

  window.addEventListener('click', onMouseClick, false)
  var stats
  var initStats = () => {
    stats = new Stats()
    document.body.appendChild(stats.dom)
  }
  var controls
  var initControls = () => {
    controls = new THREE.OrbitControls(camera, renderer.domElement)
    controls.enableDamping = true
  }
  var render = () => {
    renderer.render(scene, camera)
  }
  var onWindowResize = (event) => {
    camera.aspect = window.innerWidth / window.innerHeight
    camera.updateProjectionMatrix()
    render()
    renderer.setSize(window.innerWidth, window.innerHeight)
  }
  var animate = () => {
    render()
    stats.update()
    controls.update()
    requestAnimationFrame(animate)
  }
  var draw = () => {
    initRender()
    initScene()
    initCamera()
    initModel()
    initStats()
    initControls()
    animate()

    window.onresize = onWindowResize
  }
</script>
</html>