ThreeJS场景添加点后无法显示问题求助

嘿，我来帮你排查这个点击后看不到点的问题！结合你提供的代码和Three.js的特性，常见的几个原因和解决思路如下：

1. 没有正确计算模型表面的交点坐标 #

你当前代码里的mouse.x和mouse.y是归一化设备坐标，不能直接作为点的世界坐标使用。必须通过Raycaster检测鼠标与模型的交点，才能得到模型表面的准确位置：

function onDocumentMouseDown(event) {
  mousePressed = true;
  clickCount++;
  
  // 修正坐标计算，用getBoundingClientRect更准确
  const rect = OriginalImg.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, OriginalImg.camera);
  // 递归检测场景内所有子对象（如果模型是嵌套的）
  const intersects = raycaster.intersectObjects(OriginalImg.scene.children, true);
  
  if (intersects.length > 0) {
    // 获取第一个交点的世界坐标
    const hitPoint = intersects[0].point;
    // 这里才是创建点的正确位置
    createClickPoint(hitPoint);
  }
}

// 封装创建点的函数
function createClickPoint(position) {
  // 创建点的几何体
  const pointGeometry = new THREE.BufferGeometry();
  const positions = new Float32Array([
    position.x, position.y, position.z
  ]);
  pointGeometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));
  
  // 配置PointsMaterial
  const pointMaterial = new THREE.PointsMaterial({
    color: 0xff0000, // 用鲜艳的颜色避免和背景/模型混淆
    size: 15, // 调大点确保能看到，根据模型尺寸调整
    sizeAttenuation: true // 可选：点大小随距离相机远近变化
  });
  
  // 创建点并添加到场景
  const point = new THREE.Points(pointGeometry, pointMaterial);
  OriginalImg.scene.add(point);
}

2. PointsMaterial参数设置不合理 #

• size太小：如果你的模型尺寸很大，默认的size:1会导致点几乎看不见，建议先调到10-20测试。
• 颜色与背景/模型重合：比如模型是白色、背景也是白色，点设白色就完全看不到，换个高对比度颜色（如红色）。
• 意外关闭depthTest：如果depthTest: false，点可能被模型遮挡在后面，默认是true，除非你手动修改过，否则不用管。

3. 渲染逻辑缺失 #

• 确保你的animate函数在持续渲染场景：

  function animate() {
    requestAnimationFrame(animate);
    OriginalImg.renderer.render(OriginalImg.scene, OriginalImg.camera);
    SegmentImg.renderer.render(SegmentImg.scene, SegmentImg.camera);
  }
  

• 如果animate没有持续渲染，添加点后需要手动调用一次渲染：

  OriginalImg.renderer.render(OriginalImg.scene, OriginalImg.camera);
  

4. 额外排查点 #

• 打开控制台打印intersects，如果数组为空，说明Raycaster没检测到模型：
  • 检查模型是否正确添加到OriginalImg.scene中
  • 确认模型的visible属性是true
  • 检查相机的视角是否能看到模型

内容的提问来源于stack exchange，提问作者Yone