three.js 鼠标经过 物体变色

Three.js是一个基于WebGL的JavaScript库，用于创建逼真的3D图形在浏览器中运行。如果你想在Three.js中实现鼠标经过物体时颜色变化的效果，通常你可以通过监听鼠标事件（如`raycaster.intersectObject`）和`THREE.CSS3DObject`或`THREE.Object3D`结合来实现。CSS3DObjects允许你将2D CSS样式应用于3D模型，而Object3Ds则提供了更丰富的交互。

以下是一个简单的步骤概述：

1. 创建一个`CSS3DRenderer`，它允许你在场景中使用CSS样式来渲染3D对象。
2. 添加一个`CSS3DObject`到场景中，这将是鼠标交互的对象。
3. 设置一个事件监听器（比如`raycaster拾取事件`），当鼠标移动并击中这个对象时，触发回调函数。
4. 在回调函数中，获取当前鼠标位置和选中的对象，并改变其CSS样式（如`color`属性），使物体的颜色发生变化。

示例代码片段如下：

// 初始化Three.js
const scene = new THREE.Scene();
const cssRenderer = new THREE.CSS3DRenderer();
cssRenderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(cssRenderer.domElement);

// 创建CSS3D对象
const object = new THREE.CSS3DObject(yourObjectDiv); // 用HTML元素替换yourObjectDiv
scene.add(object);

// 鼠标拾取事件
const raycaster = new THREE.Raycaster();
const mouse = new THREE.Vector2();

function onMouseMove(event) {
  mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
  mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
  raycaster.setFromCamera(mouse, camera);

  const intersects = raycaster.intersectObject(object);
  if (intersects.length > 0) {
    object.style.color = 'red'; // 更改颜色
  } else {
    object.style.color = 'initial'; // 或者恢复原始颜色
  }
}

document.addEventListener('mousemove', onMouseMove);

// 其他Three.js设置和初始化...