0

I want to pick a face in a mesh when clicking on it with the mouse. The mesh is loaded using ObjLoader and MtlLoader (attached) When clicking on the mesh, sometimes an intersection is detected, but sometimes not.

Attached here is a small self-contained example that is based on webgl_interactive_cubes.html and the .obj file. If setting the variable loadCubes to true the original example runs as expected, i.e. intersections are detected. If setting the variable loadCubes to false, the obj file is loaded but the intersections are not detected.

Thanks, Avner

p.s. Related links that I looked at: similar problem description: here and here, code pattern, raycasting documentation

Avner Moshkovitz
  • 1,138
  • 1
  • 18
  • 35
  • Please include your code in your post. – WestLangley Feb 26 '18 at 19:38
  • The solution was to make 2 adjustments to the code as stated in the accepted answer 1. Added "mtlLoader.setMaterialOptions( {side: THREE.DoubleSide} );" and also "child.material.side = THREE.DoubleSide;" when calling objLoader.load - this displays both sides of the material) 2. Call "var intersects = raycaster.intersectObjects( scene.children, true );" to check the descendents of the objects. Thanks. – Avner Moshkovitz Mar 01 '18 at 08:04

1 Answers1

0

THREE.Raycaster() has .intersectObjects ( objects, recursive ) method.

The documentation says about parameters of this method (if you looked at it attentively):

objects — The objects to check for intersection with the ray.

recursive — If true, it also checks all descendants of the objects. Otherwise it only checks intersecton with the objects. Default is false.

THREE.OBJLoader(), returns THREE.Group() object, containing THREE.Mesh() object(s) in its .children property.

So your check for intersection should be like that:

var intersects = raycaster.intersectObjects( scene.children, true );
prisoner849
  • 16,894
  • 4
  • 34
  • 68