3D and VR demos in Anvil

I made a few super simple demos to show how to integrate the Copperlicht3D game engine and the A-Frame VR framework into Anvil.

https://anvil.works/classic-build#clone:Y726NTLTCJ7RJ3Y6=3LEC4KDUG3GPQWOZ3QFE2HR2

https://anvil.works/classic-build#clone:4BDCTFT4WDKAHDAH=OOK4ZVD23JMVB5HR4TUMT27S

The purpose of these examples is just to demonstrate how to load required resources into Anvil and interact with each JS API. That should be enough to begin implementing and integrating any existing tutorial examples for each framework, and to create some actually interesting apps.

Each of these frameworks is really simple to use.
Copperlicht can be used to quickly build 3D games and nice interactive scenes/interfaces that run on most modern browsers (the Coppercube application helps to speed up development dramatically (importing and placing models, drawing scenes, etc.). For anyone wanting to add some 3D capabilities to Anvil, it’s a very simple and productive toolkit to get started with (even if you’ve never done any dabbling with 3D).

5 Likes

BTW, if you’re going to look at any of the copperlicht tutorials, this forum note is important: CopperLicht Tutorial needs updating/correction - CopperLicht Forum

I get the following error when I try to run the first one:

Error: Could not load file ‘https://copper.anvil.app/_/theme/animation.ccbjs

For using local files with Chrome, run the file from a web server
Or use Firefox instead. Or run it from CopperCube

Thank you for the feedback. What browser and OS are you using?

I have tested that example in Chrome, Firefox, Edge and Palemoon on various versions of Windows, both Chrome and Safari on iPad and iPhone, and Chrome in Android, and it has worked without any problems on all those browser/OS combos. It would be great to know if anyone has any issues running it on any other platforms. Thanks!

I just tried again, same error on the first one. Second one loads fine, very cool.

Chrome / Win 10, pic of error attached. Same error in the designer and when the app is run. All I’ve done is clone the app and press the run button.

Have you tried running the app link (not the clone):

When running the clone, are you using the new editor? (I did this a while back in the classic editor).

Aha.

I wrote this one a while back, and remember now: In order to run the clone, you’ll need to publish the app at a URL, and then edit the custom HTML in the cloned app so that the URLs https://copper.anvil.app/_/theme/copperlicht.js and https://copper.anvil.app/_/theme/animation.ccbjs refer to the URL of your cloned app.

This is necessary because https://YOURURL.anvil.app/_/theme/ is the scheme used to refer to file assets in an Anvil app. Thank you for bringing that up - it’s essential to what needed to be explained with that example :blush:

Either way, the app link should work without any preparation. Please let me know if it doesn’t.

To be clear, the cloned app can’t be run by pressing the Run button in the visual designer. It needs to be run at the published app URL.

UPDATE: I changed the file asset links to

_/theme/copperlicht.js and _/theme/animation.ccbjs

… So they should now work without any changes to cloned code (you’ll need to clone a new copy to see the changes (or manually edit your current clone)), and directly in the editor, as well as when the Run button in the IDE is clicked. That’s much better, thanks for the input!

2 Likes