vue + threejs 鼠标选中物体

<script setup>
// This starter template is using Vue 3 <script setup> SFCs
// Check out https://vuejs.org/api/sfc-script-setup.html#script-setup
import HelloWorld from './components/HelloWorld.vue'
import * as THREE from 'three'
import { BoxGeometry, MeshBasicMaterial } from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls' 


let scene, camera, renderer, raycaster

scene = new THREE.Scene()
scene.background = new THREE.Color(0xf0f0f0)

camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 2000)
camera.position.set(600, 700, 650)
camera.lookAt(scene.position)
scene.add(camera)

renderer = new THREE.WebGLRenderer()
renderer.setSize(window.innerWidth, window.innerHeight)
document.body.appendChild(renderer.domElement)

const axesHelper = new THREE.AxesHelper(300)
scene.add(axesHelper)


let array = []

let geometry = new BoxGeometry(100, 100, 100)


for (let i = 0; i < 20; i++){
  let material = new MeshBasicMaterial({color: Math.random() * 0xffffff, opacity: 0.5})
  let mesh = new THREE.Mesh(geometry, material)
  mesh.position.x = Math.random() * 800 - 400
  mesh.position.y = Math.random() * 800 - 400
  mesh.position.z = Math.random() * 800 - 400
  scene.add(mesh)
  array.push(mesh)
}

renderer.render(scene, camera)

// 创建一个控制器对象  相机  dom对象
var controls = new OrbitControls(camera,renderer.domElement)
// 监听控制器的鼠标事件，执行渲染内容
controls.addEventListener('change',()=>{
  renderer.render(scene,camera)
})

raycaster = new THREE.Raycaster()

let mouse = new THREE.Vector2()

document.addEventListener('mousemove', onDocumnetMouseMove, false)

function onDocumnetMouseMove(event){
	mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
	mouse.y = -( event.clientY / window.innerHeight ) * 2 + 1;
  console.log(mouse)
}

// 鼠标相交的物体
let INTERSECTED


function render(){
  requestAnimationFrame(render)
  renderer.render(scene, camera)
  raycaster.setFromCamera(mouse, camera)
  let intersects = raycaster.intersectObjects(scene.children)
  console.log(intersects.length)


  if(intersects.length > 0){
    if(INTERSECTED != intersects[0].object){
      if(INTERSECTED){
        INTERSECTED.material.color.setHex(INTERSECTED.currentHex)
      }
      INTERSECTED = intersects[0].object
      INTERSECTED.currentHex = INTERSECTED.material.color.getHex()
      INTERSECTED.material.color.set(0xff0000)
    }
  }else{
    if(INTERSECTED){
      INTERSECTED.material.color.set(INTERSECTED.currentHex)
    }
    INTERSECTED = null
  }

}
render()

</script>

<template>
  <div>
  </div>
</template>

<style>
body {
  margin: 0;
}
</style>