\
**Category:** Questions\
**Tags:** gui, camera\
**Created:** [October 14, 2024, 3:45pm UTC](https://forum.babylonjs.com/t/adding-a-second-camera-breaks-the-html-shortcut-binding-to-the-mesh/54108 "2024-10-14T15:45:30Z")\
**Posts on this page:** 15\
**Page:** 1
**Author:**  [@D\_Taylor](https://forum.babylonjs.com/u/D_Taylor)\
**Post date:** [October 14, 2024, 3:45pm UTC](https://forum.babylonjs.com/t/adding-a-second-camera-breaks-the-html-shortcut-binding-to-the-mesh/54108/1 "2024-10-14T15:45:30Z")
Adding a second camera breaks the HTML shortcut binding to the mesh
My second camera acts as a minimap, but when I add it, the HTML shortcuts on the meshes break. If I remove it, right in the sandbox, everything works right away.
Please help me, how to fix this?
> **[Babylon.js Playground](https://playground.babylonjs.com/#YU7J32%23168)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL and WebGPU 3D scenes
---
**Author:**  [@Tricotou](https://forum.babylonjs.com/u/Tricotou)\
**Post date:** [October 14, 2024, 4:07pm UTC](https://forum.babylonjs.com/t/adding-a-second-camera-breaks-the-html-shortcut-binding-to-the-mesh/54108/2 "2024-10-14T16:07:10Z")
Hello 🙂
First of all, you must know that BabylonJS provides a nice GUI stack, that you can use for a lot of purposes, including attaching a button to a mesh using `linkWithMesh` method 😉
* * *
Coming back to your pure HTML button issue :
Since you have 2 cameras, the `scene.getTransformMatrix()` you use in the project is the problematic line. Use `camera.getTransformationMatrix()` to be explicit about the camera to be used as the projection matrix 🙂
> **[Babylon.js Playground](https://playground.babylonjs.com/#YU7J32%23169)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL and WebGPU 3D scenes
---
**Author:**  [@D\_Taylor](https://forum.babylonjs.com/u/D_Taylor)\
**Post date:** [October 15, 2024, 10:47am UTC](https://forum.babylonjs.com/t/adding-a-second-camera-breaks-the-html-shortcut-binding-to-the-mesh/54108/3 "2024-10-15T10:47:58Z")
I understand, thank you!
---
**Author:**  [@mawa](https://forum.babylonjs.com/u/mawa)\
**Post date:** [October 15, 2024, 11:28am UTC](https://forum.babylonjs.com/t/adding-a-second-camera-breaks-the-html-shortcut-binding-to-the-mesh/54108/4 "2024-10-15T11:28:06Z")
> [@Tricotou](#):
>
> you must know that BabylonJS provides a nice GUI stack
Thank you for supporting the BJS GUI. I will have to upvote 👍 this one 😆
---
**Author:**  [@Tricotou](https://forum.babylonjs.com/u/Tricotou)\
**Post date:** [October 15, 2024, 11:45am UTC](https://forum.babylonjs.com/t/adding-a-second-camera-breaks-the-html-shortcut-binding-to-the-mesh/54108/5 "2024-10-15T11:45:13Z")
> [@mawa](#):
>
> Thank you for supporting the BJS GUI. I will have to upvote 👍 this one 😆
Ahah thanks 😁
* * *
And you didn’t even join my [BJS GUI based chat](https://forum.babylonjs.com/t/babylonchat-my-tribute-to-the-babylonjs-gui/52183) 😱
Shame on you 😂
---
**Author:**  [@mawa](https://forum.babylonjs.com/u/mawa)\
**Post date:** [October 15, 2024, 11:50am UTC](https://forum.babylonjs.com/t/adding-a-second-camera-breaks-the-html-shortcut-binding-to-the-mesh/54108/6 "2024-10-15T11:50:33Z")
Oops. I didn’t even know it exists (since… even before the GUI Editor). I’m speachless. I have no excuse. 🤭 😊
---
**Author:**  [@D\_Taylor](https://forum.babylonjs.com/u/D_Taylor)\
**Post date:** [October 17, 2024, 10:44am UTC](https://forum.babylonjs.com/t/adding-a-second-camera-breaks-the-html-shortcut-binding-to-the-mesh/54108/7 "2024-10-17T10:44:10Z")
I encountered another error in this scene, if you rotate the camera 180 degrees, there will be a stml label, although we did not rotate 360. It turns out as if there are two of them. How to fix this, please help?
> **[Babylon.js Playground](https://playground.babylonjs.com/#YU7J32%23170)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL and WebGPU 3D scenes
---
**Author:**  [@mawa](https://forum.babylonjs.com/u/mawa)\
**Post date:** [October 17, 2024, 10:49am UTC](https://forum.babylonjs.com/t/adding-a-second-camera-breaks-the-html-shortcut-binding-to-the-mesh/54108/8 "2024-10-17T10:49:45Z")
I have this simple question: Did you assert why you would use an external GUI instead of the fully-integrated with scene BJS GUI? Do you know you can have both? I mean speaking about interacting with scene objects (linked to objects interaction) I don’t see the benefit of adding just another layer of external GUI (of course, my opinion only).
---
**Author:**  [@D\_Taylor](https://forum.babylonjs.com/u/D_Taylor)\
**Post date:** [October 17, 2024, 10:59am UTC](https://forum.babylonjs.com/t/adding-a-second-camera-breaks-the-html-shortcut-binding-to-the-mesh/54108/9 "2024-10-17T10:59:48Z")
Yes, I know about BJS GUI. I want to make different complex styles (transparency, matte, glow, fonts with effects, the ability to add images, videos, etc.) for labels and windows in the scene. With BJS GUI, some of these things are very difficult or impossible to do, with css it is much easier.
---
**Author:**  [@mawa](https://forum.babylonjs.com/u/mawa)\
**Post date:** [October 17, 2024, 11:07am UTC](https://forum.babylonjs.com/t/adding-a-second-camera-breaks-the-html-shortcut-binding-to-the-mesh/54108/10 "2024-10-17T11:07:37Z")
I can hear you but… at the same time, I (as a user, compulsive gamer and 40years experienced with digital nerd 👴 😅) would also want to challenge you on the need and purpose of some of these thingies… like a video on a label? what for? a glowing text on a label? doesn’t sound like an amazing adding to design and experience to me (of course, as said, my opinion only). And as I said, you can actually mix both UIs. You could have all your labels and texture mode GUI done with BJS and the FS GUI done with html/css. There are pros and cons to both and in both cases when going beyond ‘the standards’ you’re gonna face some challenge and limitations. In this case, as a PM and a designer, my first question is always the same: Is it really worth it?
Edit: On a side note (because if I don’t I will be flushed by people like @Tricotou or @Evgeni_Popov…
> [@D\_Taylor](#):
>
> fonts with effects, the ability to add images, videos, etc.
There are ways to do all of this in the BJS GUI. They might not be all part of the doc and some might require an additional level of effort (or advise) but… providing they have a purpose (and in fact, even if they don’t 😁) I’m sure the Team and this Community will help you find your work-around it. May be you should start by listing your ‘must have’ and ‘nice to have’. From there, make a plan and choose the best approach for it.
---
**Author:**  [@D\_Taylor](https://forum.babylonjs.com/u/D_Taylor)\
**Post date:** [October 17, 2024, 12:34pm UTC](https://forum.babylonjs.com/t/adding-a-second-camera-breaks-the-html-shortcut-binding-to-the-mesh/54108/11 "2024-10-17T12:34:31Z")
I’m trying to make a holographic sci-fi style interface with blinking and interference animation, here’s the implementation on css, I couldn’t do it on bjs gui, but I tried 🙂
https://codepen.io/D-Taylor/embed/preview/RwXVzdq?default-tabs=css%2Cresult&height=300&host=https%3A%2F%2Fcodepen.io&slug-hash=RwXVzdq
---
**Author:**  [@mawa](https://forum.babylonjs.com/u/mawa)\
**Post date:** [October 17, 2024, 12:40pm UTC](https://forum.babylonjs.com/t/adding-a-second-camera-breaks-the-html-shortcut-binding-to-the-mesh/54108/12 "2024-10-17T12:40:51Z")
> [@D\_Taylor](#):
>
> holographic
holographic… could have used the 3D GUI 🤔
Else, for this particular visual, I guess I would be able to reproduce in the 2D GUI fairly quick (why did I say that, I should just shut-up… because next thing, you’re gonna ask for it 🤣)
You can apply a shader FX fo the blinking and ‘swipe’ anim. The rest (image bg and border) you can easily do with just an image (a png or svg). Transparency is already in with the BJS GUI.
---
**Author:**  [@roland](https://forum.babylonjs.com/u/roland)\
**Post date:** [October 17, 2024, 2:53pm UTC](https://forum.babylonjs.com/t/adding-a-second-camera-breaks-the-html-shortcut-binding-to-the-mesh/54108/13 "2024-10-17T14:53:03Z")
> [@mawa](#):
>
> because next thing, you’re gonna ask for it 🤣
Yes please 🙏 😛 🤣
---
**Author:**  [@Tricotou](https://forum.babylonjs.com/u/Tricotou)\
**Post date:** [October 17, 2024, 3:09pm UTC](https://forum.babylonjs.com/t/adding-a-second-camera-breaks-the-html-shortcut-binding-to-the-mesh/54108/14 "2024-10-17T15:09:43Z")
Hello 🙂
I have to align with what @mawa said, but before I’ll just answer your question 😉
> [@D\_Taylor](#):
>
> I encountered another error in this scene, if you rotate the camera 180 degrees, there will be a stml label, although we did not rotate 360. It turns out as if there are two of them. How to fix this, please help?
It’s because you are doing a projection 3D → 2D like so :
```javascript
vertexScreenCoords = BABYLON.Vector3.Project(
BABYLON.Vector3.Zero(), sphere.getWorldMatrix(),
scene.getTransformMatrix(),
camera.viewport.toGlobal(engine.getRenderWidth(true), engine.getRenderHeight(true))
);
```
This matrix projection works, for both object in front of camera :
And behind camera :
So, either behind or in front of camera, you can retreive 2D coord on the screen.
If you want to hide the button when it’s behind (which by the way would be done already using the babylon GUI with attaching to mesh 😉 ) what you need is using the vector dot product :
The dot product between camera forward, and mesh direction is \>0 when mesh is in front only :
```javascript
const cameraForward = camera.getDirection(BABYLON.Vector3.Forward());
const vectorToTarget = sphere.position.subtract(camera.position);
const dotProduct = BABYLON.Vector3.Dot(cameraForward, vectorToTarget);
if (dotProduct > 0) {
threeDButton.style.display = "block";
} else {
threeDButton.style.display = "none";
}
```
And the fix :
> **[Babylon.js Playground](https://playground.babylonjs.com/#YU7J32%23171)**
>
> Babylon.js playground is a live editor for Babylon.js WebGL and WebGPU 3D scenes
* * *
Now back to the discussion about either or not using GUI :
I do 100% understand the point about html behind nice for GUIs
Myself I often use Bootstrap, like I did for example in my [HoverCraft Game](https://hover.tricotools.com/)
But when you start to be in need of dynamic 3D stuffs, I would highly recommand to go 100% BabylonJS, like I did in my [BabylonJS repo Viewer](https://babylonjs.tricotools.com/) 😉
You will save yourself a lot of struggle 😛
++
Tricotou
---
**Author:**  [@D\_Taylor](https://forum.babylonjs.com/u/D_Taylor)\
**Post date:** [October 18, 2024, 9:34am UTC](https://forum.babylonjs.com/t/adding-a-second-camera-breaks-the-html-shortcut-binding-to-the-mesh/54108/15 "2024-10-18T09:34:57Z")
cool thanks!