Configurator in play canvas with the following functions possible


im new to playcanvas, but looks promising. I have a request from a customer for a configurator for his product. Im a 3d artist working with 3dsmax and have a javascript coder with several years of experience available for the programmer part.
The client wants to have the following features:

-There need to be a color picker / wheel be integrated, to change the color of the item in realtime.
-The user should be able to upload his own logos and place them on 3 -4 predefined locations on the model.
-The user should be able to download a short predefined camera animation of his configured product, i.e. mp4 file
-The user gets a pdf file with infos about his configuration by email containing some specs ( choosen color, some screenshots / renderings from predefined camera positions, his company name and adress and some specs about the product.
-configurator works offline and online. If first usage is offline, the to be generated pdf will be send once he gets online.

  • configurator should be integrated in his webpage
  • it should run on Desktop PC / Mac and Mobile ( Android / iOS )

Would be great to get some appraisal, if these functions are all possible to do in playcanvas.

Thanks for help.


It mostly sounds doable apart from:

This is the only feature that would be difficult no matter what technology/engine you use. This has to be done server side and perhaps not using PlayCanvas technology at all.

I don’t understand how it can work offline if the configurator is accessed via a webpage? The user would have to be online to access it in the first place?

Hi Yaustar, thanks for this quick reply on my questions. About the offline capabilities this might sound strange. I guess the client would like to use the engine in offline mode for usage i.e on a fairy / exhibition on his booth providing the customer with tablets and the configurator somehow preinstalled on it if there is no WLAN or anything like this in the area. The configurator shall still be able to save the customers config and upload it later on the server, as soon there is internet available.

The app will need to be hosted ‘somewhere’ to be accessed. You could bundle it into an ‘app’ (there are various HTML5 -> APK, IPA, EXE, etc wrappers) but it still doesn’t really make much sense without a specific use case/example.

I mean it’s all doable to a certain degree, it just doesn’t send like a realistic requirement unless the client wants two separate releases, one for browser use and one as an ‘app’ to be used at trade shows and the such.

Hi Robin

Agree with Yauster that it sounds pretty doable and that you need two separate projects and without a bit more info it sounds like you are being given a super complex or impossible task and need at least 2-3 months of dev time to do it, based on what you have described so far. The best solution if you ask me is to build a website that just plain requires Internet access.

You might want to also look at PWA “progressive web app” technology and use service workers to cache the files and data. This might be a nice offline browser solution if you don’t need to load textures to the 3d models on the fly, potentially. But I have a hunch this would probably not be possible without a lot of hacking in the PC code. Just an idea I haven’t tried myself yet.

As for downloading the camera animation as a .mp4 … I suggest you recommend to your client that you instead store the animation data in a url with get query paramaters for instance(lerp and slurp). So if the user wants to see their animation again they have to come back to the clients website where it can play again in playcanvas. This would greatly reduce your engineering overhead. That would be totally possible and certainly a lot cheaper for the client than paying developers to build individual iOS and Android apps so it can work offline. Depends on the clients budget though.

Otherwise you will probably either need a good java/Swift developer to enable screen recording in each mobile app or we go back to again needing wifi access and you could access a NODE or Python server to compile a set of screencaptures of the canvas element containing your 3d scene which would be far from optimal as a solution. But again a website + server + wifi will be cheaper and easier than developing individual Android and iOS apps and you MIGHT be able to leverage PWA to help with offline.

If the client REALLY wants this to work on mobiles/tablets offline and to be able to store the data of the camera animation for later then I would recommend looking into loading playcanvas into Cordova as yaustar already mentioned you can use this to compile into Android(APK) and iOS(IPA), although again this is quite tricky if your dev has never done this before and there is a lot of quirks and “gotchas” in that dev pipeline. The cool thing about this though is that you can pretty much replicate this code onto a website. So it’s write once run everywhere JS/CSS/HTML.

I built a config system like this myself for iOS and Android with VueJS and it was quite a complex beast the first time I did it. But it’s certainly possible.