The OrbitCamera example includes the orbit-camera.js script, but this script looks pretty hard coded to the editor. At least that’s how I’m interpreting pc.createScript and OrbitCamera.attributes.add . This module is also vanilla JS and doesn’t have an export statement.
I’m trying to reverse engineer + hack up this script to make it usable in a third party application using the PlayCanvas API. It’s a little confusing. It’s not clear how this.entity gets set for example (and when it does, this.entity.camera is undefined, and Typescript complains this is a read-only property when I try to set it. Typescript also complains about a few other lines in the file, so it’s not immediately clear if the OrbitCamera script is doing some internal hacking, or if it’s stale and hasn’t been updated to match PlayCanvas’s type definitions, or if the types themselves in PC’s core are off.
I searched npm for playcanvas orbit but didn’t find anything. I figured I’d ask since Babylon and Three have canonical orbitcamera implementations that third party users can consume. Is there already something like this for PlayCanvas I can consume?
Hi @andyandy,
Check this engine example on how to setup a simple camera entity with the orbit camera script, in code:
// Create a camera with an orbit camera script
const camera = new pc.Entity();
camera.addComponent("camera", {
clearColor: new pc.Color(0.4, 0.45, 0.5),
});
camera.addComponent("script");
camera.script.create("orbitCamera", {
attributes: {
inertiaFactor: 0.2, // Override default of 0 (no inertia)
},
});
camera.script.create("orbitCameraInputMouse");
camera.script.create("orbitCameraInputTouch");
app.root.addChild(camera);
https://playcanvas.github.io/#/camera/orbit
Thank you, I think that’s putting me on the right track.
I’m in a Typescript project, and I’m trying to do something like:
import 'playcanvas/scripts/camera/orbit-camera.js';
This doesn’t work. At least one problem is the orbit-camera.js assumes a global pc variable. This doesn’t seem to work either:
import * as pc from 'playcanvas';
window.pc = pc;
require('playcanvas/scripts/camera/orbit-camera.js');
I’m not sure why, it probably has to do with the module resolution order.
Three.js has a jsm module for OrbitControls: https://github.com/mrdoob/three.js/blob/dev/examples/jsm/controls/OrbitControls.js
And Babylon has a built in ArcRotateCamera. For folks using Typescript + build systems, these two libraries work out of the box.
It would be great if PlayCanvas also provided a first class module for an orbit camera. Either way I’ll keep hacking on it to see what the easiest way is to import into an existing Typescript project.
Yes, I don’t think that will work using that script. Although I agree that’s a valid request, try adding a feature request in the engine repo about it.
There’s a TS orbit camera in the model viewer project here https://github.com/playcanvas/model-viewer/blob/main/src/orbit-camera.ts
Works slightly differently to the standard orbit camera in the editor project templates though
Otherwise, you would need to port the Editor version of orbit camera to TS (see this for a playcanvas script example https://github.com/playcanvas/playcanvas-editor-ts-template/blob/main/src/helloworld.ts) You will need to pass the app object to register script as the third argument though.
1 Like
Thank you both. @yaustar I was able to consume the orbit-camera.ts file into my project. I had to modify it slightly to avoid the home grown App and instead use a pc.Application. It would be awesome if I could install this via npm, or import from the guts of playcanvas.
Now I have an orbit camera, thank you! Live: Hypnocube - Shaderfrog 2.0 Hybrid Graph Demo
1 Like
