0

I am just learning 3.js and I'm trying to figure out if you are able to click on a 3D object in a canvas and trigger a javascript function. For instance, if you click on a particular cube then it will display information about that cube in a separate window. I've read about raycaster but there doesn't seem to be that much information about a 3D object interacting with normal HTML DOM elements. I need to dynamically create shapes based on model data and these shapes need to be interactive. Does anyone have any experience needing to do this? I know it may be somewhat unconventional but I think this may be what I need to do. Your help is appreciated. Thank you!

PerrinPrograms
  • 462
  • 3
  • 11
  • When you say "I need to dynamically create shapes based on model data and these shapes need to be interactive", it's not clear what need you have with interacting with DOM elements. There are ways to do that in three.js? – aug Jul 14 '17 at 08:18
  • Sorry. To clarify I mean that the objects need to be created from dimensional data (L,W,H). They're mostly just 3 dimensional rectangles. – PerrinPrograms Jul 14 '17 at 08:23

1 Answers1

1

It is not possible to do that you can refer question. Mouse events on each <g> tag of svg loaded on the material in threejs

Also Check http://learningthreejs.com/blog/2013/04/30/closing-the-gap-between-html-and-webgl

As per above link

Well, not quite unfortunatly… WebGL is 3d inside a canvas element and a canvas is a black box from the html page point of view. You can’t bind DOM events inside canvas. You can’t have stylesheet to change canvas content. You can’t put dom elements inside your canvas. Those two don’t talk to each other.

gusaindpk
  • 1,243
  • 2
  • 13
  • 31
  • I've tried using CSS 3D transforms and it's quite limiting and much more work. I did find this example http://jsfiddle.net/jeanlescure/7y9ozyj6/ which would be quite helpful to me if I were able to create 3D css shapes that could also benefit from the controls of 3js. There's also this example: https://threejs.org/examples/css3d_periodictable.html Do you know anything about their capabilities or limitations? Thank you. – PerrinPrograms Jul 14 '17 at 08:28