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?
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
3 Likes
I understand, thank you!
Thank you for supporting the BJS GUI. I will have to upvote 
this one 
1 Like
Oops. I didn’t even know it exists (since… even before the GUI Editor). I’m speachless. I have no excuse. 
1 Like
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?
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).
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.
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…
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.
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
1 Like
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.
Yes please 
Hello
I have to align with what @mawa said, but before I’ll just answer your question
It’s because you are doing a projection 3D → 2D like so :
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 :
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 :
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
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
You will save yourself a lot of struggle
++
Tricotou
5 Likes
cool thanks!