如何在悬停时高亮显示立方体表面？THREE.js

// 引入THREE.js库
import * as THREE from 'three';

// 创建场景、相机和渲染器
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 创建立方体几何体和材质
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshPhongMaterial({ color: 0x00ff00 }); // 原始材质
const highlightMaterial = new THREE.MeshPhongMaterial({ color: 0xff0000 }); // 高亮材质

// 创建立方体并添加到场景中
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

// 创建光源
const light = new THREE.PointLight(0xffffff, 1, 100);
light.position.set(0, 0, 5);
scene.add(light);

// 监听鼠标移动事件
document.addEventListener('mousemove', onMouseMove, false);

// 鼠标移动事件处理函数
function onMouseMove(event) {
  // 计算鼠标在屏幕上的位置
  const mouse = new THREE.Vector2();
  mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
  mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;

  // 创建一个射线(Raycaster)从相机位置发射，检测与立方体相交的表面
  const raycaster = new THREE.Raycaster();
  raycaster.setFromCamera(mouse, camera);
  const intersects = raycaster.intersectObject(cube);

  // 如果与立方体相交，则将相交的表面的材质设置为高亮材质，否则恢复为原始材质
  if (intersects.length > 0) {
    cube.material = highlightMaterial;
  } else {
    cube.material = material;
  }
}

// 渲染函数，每帧调用一次，更新场景和相机
function animate() {
  requestAnimationFrame(animate);
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;
  renderer.render(scene, camera);
}
animate();