three.js材质点击事件

要在three.js中添加材质点击事件，你可以使用鼠标交互和射线来实现。以下是一个基本的示例代码：

// 创建一个可交互的平面几何体
var geometry = new THREE.PlaneGeometry(200, 200);
var material = new THREE.MeshBasicMaterial({color: 0xff0000});
var mesh = new THREE.Mesh(geometry, material);
mesh.position.set(0, 0, -100);
scene.add(mesh);

// 创建一个射线
var raycaster = new THREE.Raycaster();
var mouse = new THREE.Vector2();

// 监听鼠标移动事件
function onMouseMove(event) {
  // 计算鼠标在屏幕上的位置
  mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
  mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
}

// 监听鼠标点击事件
function onClick(event) {
  // 将鼠标位置转换为three.js的向量
  mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
  mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;

  // 在场景中发射射线
  raycaster.setFromCamera(mouse, camera);

  // 计算射线和物体的交点
  var intersects = raycaster.intersectObjects(scene.children, true);

  if (intersects.length > 0) {
    // 如果射线和物体有交点，取第一个交点的对象
    var obj = intersects[0].object;
    
    // 判断对象的材质是否可选
    if (obj.material && obj.material.selectable) {
      // 执行点击事件
      obj.material.onClick(obj);
    }
  }
}

// 将事件添加到document上
document.addEventListener('mousemove', onMouseMove, false);
document.addEventListener('click', onClick, false);

在上面的代码中，首先创建了一个平面几何体和一个射线。然后监听鼠标移动和点击事件，并将鼠标位置转换为three.js的向量。在点击事件中，我们使用射线和场景中的所有对象进行交叉检测，如果有交点，就执行相应的点击事件。在这里，我们假设每个材质都有一个可选属性和一个点击事件，如果被点击的物体的材质可选，则执行该材质的点击事件。