Three.js点击模型弹出信息框

// ...existing code...

const raycaster = new THREE.Raycaster()

const mouse = new THREE.Vector2()

// 信息框

const infoBox = document.createElement('div')

infoBox.style.position = 'absolute'

infoBox.style.display = 'none'

infoBox.style.background = 'rgba(0,0,0,0.7)'

infoBox.style.color = '#fff'

infoBox.style.padding = '8px'

infoBox.style.borderRadius = '4px'

infoBox.style.pointerEvents = 'none'

document.body.appendChild(infoBox)

renderer.domElement.addEventListener('click', event => {

  // 计算鼠标位置（归一化设备坐标）

  const rect = renderer.domElement.getBoundingClientRect()

  mouse.x = ((event.clientX - rect.left) / rect.width) * 2 - 1

  mouse.y = -((event.clientY - rect.top) / rect.height) * 2 + 1

  raycaster.setFromCamera(mouse, camera)

  // 检查 tfModel 下所有 mesh

  const intersects = raycaster.intersectObject(tfModel, true)

  if (intersects.length > 0) {

    const mesh = intersects[0].object

    // 这里可以自定义显示内容

    infoBox.innerHTML = `名称: ${mesh.name || '无'}<br>材质: ${mesh.material?.name || '无'}`

    infoBox.style.left = event.clientX + 10 + 'px'

    infoBox.style.top = event.clientY + 10 + 'px'

    infoBox.style.display = 'block'

  } else {

    infoBox.style.display = 'none'

  }

})

// 可选：点击空白处隐藏信息框

document.addEventListener('click', e => {

  if (e.target !== renderer.domElement) {

    infoBox.style.display = 'none'

  }

}, true)

// ...existing code...