3

Using three.js I'm loading a .obj file I've created, and it looks great....

Looking for advice on how to add multiple clickable areas on the .obj almost like adding hotspots...

For an example of what I'm trying to do, say you loaded a .obj of a man using three.js.

Lets say I wanted both his left and right hand to have their own event listener that when clicked would call a different function...?

Is there a known technique or tutorial for this? Off the top of your head how might you suggest I approach this?

Any suggestions are most appreciated, thank you.

MikeT
  • 31
  • 2
  • Can you post the code you've already tried or link to a jsfiddle? That will help get a more direct answer to your question. – dethtron5000 Jul 14 '13 at 00:48
  • I'm working from the three.js example file webgl_loader_obj_mtl.html found here: [https://github.com/mrdoob/three.js/blob/master/examples/webgl_loader_obj_mtl.html] – MikeT Jul 14 '13 at 01:21
  • Line 87, you add the path to the .obj and .mtl file, and the 3D model is loaded. How one would add different clickable regions to a model I'm not sure. I was going to attempt to create separate 'invisible' 3D objects and position them within the viewport relative to the .obj model... this would be trial and error, and I was hoping there might be a known technique out there.... – MikeT Jul 14 '13 at 01:31

1 Answers1

1

What you're looking for is called 'face selection', a concept similar to object selection. How to get the mouse clicking position on an obj file loaded from OBJLoader? should get you started on the topic.

Community
  • 1
  • 1
havarc
  • 934
  • 5
  • 11