3D Art Gallery: Users to click Artwork for larger image and more info

Hi there!

I’ve followed this tutorial: https://www.youtube.com/watch?v=3I_aRxN4-Bk

However, I’d like viewers to be able to click on an artwork, then a pop up with a high res image or embedded video of the artwork appears along with some information along the right side (similar to what happens here https://www.concept21festival.com/)

This is what I have so far:
https://playcanvas.com/editor/scene/1138749

I plan on changing the building itself and the artwork in it is just placeholder, so really this whole scene is just a test. I’m also having an issue with the first person movement of the camera in the player. I’ve tried a few different scripts but I’d prefer it to be controlled with the arrow keys. At the moment there is no sideways movement which is an issue.

I’ve searched the forums but not sure of what terminology to use.

I’m a total javascript noob, so apologies! I’ve done a bit of 3D and unity in the past so not a complete novice.

Any help much appreciated,
Kim

Hi @khmcneil and welcome,

For receiving input (e.g. clicking) on your artwork you can check how the UI buttons tutorial does it (the buttons can be in 3D space as well):

https://developer.playcanvas.com/en/tutorials/ui-elements-buttons/

From there you can catch the click event, and have some custom HTML popup that either plays a video or renders a regular HTML image. Check the HTML tutorials here on that:

https://developer.playcanvas.com/en/tutorials/?tags=html

1 Like

Hi @Leonidas!

Thank you for taking the time to respond. I’ll try those tutorials.

All the best,
Kim

1 Like

Hi @Leonidas,

I’ve looked at those tutorials and at modals using html, css and javascript. However, I’m struggling to now understand how and where to attach these snippets of code within my PlayCanvas project linked above.

Ideally, I’d like a viewer to click on an image within the 3D space, then the modal comes up with the image larger and some text.

I’m not sure how to call the artwork itself and caption, or make the image on the wall into a button. I tried a button component using the UI - Buttons example but I think something might be broken on that?

Many thanks in advance for any guidance,
Kim

Hi @khmcneil,

The scripts included in the example projects can’t do that automatically. So it’s not so much where to attach that code, but how you can use it as a starting point to add your own logic.

May I suggest some JavaScript tutorials first, to get comfortable with the language? There are plenty online and most of them are free.

1 Like

To add to this, you can check out this course from a JS expert on Udemy - https://www.udemy.com/course/javascript-essentials/. A few of our UI designers became acclimatised with JS fairly quickly using this course, and they all rate it quite highly; it should help you get comfortable with the language.