Vue.js + Playcanvas Engine integration: How to load and attach scripts?

Help & Support
1

Hi everyone,

I’m using the latest vue and I’m trying to integrate the playcanvas engine.
With the help of @Ivolutio I managed to load a model into the scene, but now I’m struggling to load and attach scripts as ScriptComponent to entities.
I have tried several ways to make loadFromUrl() work, but without success:

  • Loading a script from the public folder results in pc not being defined in the script.
  • Loading a script from src folder will be sent with html response headers.

I used this code for loading the script:

this.app.assets.loadFromUrl('../src/assets/scripts/orbitCamera.js', 'script', function (err, asset) {
      //public path: ./scripts/orbitCamera.js
      cameraEntity.addComponent('script');
      cameraEntity.script.create('orbitCamera');
    });

I then tried to add a script to the asset registry with a vue mixin, by just executing the script code, without loadFromUrl() and then tried to add an instance of it manually: No success and probably bad practice.

So my question is, has anyone found a modular way to load and attach scripts to entities, running vue and pc engine?

Cheers

2

I am also doing this for my web app. I am currently not around my pc but I’ll try to explain how I did it.

If you have the following script component, located in src/scripts/rotator.js:

const pc = require("playcanvas");

const Rotator = pc.createScript("rotator");

Rotator.prototype.update = function (dt) {
  console.log("update rotator");
  this.entity.rotate(10 * dt, 20 * dt, 30 * dt);
};

If I remember correctly, I was able to load it by simply requiring it; require("@/scripts/rotator");.
However, you should only run this after your app is first created. If you for some reason need to reload/restart playcanvas app, you should reload the “module”: delete require.cache[require.resolve("@/scripts/rotator")]; or something similar. (Google unload/reload nodejs module).

If something doesn’t work I’ll be able to test it myself before tomorrow.

Edit: after calling require, you should be able to add the script component on an entity.

2 Likes
3

Thank you! I would love to try this rightnow, but unfortunately I gotta leave my workplace in a few minutes and return tomorrow :smiley:

4

It works.
You are awesome @Ivolutio, thanks!

1 Like