获取对悬停对象three.js react的引用

import React, { useRef, useEffect } from "react";
import * as THREE from "three";

const Scene = () => {
  const containerRef = useRef(null);
  const sceneRef = useRef(null);
  const cameraRef = useRef(null);
  const rendererRef = useRef(null);
  const mouseRef = useRef(new THREE.Vector2());
  const raycasterRef = useRef(new THREE.Raycaster());

  useEffect(() => {
    const container = containerRef.current;

    // 创建场景
    const scene = new THREE.Scene();
    sceneRef.current = scene;

    // 创建相机
    const camera = new THREE.PerspectiveCamera(
      75,
      window.innerWidth / window.innerHeight,
      0.1,
      1000
    );
    camera.position.z = 5;
    cameraRef.current = camera;

    // 创建渲染器
    const renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.setSize(window.innerWidth, window.innerHeight);
    container.appendChild(renderer.domElement);
    rendererRef.current = renderer;

    // 添加交互事件监听器
    container.addEventListener("mousemove", handleMouseMove);

    // 创建和添加三维对象到场景中
    const geometry = new THREE.BoxGeometry();
    const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
    const cube = new THREE.Mesh(geometry, material);
    scene.add(cube);

    // 渲染场景
    animate();

    return () => {
      // 移除交互事件监听器
      container.removeEventListener("mousemove", handleMouseMove);
    };
  }, []);

  const handleMouseMove = (event) => {
    const container = containerRef.current;
    const rect = container.getBoundingClientRect();
    const x = ((event.clientX - rect.left) / rect.width) * 2 - 1;
    const y = -((event.clientY - rect.top) / rect.height) * 2 + 1;

    mouseRef.current.set(x, y);
  };

  const animate = () => {
    const scene = sceneRef.current;
    const camera = cameraRef.current;
    const renderer = rendererRef.current;
    const raycaster = raycasterRef.current;
    const mouse = mouseRef.current;

    // 更新光线的起点和方向
    raycaster.setFromCamera(mouse, camera);

    // 检测与光线相交的对象
    const intersects = raycaster.intersectObjects(scene.children);

    if (intersects.length > 0) {
      // 处理交互对象的操作
      const intersectedObject = intersects[0].object;
      console.log("悬停对象：", intersectedObject);
    }

    // 渲染场景
    renderer.render(scene, camera);

    // 循环渲染
    requestAnimationFrame(animate);
  };

  return <div ref={containerRef} />;
};

export default Scene;