I’m trying to integrate playcanvas engine with angular framework (2+, not the old angular.js).
I’ve added playcanvas engine as dependency library.
If any component or service need playcanvas, then it is imported as below.
import * as pc from 'playcanvas';
Things have been working fine until creating script entity.
As you can see from the above image, orbit-camera.js file can’t refer to playcanvas.
Is there anyone solved this problem?
Appreciate in advance…
Can you share some details on how you instantiate the pc.Application class and how you create/add scripts to entities in your code?
I am thinking it may have to do with the order things are happening there.
I’ve created a sample project. You can check it out.
@Leonidas Anything I missed?
I’ve downloaded and compiled your project, so the problem is the PC library isn’t injected in the
window context. It’s included in the
vendor.js file, but isn’t accessible as a global object. If you open the browser and type
pc that should normally show a reference to the library.
orbit-camera.js script isn’t included in the TS repo, so it can’t take advantage of the import you do to find the
pc reference, it requires the global reference.
Not sure what’ the official Angular fix is, but a quick fix is to exclude it from your NPM dependencies list and add it directly to your index.html (you will lose auto-completion on pc properties though).
Or rework the
orbit-camera.js script as an
orbit-camera.ts script that has access to the pc import.
After you fix that you have a second error, your
addOrbitScript() method tries to add a component to an undefined property,
this.orbitCamera is undefined here, if it’s an entity you need to get a reference to it first:
this.orbitCamera = app.root.findByName('Camera');
@sooyong_Kim I have added successfully PC in an Angular project this way :
- in angular.json, add in scripts PC file :
- for fixing TypeScript issues, i declare pc this way :
declare const pc;