使用Three.js检测OBJ模型子对象点击事件的问题求助

Hey there! Let's work through this click detection problem with your OBJ sub-objects. I’ve dealt with this exact scenario when importing complex OBJ models before, so here are some practical, tested solutions based on common 3D setups (I’ll assume you’re using Three.js since it’s the most popular for OBJ handling on the web, but these concepts translate to other engines too):

1. Assign Unique Identifiers to Each Sub-Object #

First, make sure every child mesh in your OBJ has a unique way to identify it—this lets you tell which sub-object was clicked later. You’ll need to recursively traverse the loaded OBJ (since OBJs often nest meshes inside parent groups) and add custom metadata:

// Helper function to tag all mesh sub-objects
function tagSubObjects(obj) {
  obj.traverse((child) => {
    if (child.isMesh) {
      // Add a unique ID (you can use a counter instead of random for consistency)
      child.userData.uniqueId = `subobj-${Math.random().toString(36).slice(2, 9)}`;
      // Optional: Set a human-readable name if your OBJ doesn't already have them
      child.name = `SubObject-${child.userData.uniqueId}`;
    }
  });
}

// Use this after loading your OBJ
const loader = new THREE.OBJLoader();
loader.load('your-model.obj', (loadedObj) => {
  tagSubObjects(loadedObj);
  scene.add(loadedObj);
});

2. Implement Raycasting for Click Detection #

Raycasting is the standard method for click detection in 3D scenes—you cast an invisible "ray" from the mouse position into the scene and check which objects it intersects with. Here’s how to set it up:

// Initialize raycaster and mouse position tracker
const raycaster = new THREE.Raycaster();
const mouse = new THREE.Vector2();

// Listen for click events
window.addEventListener('click', (event) => {
  // Convert screen mouse coordinates to normalized device coordinates (-1 to 1)
  mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
  mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;

  // Update the raycaster with the camera and mouse position
  raycaster.setFromCamera(mouse, camera);

  // Check for intersections with all mesh sub-objects (recursive check)
  const intersects = raycaster.intersectObjects(scene.children, true);

  if (intersects.length > 0) {
    // The first intersection is the closest object clicked
    const clickedSubObj = intersects[0].object;
    console.log('Clicked sub-object:', clickedSubObj.name, clickedSubObj.userData.uniqueId);
    
    // Example action: Toggle color to confirm detection
    clickedSubObj.material.color.set(clickedSubObj.material.color.getHex() === 0xff0000 ? 0xffffff : 0xff0000);
  }
});

3. Optimizations & Troubleshooting Tips #

• Performance boost: If your OBJ has hundreds of sub-objects, store all interactive meshes in a dedicated array during initialization, then use that array for raycasting instead of traversing the entire scene every click:

  const interactiveMeshes = [];
  function tagSubObjects(obj) {
    obj.traverse((child) => {
      if (child.isMesh) {
        child.userData.uniqueId = `subobj-${Math.random().toString(36).slice(2, 9)}`;
        interactiveMeshes.push(child);
      }
    });
  }
  // Later in click handler:
  const intersects = raycaster.intersectObjects(interactiveMeshes);
  

• Visibility checks: Ensure your sub-objects have visible = true and their materials have visible = true—raycasters ignore invisible objects.
• Transparent materials: If using transparent textures, set material.transparent = true and double-check depthTest/depthWrite settings if clicks aren’t registering (some transparent setups can block ray detection).

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