chore: migrate examples from orbit-camera script to ESM CameraControls

examples/src/examples/compute/indirect-dispatch.example.mjs

@@ -62,9 +62,11 @@ import {
     UNIFORMTYPE_VEC3,
     UniformBufferFormat,
     UniformFormat,
+    Vec2,
     Vec3,
     createGraphicsDevice
 } from 'playcanvas';
+import { CameraControls } from 'playcanvas/scripts/esm/camera-controls.mjs';
 
 import { data, deviceType } from 'examples/context';
 
@@ -76,8 +78,7 @@ window.focus();
 
 const assets = {
     statue: new Asset('statue', 'container', { url: './assets/models/statue.glb' }),
-    hdri: new Asset('hdri', 'texture', { url: './assets/hdri/wide-street.hdr' }, { mipmaps: false }),
-    orbit: new Asset('orbit', 'script', { url: './scripts/camera/orbit-camera.js' })
+    hdri: new Asset('hdri', 'texture', { url: './assets/hdri/wide-street.hdr' }, { mipmaps: false })
 };
 
 const gfxOptions = {
@@ -285,20 +286,16 @@ rtCamera.addComponent('camera', {
 
 // Add orbit camera script
 rtCamera.addComponent('script');
-rtCamera.script.create('orbitCamera', {
-    attributes: {
-        inertiaFactor: 0.2,
-        focusEntity: statueEntity,
-        distanceMax: 500,
-        frameOnStart: false
-    }
-});
-rtCamera.script.create('orbitCameraInputMouse');
-rtCamera.script.create('orbitCameraInputTouch');
-
 rtCamera.setLocalPosition(-4, 5, 22);
 rtCamera.lookAt(0, 0, 1);
 app.root.addChild(rtCamera);
+rtCamera.script.create(CameraControls, {
+    properties: {
+        focusPoint: new Vec3(0, 0, 1),
+        enableFly: false,
+        zoomRange: new Vec2(0.01, 500)
+    }
+});
 
 // Create main camera (for final view - only immediate layer for drawTexture)
 const immediateLayer = app.scene.layers.getLayerByName('Immediate');

examples/src/examples/compute/particles.example.mjs

@@ -28,9 +28,11 @@ import {
     TONEMAP_ACES,
     TextureHandler,
     TouchDevice,
+    Vec2,
     Vec3,
     createGraphicsDevice
 } from 'playcanvas';
+import { CameraControls } from 'playcanvas/scripts/esm/camera-controls.mjs';
 
 import { deviceType } from 'examples/context';
 
@@ -43,7 +45,6 @@ const canvas = /** @type {HTMLCanvasElement} */ (document.getElementById('applic
 window.focus();
 
 const assets = {
-    orbit: new Asset('script', 'script', { url: './scripts/camera/orbit-camera.js' }),
     helipad: new Asset(
         'helipad-env-atlas',
         'texture',
@@ -99,17 +100,16 @@ cameraEntity.addComponent('camera', {
 app.root.addChild(cameraEntity);
 cameraEntity.setPosition(-150, -60, 190);
 
-// Add orbit camera script with a mouse and a touch support
+// Add camera controls with a mouse and a touch support
 cameraEntity.addComponent('script');
-cameraEntity.script.create('orbitCamera', {
-    attributes: {
-        inertiaFactor: 0.2,
-        frameOnStart: false,
-        distanceMax: 500
-    }
-});
-cameraEntity.script.create('orbitCameraInputMouse');
-cameraEntity.script.create('orbitCameraInputTouch');
+const cameraControls = /** @type {CameraControls} */ (
+    cameraEntity.script.create(CameraControls, {
+        properties: {
+            zoomRange: new Vec2(0.01, 500),
+            enableFly: false
+        }
+    })
+);
 
 // ------- Particle simulation -------
 
@@ -210,7 +210,7 @@ const s1 = addSphere(1, -38, -130, 0, 35);
 addSphere(2, 45, -210, 35, 70);
 
 // Camera focuses on one of the spheres
-cameraEntity.script.orbitCamera.focusEntity = s1;
+cameraControls.focusPoint = s1.getPosition();
 
 // Upload the sphere data to the buffer
 const sphereStorageBuffer = new StorageBuffer(device, numSpheres * 16, BUFFERUSAGE_COPY_DST);

examples/src/examples/compute/vertex-update.example.mjs

@@ -38,8 +38,10 @@ import {
     UNIFORMTYPE_UINT,
     UniformBufferFormat,
     UniformFormat,
+    Vec3,
     createGraphicsDevice
 } from 'playcanvas';
+import { CameraControls } from 'playcanvas/scripts/esm/camera-controls.mjs';
 
 import { deviceType } from 'examples/context';
 
@@ -52,7 +54,6 @@ const assets = {
     color: new Asset('color', 'texture', { url: './assets/textures/seaside-rocks01-color.jpg' }, { srgb: true }),
     normal: new Asset('normal', 'texture', { url: './assets/textures/seaside-rocks01-normal.jpg' }),
     gloss: new Asset('gloss', 'texture', { url: './assets/textures/seaside-rocks01-gloss.jpg' }),
-    orbit: new Asset('script', 'script', { url: './scripts/camera/orbit-camera.js' }),
     helipad: new Asset(
         'helipad-env-atlas',
         'texture',
@@ -143,15 +144,13 @@ cameraEntity.translate(0, 0, 5);
 
 // Add orbit camera script with a mouse and a touch support
 cameraEntity.addComponent('script');
-cameraEntity.script.create('orbitCamera', {
-    attributes: {
-        inertiaFactor: 0.2,
-        focusEntity: entity
+app.root.addChild(cameraEntity);
+cameraEntity.script.create(CameraControls, {
+    properties: {
+        focusPoint: new Vec3(0, 0, 0),
+        enableFly: false
     }
 });
-cameraEntity.script.create('orbitCameraInputMouse');
-cameraEntity.script.create('orbitCameraInputTouch');
-app.root.addChild(cameraEntity);
 
 // a compute shader that will modify the vertex buffer of the mesh every frame
 const shader = device.supportsCompute

examples/src/examples/gaussian-splatting-legacy/picking.example.mjs

@@ -33,9 +33,11 @@ import {
     TONEMAP_NEUTRAL,
     TextureHandler,
     TouchDevice,
+    Vec2,
     Vec3,
     createGraphicsDevice
 } from 'playcanvas';
+import { CameraControls } from 'playcanvas/scripts/esm/camera-controls.mjs';
 
 import { deviceType } from 'examples/context';
 
@@ -81,7 +83,6 @@ app.on('destroy', () => {
 
 const assets = {
     logo: new Asset('gsplat', 'gsplat', { url: './assets/splats/playcanvas-logo/meta.json' }),
-    orbit: new Asset('script', 'script', { url: './scripts/camera/orbit-camera.js' }),
     helipad: new Asset(
         'helipad-env-atlas',
         'texture',
@@ -128,21 +129,20 @@ camera.addComponent('camera', {
 });
 camera.setLocalPosition(-2, -0.5, 2);
 
-// Add orbit camera script with a mouse and a touch support
+// Add camera controls with a mouse and a touch support
 camera.addComponent('script');
-camera.script.create('orbitCamera', {
-    attributes: {
-        inertiaFactor: 0.2,
-        distanceMin: 14,
-        distanceMax: 50
-    }
-});
-camera.script.create('orbitCameraInputMouse');
-camera.script.create('orbitCameraInputTouch');
 app.root.addChild(camera);
+const cameraControls = /** @type {CameraControls} */ (
+    camera.script.create(CameraControls, {
+        properties: {
+            zoomRange: new Vec2(14, 50),
+            enableFly: false
+        }
+    })
+);
 
 // Set camera position looking at origin
-camera.script.orbitCamera.resetAndLookAtPoint(new Vec3(10, 4, 10), Vec3.ZERO);
+cameraControls.reset(Vec3.ZERO, new Vec3(10, 4, 10));
 
 // Custom render passes set up with bloom
 const cameraFrame = new CameraFrame(app, camera.camera);

examples/src/examples/gaussian-splatting/crop.example.mjs

@@ -25,8 +25,11 @@ import {
     TONEMAP_ACES,
     TextureHandler,
     TouchDevice,
+    Vec2,
+    Vec3,
     createGraphicsDevice
 } from 'playcanvas';
+import { CameraControls } from 'playcanvas/scripts/esm/camera-controls.mjs';
 import { GSplatCropShaderEffect } from 'playcanvas/scripts/esm/gsplat/shader-effect-crop.mjs';
 
 import { data, deviceType } from 'examples/context';
@@ -73,8 +76,7 @@ app.on('destroy', () => {
 });
 
 const assets = {
-    hotel: new Asset('gsplat', 'gsplat', { url: './assets/splats/hotel-culpture.compressed.ply' }),
-    orbit: new Asset('script', 'script', { url: './scripts/camera/orbit-camera.js' })
+    hotel: new Asset('gsplat', 'gsplat', { url: './assets/splats/hotel-culpture.compressed.ply' })
 };
 
 await new Promise((resolve) => {
@@ -171,19 +173,19 @@ camera.addComponent('camera', {
 });
 camera.setLocalPosition(3, 1, 0.5);
 
-// Add orbit camera script with a mouse and a touch support
+// Add camera controls with a mouse and a touch support
 camera.addComponent('script');
-camera.script?.create('orbitCamera', {
-    attributes: {
-        inertiaFactor: 0.2,
-        focusEntity: hotel,
-        distanceMax: 2,
-        frameOnStart: false
-    }
-});
-camera.script?.create('orbitCameraInputMouse');
-camera.script?.create('orbitCameraInputTouch');
 app.root.addChild(camera);
+const orbitPivot = hotel.getPosition().clone();
+const cameraControls = /** @type {CameraControls} */ (
+    camera.script.create(CameraControls, {
+        properties: {
+            focusPoint: orbitPivot,
+            zoomRange: new Vec2(0.01, 2),
+            enableFly: false
+        }
+    })
+);
 
 // Setup bloom post-processing
 if (camera.camera) {
@@ -239,12 +241,21 @@ app.on('update', (dt) => {
         autoRotateEnabled = true;
     }
 
-    // Apply auto-rotation
+    // Apply auto-rotation by advancing the camera's azimuth around the pivot
     if (autoRotateEnabled) {
-        const orbitCamera = camera.script?.get('orbitCamera');
-        if (orbitCamera) {
-            orbitCamera.yaw += autoRotateSpeed * dt;
-        }
+        const offset = camera.getPosition().clone().sub(orbitPivot);
+        const r = offset.length();
+        const pitch = Math.asin(Math.max(-1, Math.min(1, offset.y / r)));
+        const yaw = Math.atan2(offset.x, offset.z) + (autoRotateSpeed * dt * Math.PI) / 180;
+        const cp = Math.cos(pitch);
+        cameraControls.reset(
+            orbitPivot,
+            new Vec3(
+                orbitPivot.x + r * Math.sin(yaw) * cp,
+                orbitPivot.y + r * Math.sin(pitch),
+                orbitPivot.z + r * Math.cos(yaw) * cp
+            )
+        );
     }
 
     // Animate AABB with soft bounce (sin-based easing)

examples/src/examples/gaussian-splatting/editor.example.mjs

@@ -49,6 +49,7 @@ import {
     WORKBUFFER_UPDATE_ONCE,
     createGraphicsDevice
 } from 'playcanvas';
+import { CameraControls } from 'playcanvas/scripts/esm/camera-controls.mjs';
 
 import { data, deviceType } from 'examples/context';
 
@@ -102,7 +103,6 @@ app.on('destroy', () => {
 data.set('boxSize', 0.67);
 
 const assets = {
-    orbit: new Asset('script', 'script', { url: './scripts/camera/orbit-camera.js' }),
     biker: new Asset('biker', 'gsplat', { url: './assets/splats/biker.compressed.ply' }),
     apartment: new Asset('apartment', 'gsplat', { url: './assets/splats/apartment.sog' })
 };
@@ -537,23 +537,23 @@ gizmoLayer = Gizmo.createLayer(app);
 gizmo = new TranslateGizmo(camera.camera, gizmoLayer);
 
 camera.addComponent('script');
-const orbitCamera = camera.script.create('orbitCamera', {
-    attributes: {
-        frameOnStart: false,
-        inertiaFactor: 0.07
-    }
-});
-const orbitInput = camera.script.create('orbitCameraInputMouse');
-orbitCamera.resetAndLookAtPoint(cameraPos, focusPos);
+const cameraControls = /** @type {CameraControls} */ (
+    camera.script.create(CameraControls, {
+        properties: {
+            enableFly: false
+        }
+    })
+);
+cameraControls.reset(focusPos, cameraPos);
 
 // Gizmo interaction - disable camera when using gizmo
 gizmo.on('pointer:down', (_x, _y, meshInstance) => {
     if (meshInstance) {
-        orbitInput.enabled = false;
+        cameraControls.enabled = false;
     }
 });
 gizmo.on('pointer:up', () => {
-    orbitInput.enabled = true;
+    cameraControls.enabled = true;
 });
 
 app.mouse.disableContextMenu();

examples/src/examples/gaussian-splatting/flipbook.example.mjs

@@ -40,9 +40,11 @@ import {
     TONEMAP_ACES,
     TextureHandler,
     TouchDevice,
+    Vec2,
     Vec3,
     createGraphicsDevice
 } from 'playcanvas';
+import { CameraControls } from 'playcanvas/scripts/esm/camera-controls.mjs';
 import { GSplatFlipbook } from 'playcanvas/scripts/esm/gsplat/gsplat-flipbook.mjs';
 import { ShadowCatcher } from 'playcanvas/scripts/esm/shadow-catcher.mjs';
 
@@ -99,8 +101,7 @@ const assets = {
         { url: './assets/cubemaps/helipad-env-atlas.png' },
         { type: TEXTURETYPE_RGBP, mipmaps: false }
     ),
-    apartment: new Asset('apartment', 'container', { url: './assets/models/apartment.glb' }),
-    orbit: new Asset('script', 'script', { url: './scripts/camera/orbit-camera.js' })
+    apartment: new Asset('apartment', 'container', { url: './assets/models/apartment.glb' })
 };
 
 await new Promise((resolve) => {
@@ -131,24 +132,19 @@ camera.addComponent('camera', {
     fov: 80
 });
 
-const focusPoint = new Entity();
-focusPoint.setLocalPosition(-80, 80, -20);
+camera.setLocalPosition(-50, 100, 220);
+camera.lookAt(0, 0, 100);
 
-// Add orbit camera script with a mouse and a touch support
+// Add camera controls
 camera.addComponent('script');
-camera.script.create('orbitCamera', {
-    attributes: {
-        inertiaFactor: 0.2,
-        focusEntity: focusPoint,
-        distanceMax: 500,
-        frameOnStart: false
+app.root.addChild(camera);
+camera.script.create(CameraControls, {
+    properties: {
+        focusPoint: new Vec3(0, 0, 100),
+        enableFly: false,
+        zoomRange: new Vec2(0.01, 500)
     }
 });
-camera.script.create('orbitCameraInputMouse');
-camera.script.create('orbitCameraInputTouch');
-camera.setLocalPosition(-50, 100, 220);
-camera.lookAt(0, 0, 100);
-app.root.addChild(camera);
 
 // Create player flipbook
 const player = new Entity('Player');