three.js 第九节 - 光线投射实现3d物体交互事件

这个程序的效果是，创建3个球，位置分别在-4，0，4的位置，并且，点击哪个球，哪个球的颜色就变成红色

// @ts-nocheck
// 引入three.js
import * as THREE from 'three'
// 导入轨道控制器
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'

//#region
const scence = new THREE.Scene()

const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000)
camera.position.set(2, 2, 15) // 设置相机位置
camera.lookAt(0, 0, 0)

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

// -----------------------------------------------------------------
// -----------------------------------------------------------------

	// 创建3个球
	const sphere_1 = new THREE.Mesh(
	  new THREE.SphereGeometry(1, 32, 32),
	  new THREE.MeshBasicMaterial({
	    color: 0x00ff00
	  })
	)
	sphere_1.position.x = -4
	scence.add(sphere_1)
	
	const sphere_2 = new THREE.Mesh(
	  new THREE.SphereGeometry(1, 32, 32),
	  new THREE.MeshBasicMaterial({
	    color: 0x0000ff
	  })
	)
	scence.add(sphere_2)
	
	const sphere_3 = new THREE.Mesh(
	  new THREE.SphereGeometry(1, 32, 32),
	  new THREE.MeshBasicMaterial({
	    color: 0xff00ff
	  })
	)
	sphere_3.position.x = 4
	scence.add(sphere_3)
	
	/*
	  创建射线
	  Raycaster：这个类用于进行raycasting(光线投射)，光线投射用于进行鼠标拾取（在三维空间中计算出鼠标移过了什么物体）
	*/
	const raycaster = new THREE.Raycaster()
	// 创建鼠标向量
	const mouse = new THREE.Vector2()
	
	window.addEventListener('click', event => {
	  // console.log(event.clientX, event.clientY)
	
	  // 设置鼠标向量的x、y值【此公式适用于：相机、渲染器的大小均为1920 * 1080的情况下】
	  mouse.x = (event.clientX / window.innerWidth) * 2 - 1
	  mouse.y = -((event.clientY / window.innerHeight) * 2 - 1)
	  console.log(mouse.x, '----', mouse.y)
	
	  // 通过摄像机和鼠标位置更新射线
	  raycaster.setFromCamera(mouse, camera)
	
	  // 计算物体和射线的焦点
	  // const intersects = raycaster.intersectObjects(scence.children) // 会把场景scence里面所有的东西都加进去
	  const intersects = raycaster.intersectObjects([sphere_1, sphere_2, sphere_3]) // 只加场景scence里面的sphere_1、sphere_2、sphere_3这3个东西
	
	  if (intersects.length > 0) {
	    // 如果选中了
	    if (intersects[0].object._isSelect) {
	      intersects[0].object._isSelect = false // 清除选中状态
	      // 将它的颜色，设置为原来的颜色
	      intersects[0].object.material.color.set(intersects[0].object._originColor)
	      return
	    }
	
	    // 如果没选中，这个`_isSelect`是我自定义的
	    intersects[0].object._isSelect = true
	    // getHex()：获取十六进制颜色字符串，这里记录它原来的颜色
	    intersects[0].object._originColor = intersects[0].object.material.color.getHex()
	    intersects[0].object.material.color.set(0xff0000) // 设置为红色
	  }
	
	  console.log('intersects=', intersects)
	})

// -----------------------------------------------------------------
// -----------------------------------------------------------------

//#region
// 添加世界坐标辅助器，红色-X轴； 绿色-Y轴； 蓝色-Z轴
const axesHelper = new THREE.AxesHelper(5)
scence.add(axesHelper)

const controls = new OrbitControls(camera, renderer.domElement)
// 设置带阻尼的惯性
// controls.enableDamping = true
// 设置阻尼系数
controls.dampingFactor = 0.05

// 每一帧根据控制器更新画面
function render() {
  // 如果，需要控制器带有阻尼效果，或者自动旋转等效果，就需要加入`controls.update()`
  controls.update()
  // `requestAnimationFrame`：在屏幕渲染下一帧画面时，触发回调函数来执行画面的渲染
  requestAnimationFrame(render)

  renderer.render(scence, camera)
}
render()
//#endregion