0

I am building a game with three.js library, and I want to have a small "panel" on the screen that will be immovable. I mean that the user will be able to navigate inside the 3D enviroment, but the panel will always be on the upfront of his screen (as if the camera movements do not affect it).

Here is an example http://icecreamyou.github.io/Nemesis/game.html <- this example has exactly what I want, a not-moving panel on the down left of the screen .

Although, I want this panel to have clickable object inside it, meshes for example, that I will click and a function will be called. In the example the guy uses a div element.

How can implement this? I checked the Sprite object but it is not clickable yet as I understand. Till now, I used to create clickable meshes, put them where I want and move them along when the camera moved, but this was not good enough because of the complexity of the camera movements.

EDIT Oh, an other thing I did not tell you is that I want this panel not to affect what's behind. I mean I want it to be transparent. Only the meshes that are there will be shown. I do not want the panel to hide anything behind it.

ovelix123
  • 205
  • 1
  • 2
  • 7
  • Why don't you set it just as plain old HTML element ? – vals May 19 '14 at 16:05
  • Inside the canvas element? I want to have clickable meshes in the panel? You mean to have an other canvas element inside the html element? – ovelix123 May 19 '14 at 16:15
  • I think that you can have another canvas, in front of the current canvas, and render there whatever you want. Your example uses that (canvas radar) – vals May 19 '14 at 16:18
  • Yeah ok, I thought about that. it is a good idea. I was just wondering if I could have the panel inside the one canvas I have, for performance issues. Because the project is quite big with many 3d objects function etc. Do you know how much will affect the performance etc the extra canvas element? thank you – ovelix123 May 19 '14 at 16:26
  • Also see http://stackoverflow.com/questions/20396150/three-js-how-to-keep-sprite-text-size-unchanged-when-zooming/20416029#20416029. – WestLangley May 19 '14 at 16:28
  • I would say performance cost is not significant, but I don't really know, it's a wild guess. Sorry ! – vals May 19 '14 at 16:32
  • @WestLangley Ok I will sure read the post about HUD although I ve use an older version of three.js and I don't know if it will work. – ovelix123 May 19 '14 at 16:35
  • Oh, an other thing I did not tell you is that I want this panel not to affect what's behind. I mean I want it to be transparent. Only the meshes that are there will be shown. – ovelix123 May 19 '14 at 16:37

1 Answers1

0

You don't have to follow the camera around. Just add the panel object as child to the camera, and it will stick perfectly. (You will have to position it once relative to the camera, though.) camera.add(panel)

Elias Hasle
  • 637
  • 7
  • 15