如何使用javascript在单击3D模态成员时突出显示确切的成员信息

// 创建成员对象
var member1 = {
  position: { x: 0, y: 0, z: 0 },
  color: 0xff0000, // 红色
  size: 1,
  info: "成员1的详细信息"
};

// 创建场景和渲染器
var scene = new THREE.Scene();
var renderer = new THREE.WebGLRenderer();
// 设置渲染器的大小和容器
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 创建成员的几何体和材质
var geometry = new THREE.BoxGeometry(member1.size, member1.size, member1.size);
var material = new THREE.MeshBasicMaterial({ color: member1.color });
var memberMesh = new THREE.Mesh(geometry, material);
memberMesh.position.set(member1.position.x, member1.position.y, member1.position.z);

// 将成员添加到场景中
scene.add(memberMesh);

// 监听鼠标点击事件
document.addEventListener('click', onMouseClick, false);

// 鼠标点击事件处理程序
function onMouseClick(event) {
  // 获取鼠标点击的位置
  var mouse = new THREE.Vector2();
  mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
  mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;

  // 使用射线投射来确定点击的成员
  var raycaster = new THREE.Raycaster();
  raycaster.setFromCamera(mouse, camera);
  var intersects = raycaster.intersectObjects(scene.children);

  if (intersects.length > 0) {
    // 突出显示点击的成员
    var clickedMember = intersects[0].object;
    clickedMember.material.color.set(0x00ff00); // 将颜色改为绿色
    clickedMember.scale.set(1.2, 1.2, 1.2); // 放大成员

    // 显示成员的详细信息
    var infoBox = document.createElement('div');
    infoBox.innerHTML = member1.info;
    document.body.appendChild(infoBox);
  }
}

// 渲染场景
function render() {
  requestAnimationFrame(render);
  renderer.render(scene, camera);
}
render();