Product Presenter

Here is a product presenter I’ve developed for a fair.
It will take some time for loading cause we had to load all assets on startup.

Matrix Presenter

It’s pretty neat! Was this made with PlayCanvas?

1 Like

Hi @Patrick_Munster,

Nice, thanks for sharing! Very clean implementation of dynamic models and sizing.

Indeed it takes a long time to load, maybe you should make use of the preload flag to load only the necessary assets initially the rest gradually during play time.


Sometimes the click hotspots render behind the red labels making them not easy to see/click:

1 Like

Thanks for that hint. Overlapping can happen but the hotspot should be always on top. I’ll try to fix this by z-index. Cool would be to track the collisions of the USPs (red boxes) and collapse them. But I haven’t tried/searched for it. Maybe an idea for the next update.
The preloading was “necessary” for the offline version which is also integrated into an app. I’ve had some trouble to make this work and switch between the online and offline application. But this is really a point where we have to think about cause it feels bad with the loading time and there is a lot of traffic which might be a problem. However, right now it’s okay for the client as it.

1 Like

Thanks. The 3D content and everything that is directly connected with the models (red boxes, color selector) is made with PlayCanvas. The UI around, which is controlling the application, is an ordinary web UI based on Bootstrap with jQuery magic.

1 Like

It’s super-important you read this page:

In particular, the last point would make a huge difference for your app’s load time:

If you self-host your PlayCanvas app, be sure to configure your web server to serve files with GZIP compression. In particular, JSON and JS files.


Thank you for that very good advise!
I’ve asked the server administrator to activate the gzip compression on the server cause it’s not available at the moment.
I’m looking forward to the result. :slight_smile:

1 Like

Cool. Let’s us know when it’s enabled! :smile:

Very nice!

Something I noticed:

  • Some hints appear on top of each other, making them hard to read.
  • The model loses mouse control, if the mouse goes over the UI element, e.g. when you try to rotate the model.


Thanks for that! Detecting the collision of the boxes to avoid overlapping isn’t so easy I think. If you have a hint for me I would appreciate it.
But deactivating the pointer events with pointer-events: none; should fix the issue of stopping the model from rotating. I will add this to my ToDo list. :+1:

There are a few options here, probably. Considering you are using HTML for UI, one option could be to detect the DIV collision (example) and then hide the ones that are further away on z-index. That way only the closest to the viewer is shown, unless they don’t overlap. Another option could be to not allow them to go through each other’s boundaries (example), but that could be a bit tricky to implement and could potentially clutter the view if many hints available.

1 Like