Hi, I’m trying to re-create something like campus Albano where you click an object and a text box appears with further information.
I’ve seen https://www.babylonjs-playground.com/#ZI9ak7#1433 example but I don’t want the alert pop up with the babylon address. Is there a way to re-create the campus example in babylonjs playground? I’ve been searching for a good while with no luck. I’m relatively new to this and struggle with the advanced coding.
Campus Albano is made with trackable labels.
Example - https://playground.babylonjs.com/#XCPP9Y#20
Docs - The Babylon GUI | Babylon.js Documentation
Of course, you’ll need to style and tune all markers as you like.
As for popups - they are just simple HTML/CSS/JS modals triggered with some Babylon event.
Here is the example - Click on 3D Model Opens Modal Window with Specific Wordpress Post - BabylonPress
You can actually do the same with Babylon GUI TextBlock and, if you need some background, use StackPanel or Rectangle.
Thanks Labris I’ll take a look now - did you create the Campus? Great job if you did. It’s similar to what I’m creating.
No, this beautiful Campus is not mine but I answer here how it is made almost every month…
Feel free to ask more questions 
ok thanks. When you say simple HTML/CSS/JS models triggered with some babylon event, you make it seem far easier than what it appears to me haha. I’m not a coder and the page source is very long. My site is actually a wordpress site, is there a plugin used on the modal window or would you be able to point me to the specific code on that 3d model page please that triggers it.
The modal code is taken from here - How To Make a Modal Box With CSS and JavaScript
All you need actually is to trigger the modal with the desired Babylon event.
The modal code from the previous Wordpress example starts from line 280
and then
line 394: create the object with allowed meshes as key and post ID as key value
line 400: check mouse down event
line 400: if mouse hits some mesh
line 403: check if this mesh is in our allowed meshes list
line 405 if true - load the modal with content from the post which ID is defined in our meshWPpages object
Also check console messages, it really helps a lot 
Please note that before posting to Wordpress it is much easier to have already working example.
At babylonpress.org I use my own plugin which lets just to copy-paste any working example from Playground.
I’ve just created a test playground for me to try it out on two objects https://playground.babylonjs.com/#LGZTJP#1. I was hoping to be able to click the buildings rather than a new bit of text. Is that possible?
Thank you for this by the way, I’ll see if I can re-create it once I have some kind of trigger in the babylon playground
For HTML modals it would be easier to do it separately from PG.
You may download the full code example from PG with Download button (top menu) and then add all needed HTML/CSS etc in your local environment.
The first sticking point is how to add the observable to the model before I can download it and test it out. I want to have different pop-up boxes for both objects. Do I need to assign it to each of the two buildings in the playground first. My model has a lot more buildings than this and I wouldn’t want every building to have a pop-up so I assume it has to be linked to the building.
When you say trigger from a babylon event, is that from here? Actions | Babylon.js Documentation
I don’t know how to apply these to the buildings in the example link I have below.
This is a better example now to play around with - https://playground.babylonjs.com/#LGZTJP#2
I will export once I have some kind of trigger linked but it’s just understanding this part. The pop-up is essential to my model so thank you for helping. I’d be lost without any help here.
Does the model you have in the wordpress site have a playground I can have a look at for the babylon code?
This example doesn’t have PG but I feel I’ll need to prepare some simpler HTML version.
Here is your last PG, modified - see console messages on pointer events. https://playground.babylonjs.com/#LGZTJP#3
Actually you don’t need to create a new scene inside PG, so I believe this part need to be refactored later.
I’ll be back after some time today
That’s perfect, thank you. I don’t know where the cube names have gone but you managed to find them somehow. They are usually in nodes but are missing.
I’ll see if I can work this into the wordpress site I have and make a pop up. I assume the code from the page source you previously had would work the same as before or would I need to rename it based on the babylon code you have?
I’ve had a quick go at creating a html file - Dropbox - index - Copy.html - Simplify your life using the snippets and the playground version I had but I’m guessing I’m still a little way off as it didn’t work
Let’s play at the Playground first, it will be easier for everybody
Here is another example - https://playground.babylonjs.com/#9Z476P#3
The code is commented for better understanding.
Click at the building, at the Fresh Fruit sign or at empty space (to remove GUI TextBlock).
Thank you, I wonder if I would be able to pull information from my website from this model this way - with the text in the model. e.g. short codes that pull information in? It might be that I have to have it the way your wordpress site has it, opening a new boxed window.
You’ll need to code it in JS, no need to use shortcodes.
But it would be much easier to do all the logic which you need in Playground first and only then move the codebase somewhere else (to the separate webpage or Wordpress page or post).
I have an plugin I would be using in wordpress that uses shortcodes, so it would be great to pull that information in. Not that it’s already complicated enough I agree it would be easier to get it working properly in the playground first though
When you said do everything in Playground first, did you mean get some text to show up after the mouse click on the model and then when moving that over to the website, remove the text pop-ups in the playground and programme the pop-up windows?
Exactly
