Hey All!
It’s been almost 6 months since I last used playcanvas. But it’s great to be back to work on a new project with new set of challenges. Although before jumping deep into the project we are working on, I would like to get some suggestions from the experts here on the approach that I should be taking to develop this project.
Alright, without any further delays. Here is my query:-
On this project the main goal is to build a configurator where the user can drag and drop a component from a grid of thumbnails (existing template from Shopify for example) into the playcanvas app. To achieve this communication I believe I have two options:-
- Use “postMessage” API to send messages between the playcanvas iframe and the parent/client page, then take actions based on the message details. The parent page and the client page will be on different domains so cross domain secure communication would be important. I have managed to test a few communications following this documentation already, but it still gives problems when I try to shift focus to the iframe while the mouse enters the iframe while dragging the thumbnail. For some reasons it only start detecting mouse within the iframe when I release the left mouse button.
- Embed the Thumbnail grid (and n number of UI elements in the future) into the Playcanvas app itself, so it’s native to the app and no hassle of communication across domain. But to be honest I have been told it’s not easy to do and I don’t know how to embed a section of the Shopify template into my playcanvas app, inside of an HTML container. I will research on it a bit more in the upcoming weeks, sorry didn’t do that yet.
I am not a web developer and I believe in keeping my life as simple as possible when it comes to web based configurators. I would appreciate any suggestions and ideas about how I should be approaching this in order to not complicate things because “components grid” is only the beginning of the functionality, there is “Cart” and “Summary” of the configured product as well.
Unfortunately I cannot share a project at this point since I have just started, but I would be happy to share whatever information possible if that would help you provide a better solution 
Stay Safe Everyone!!
Regards
Hi @Tanay_Dimri ,
So, both options can work, in my experience the 2nd can be a lot of work as you found out. Especially if you have a complex website that you don’t fully control (widgets coming from Shopify).
I would definitely explore more the 1st option, since it allows you to develop separately the two applications (Shopify website and playcanvas configurator). Sometimes the browser can have some gimmicks on how things work, but you may be able to bypass that someway.
I found a random example online that implements an iframe to detect the mouse move, it seems to work ok if I click and hold the mouse button outside the iframe and then move over to the iframe:
1 Like
With the first option, you can potentially have the final build of the site with PlayCanvas not in an iframe but as a canvas div directly on the page.
See thread here: Embedding PlayCanvas into a webpage without iframe (solution here: Embedding PlayCanvas into a webpage without iframe - #24 by yaustar)
2 Likes
Hi Leonidas,
Thank you for your quick response. The solution you shared works but let me try and explain what we are trying to achieve.
- User starts dragging a model from the grid of thumbnails into the playcanvas iframe.
- Without releasing the drag I now need to switch from dragging the thumbnail to instantiating a corresponding 3d model in the scene and start dragging that. All without releasing the mouse here, and once the user releases the mouse, the 3d element gets placed into the scene.
I have the placement logic figured out but the drag operation doesn’t switch from “dragging the thumbnail” to “dragging the 3d model” on iframe enter. I am using browser’s drag events to achieve this where “dragenter” on the iframe sends a postMessage to the playcanvas app to instantiate the entity in the scene. Still instead instantiating on enter, it instantiates when I release the mouse. Technically, the post message gets sent to the app and entity gets instantiated on iframe enter, but the actual drag in the scene doesn’t start and the “drag thumbnail” is still not released.
I will try to put together a very simple example to demonstrate this either tomorrow or Wednesday if I didn’t explain this well enough. But would still like to hear your thoughts on this.
Regards
Hi Yauster,
Thank you for sharing that information!!
Just trying to understand why you recommended a canvas instead of an iframe. Are there any specific advantages of using a canvas over an iframe in this case?
Besides, in case of a “canvas”, does the cross domain communication remain the same as an iframe. As in does it still use the postMessage API?
Regards
It means you are no longer handling ‘two’ pages. Depends on your application but there may be some benefits or none.
No. As the PlayCanvas ‘app’ and the HTML are on the same page, it’s all in the same window scope so it should be possible to communicate directly.
2 Likes
Ah!! That seems like a great solution. I have an absolute 0 knowledge of a Canvas but will look into it now.
Thanks!
A canvas element is just another HTML element that PlayCanvas renders in.
It’s worth downloading a build of PlayCanvas project to see how it’s all constructed on the page.
1 Like
Hey Yaustar,
I had a look at the repo you shared and tried to understand how Canvas works in general. Looks like the content needs to be hosted on the same site for it to work, correct? Like in your example. I got an understanding that a Canvas can draw webGL elements at runtime using JS.
Unfortunately we cannot do that for this project. We mostly develop and Publish our projects on Playcanvas servers which then gets embedded into the client’s website.
Unless I missed something and there is a way to “draw” a URL content into the canvas?
Yes.
Why not host the PlayCanvas project on the client’s servers?
I thought of the same thing and have sent that query to the client to get their approval. Will know more once they get back with an answer. They shouldn’t have a problem with it but since there is another company working on the rest of the website we need to be in absolute sync about everything we do. 
I really appreciate all the help. Love the Playcanvas community and how active everyone is here 
2 Likes