Interactive hotspots on a ply model

[Simon_Hyde]

2D screen hot spot. How to create a hot spot in a scene which would includes images, some descriptive text and a link to a web site. It needs to be displayed on a 2D screen by a mouse click on the hot spot. The 2D screen should appear on the right side of the game and be roughly 30% of the screen width and 100% of its height.
I’ve been trying to do this in this project PlayCanvas 3D HTML5 Game Engine
Help much appreciated. I am beginner script programmer.

[Albertos]

Hi @Simon_Hyde!

Do you mean you want your 3D screen and 2D screen separated?

Maybe you can use two different camera’s for this and adjust their viewport. One on the left side and the other on the right side.

[Simon_Hyde]

Hi
3D and 2D screen seperated? No, I don’t think so. I just want information to show on button press

When someone clicks on the white dot,my button then the right hand side appears and dissappears when they click on it. I’ve looked at the screen tutorials but can’t get it to work. Currently I am just showing some CSS and HTML to make the panel.

[Albertos]

Your hotspot currently have no element component to get the user input.

This also causes your current script to not work.

By the way, I haven’t experienced the need to add a timeout for this.

[Simon_Hyde]

OK…I am starting to make some headway PlayCanvas 3D HTML5 Game Engine

How do I add an image URL in the same way that the conent appears in the editor. Do I edit the this section of the ui.js?

Ui.prototype.onShow = function(content) {
    // Add the content to the HTML
    var text = this.div.querySelector('#text');
    text.innerHTML = content;
    //var image = this.div.querySelector('#image_id');
    //text.innerHTML = image;

    // Show the HTML div
    this.div.style.display = 'block';
};

[Albertos]

@Simon_Hyde

How do I add an image URL in the same way that the conent appears in the editor

I’m not exactly sure what you mean with this. Maybe one of the topics below can help you.

[SOLVED] How to add images into a div

Hey buddy , Im also trying to do something as you guys did. If you could provide me your project link that would be really good. Also do you know how to add images in a div from external api? in play canvas

How to add html image

Hello! I want to add an image in my html code but it doesn’t load.What should i do? Thank you

Getting asset image URL attached to HTML

I`ve prepared slot for image asset. Ui.attributes.add('flowerImage', {type: 'asset', assetType:'texture', title: 'Image Asset'}); and connected the image as an asset in editor [image] Please tell me how can I get the URL to this file to show it in HTML (I would like to get URL in HTML or in ui.js). My fork to this question: https://playcanvas.com/editor/project/998182

[Simon_Hyde]

I hacked something to work PlayCanvas 3D HTML5 Game Engine
as I can’t work out how to add the image as content and a link as well.

[lifeofpain]

Hi! Since you are using HTML for the user interface, inorder to get an image thats also a link, you have to do something like this.

<a href="https://playcanvas.com/">
    <img src="https://www.w3schools.com/html/pic_trulli.jpg"> </img>
</a>

Just replace the href of the a tag with the link you want to go to and the src of the img tag to a link to your image.

[Simon_Hyde]

https://playcanvas.com/project/1265111/overview/hot-spot
Got the rollover and links and stuff working but the button is misbehaving…the number of clicks to close it is directly proportional to the number of button items in the scene!??