ESM Scripts

examples/src/examples/camera/orbit.mjs

@@ -6,15 +6,20 @@ import * as pc from 'playcanvas';
  * @returns {Promise<pc.AppBase>} The example application.
  */
 async function example({ canvas, assetPath, scriptsPath }) {
+
+    // We currently need to dynamically import the OrbitCamera script
+    const OrbitCamera = await import(`${scriptsPath}camera/orbit/orbit-camera.mjs`);
+    const OrbitCameraInputMouse = await import(`${scriptsPath}camera/orbit/orbit-camera-input-mouse.mjs`);
+    const OrbitCameraInputTouch = await import(`${scriptsPath}camera/orbit/orbit-camera-input-touch.mjs`);
+
     // Create the app and start the update loop
     const app = new pc.Application(canvas, {
         mouse: new pc.Mouse(document.body),
         touch: new pc.TouchDevice(document.body)
     });
 
     const assets = {
-        statue: new pc.Asset('statue', 'container', { url: assetPath + 'models/statue.glb' }),
-        script: new pc.Asset('script', 'script',    { url: scriptsPath + 'camera/orbit-camera.js' })
+        statue: new pc.Asset('statue', 'container', { url: assetPath + 'models/statue.glb' })
     };
 
     // Set the canvas to fill the window and automatically change resolution to be the same as the canvas size
@@ -51,14 +56,12 @@ async function example({ canvas, assetPath, scriptsPath }) {
     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.addComponent("esmscript");
+    camera.esmscript.add(OrbitCamera.default, {
+        inertiaFactor: 0.2 // Override default of 0 (no inertia)
     });
-    camera.script.create("orbitCameraInputMouse");
-    camera.script.create("orbitCameraInputTouch");
+    camera.esmscript.add(OrbitCameraInputMouse.default);
+    camera.esmscript.add(OrbitCameraInputTouch.default);
     app.root.addChild(camera);
 
     // Create a directional light

package.json

@@ -157,7 +157,7 @@
     "docs": "jsdoc -c conf-api.json",
     "typedocs": "typedoc",
     "lint": "eslint --ext .js,.mjs extras scripts src test utils rollup.config.mjs",
-    "serve": "serve build -l 51000",
+    "serve": "serve build -l 51000 -C",
     "test": "mocha --recursive --require test/fixtures.mjs",
     "test:coverage": "c8 npm test",
     "test:karma": "karma start tests/karma.conf.cjs -- --single-run --release",

scripts/camera/orbit/orbit-camera-input-mouse.mjs

@@ -0,0 +1,129 @@
+////////////////////////////////////////////////////////////////////////////////
+//                       Orbit Camera Mouse Input Script                      //
+////////////////////////////////////////////////////////////////////////////////
+
+const attributes = {
+    orbitSensitivity: {
+        type: 'number',
+        default: 0.3,
+        title: 'Orbit Sensitivity',
+        description: 'How fast the camera moves around the orbit. Higher is faster'
+    },
+    distanceSensitivity: {
+        type: 'number',
+        default: 0.15,
+        title: 'Distance Sensitivity',
+        description: 'How fast the camera moves in and out. Higher is faster'
+    }
+};
+
+export default class OrbitCameraInputMouse {
+    static attributes = attributes;
+
+    // initialize code called once per entity
+    initialize() {
+        this.orbitCamera = this.entity.esmscript.get('OrbitCamera');
+
+        if (this.orbitCamera) {
+
+            this.app.mouse.on(pc.EVENT_MOUSEDOWN, this.onMouseDown, this);
+            this.app.mouse.on(pc.EVENT_MOUSEUP, this.onMouseUp, this);
+            this.app.mouse.on(pc.EVENT_MOUSEMOVE, this.onMouseMove, this);
+            this.app.mouse.on(pc.EVENT_MOUSEWHEEL, this.onMouseWheel, this);
+
+            // Listen to when the mouse travels out of the window
+            window.addEventListener('mouseout', this.onMouseOut, false);
+
+        }
+
+        // Disabling the context menu stops the browser displaying a menu when
+        // you right-click the page
+        this.app.mouse.disableContextMenu();
+
+        this.lookButtonDown = false;
+        this.panButtonDown = false;
+        this.lastPoint = new pc.Vec2();
+    }
+
+    // Remove the listeners so if this entity is destroyed
+    destroy() {
+        this.app.mouse.off(pc.EVENT_MOUSEDOWN, this.onMouseDown, this);
+        this.app.mouse.off(pc.EVENT_MOUSEUP, this.onMouseUp, this);
+        this.app.mouse.off(pc.EVENT_MOUSEMOVE, this.onMouseMove, this);
+        this.app.mouse.off(pc.EVENT_MOUSEWHEEL, this.onMouseWheel, this);
+
+        window.removeEventListener('mouseout', this.onMouseOut, false);
+    }
+
+
+    static fromWorldPoint = new pc.Vec3();
+
+    static toWorldPoint = new pc.Vec3();
+
+    static worldDiff = new pc.Vec3();
+
+
+    pan(screenPoint) {
+        var fromWorldPoint = OrbitCameraInputMouse.fromWorldPoint;
+        var toWorldPoint = OrbitCameraInputMouse.toWorldPoint;
+        var worldDiff = OrbitCameraInputMouse.worldDiff;
+
+        // For panning to work at any zoom level, we use screen point to world projection
+        // to work out how far we need to pan the pivotEntity in world space
+        var camera = this.entity.camera;
+        var distance = this.orbitCamera.distance;
+
+        camera.screenToWorld(screenPoint.x, screenPoint.y, distance, fromWorldPoint);
+        camera.screenToWorld(this.lastPoint.x, this.lastPoint.y, distance, toWorldPoint);
+
+        worldDiff.sub2(toWorldPoint, fromWorldPoint);
+
+        this.orbitCamera.pivotPoint.add(worldDiff);
+    }
+
+    onMouseDown(event) {
+        switch (event.button) {
+            case pc.MOUSEBUTTON_LEFT:
+                this.lookButtonDown = true;
+                break;
+            case pc.MOUSEBUTTON_MIDDLE:
+            case pc.MOUSEBUTTON_RIGHT:
+                this.panButtonDown = true;
+                break;
+        }
+    }
+
+    onMouseUp(event) {
+        switch (event.button) {
+            case pc.MOUSEBUTTON_LEFT:
+                this.lookButtonDown = false;
+                break;
+            case pc.MOUSEBUTTON_MIDDLE:
+            case pc.MOUSEBUTTON_RIGHT:
+                this.panButtonDown = false;
+                break;
+        }
+    }
+
+    onMouseMove(event) {
+        if (this.lookButtonDown) {
+            this.orbitCamera.pitch -= event.dy * this.orbitSensitivity;
+            this.orbitCamera.yaw -= event.dx * this.orbitSensitivity;
+
+        } else if (this.panButtonDown) {
+            this.pan(event);
+        }
+
+        this.lastPoint.set(event.x, event.y);
+    }
+
+    onMouseWheel(event) {
+        this.orbitCamera.distance -= event.wheel * this.distanceSensitivity * (this.orbitCamera.distance * 0.1);
+        event.event.preventDefault();
+    }
+
+    onMouseOut(event) {
+        this.lookButtonDown = false;
+        this.panButtonDown = false;
+    }
+}

scripts/camera/orbit/orbit-camera-input-touch.mjs

@@ -0,0 +1,137 @@
+////////////////////////////////////////////////////////////////////////////////
+//                       Orbit Camera Touch Input Script                      //
+////////////////////////////////////////////////////////////////////////////////
+
+const attributes = {
+    orbitSensitivity: {
+        type: 'number',
+        default: 0.3,
+        title: 'Orbit Sensitivity',
+        description: 'How fast the camera moves around the orbit. Higher is faster'
+    },
+    distanceSensitivity: {
+        type: 'number',
+        default: 0.15,
+        title: 'Distance Sensitivity',
+        description: 'How fast the camera moves in and out. Higher is faster'
+    }
+};
+
+export default class OrbitCameraInputTouch {
+    static attributes = attributes;
+
+    // initialize code called once per entity
+    initialize() {
+        this.orbitCamera = this.entity.esmscript.get('OrbitCamera');
+
+        // Store the position of the touch so we can calculate the distance moved
+        this.lastTouchPoint = new pc.Vec2();
+        this.lastPinchMidPoint = new pc.Vec2();
+        this.lastPinchDistance = 0;
+
+        if (this.orbitCamera && this.app.touch) {
+            // Use the same callback for the touchStart, touchEnd and touchCancel events as they
+            // all do the same thing which is to deal the possible multiple touches to the screen
+            this.app.touch.on(pc.EVENT_TOUCHSTART, this.onTouchStartEndCancel, this);
+            this.app.touch.on(pc.EVENT_TOUCHEND, this.onTouchStartEndCancel, this);
+            this.app.touch.on(pc.EVENT_TOUCHCANCEL, this.onTouchStartEndCancel, this);
+
+            this.app.touch.on(pc.EVENT_TOUCHMOVE, this.onTouchMove, this);
+
+        }
+    }
+
+    destroy() {
+        this.app.touch.off(pc.EVENT_TOUCHSTART, this.onTouchStartEndCancel, this);
+        this.app.touch.off(pc.EVENT_TOUCHEND, this.onTouchStartEndCancel, this);
+        this.app.touch.off(pc.EVENT_TOUCHCANCEL, this.onTouchStartEndCancel, this);
+
+        this.app.touch.off(pc.EVENT_TOUCHMOVE, this.onTouchMove, this);
+    }
+
+    getPinchDistance(pointA, pointB) {
+        // Return the distance between the two points
+        var dx = pointA.x - pointB.x;
+        var dy = pointA.y - pointB.y;
+
+        return Math.sqrt((dx * dx) + (dy * dy));
+    }
+
+    calcMidPoint(pointA, pointB, result) {
+        result.set(pointB.x - pointA.x, pointB.y - pointA.y);
+        result.mulScalar(0.5);
+        result.x += pointA.x;
+        result.y += pointA.y;
+    }
+
+    onTouchStartEndCancel(event) {
+        // We only care about the first touch for camera rotation. As the user touches the screen,
+        // we stored the current touch position
+        var touches = event.touches;
+        if (touches.length === 1) {
+            this.lastTouchPoint.set(touches[0].x, touches[0].y);
+
+        } else if (touches.length === 2) {
+            // If there are 2 touches on the screen, then set the pinch distance
+            this.lastPinchDistance = this.getPinchDistance(touches[0], touches[1]);
+            this.calcMidPoint(touches[0], touches[1], this.lastPinchMidPoint);
+        }
+    }
+
+    static fromWorldPoint = new pc.Vec3();
+
+    static toWorldPoint = new pc.Vec3();
+
+    static worldDiff = new pc.Vec3();
+
+
+    pan(midPoint) {
+        var fromWorldPoint = OrbitCameraInputTouch.fromWorldPoint;
+        var toWorldPoint = OrbitCameraInputTouch.toWorldPoint;
+        var worldDiff = OrbitCameraInputTouch.worldDiff;
+
+        // For panning to work at any zoom level, we use screen point to world projection
+        // to work out how far we need to pan the pivotEntity in world space
+        var camera = this.entity.camera;
+        var distance = this.orbitCamera.distance;
+
+        camera.screenToWorld(midPoint.x, midPoint.y, distance, fromWorldPoint);
+        camera.screenToWorld(this.lastPinchMidPoint.x, this.lastPinchMidPoint.y, distance, toWorldPoint);
+
+        worldDiff.sub2(toWorldPoint, fromWorldPoint);
+
+        this.orbitCamera.pivotPoint.add(worldDiff);
+    }
+
+
+    static pinchMidPoint = new pc.Vec2();
+
+    onTouchMove(event) {
+        var pinchMidPoint = OrbitCameraInputTouch.pinchMidPoint;
+
+        // We only care about the first touch for camera rotation. Work out the difference moved since the last event
+        // and use that to update the camera target position
+        var touches = event.touches;
+        if (touches.length === 1) {
+            var touch = touches[0];
+
+            this.orbitCamera.pitch -= (touch.y - this.lastTouchPoint.y) * this.orbitSensitivity;
+            this.orbitCamera.yaw -= (touch.x - this.lastTouchPoint.x) * this.orbitSensitivity;
+
+            this.lastTouchPoint.set(touch.x, touch.y);
+
+        } else if (touches.length === 2) {
+            // Calculate the difference in pinch distance since the last event
+            var currentPinchDistance = this.getPinchDistance(touches[0], touches[1]);
+            var diffInPinchDistance = currentPinchDistance - this.lastPinchDistance;
+            this.lastPinchDistance = currentPinchDistance;
+
+            this.orbitCamera.distance -= (diffInPinchDistance * this.distanceSensitivity * 0.1) * (this.orbitCamera.distance * 0.1);
+
+            // Calculate pan difference
+            this.calcMidPoint(touches[0], touches[1], pinchMidPoint);
+            this.pan(pinchMidPoint);
+            this.lastPinchMidPoint.copy(pinchMidPoint);
+        }
+    }
+}