playcanvas · willeastcott · Feb 7, 2025 · Feb 7, 2025
diff --git a/examples/assets/scripts/gravity.mjs b/examples/assets/scripts/gravity.mjs
@@ -0,0 +1,8 @@
+import { Script } from 'playcanvas';
+
+export class Gravity extends Script {
+    update(dt) {
+        const { x, y, z } = this.entity.getPosition();
+        this.entity.rigidbody.applyForce(-x, -y, -z);
+    }
+}
diff --git a/examples/assets/scripts/physical-pointer.mjs b/examples/assets/scripts/physical-pointer.mjs
@@ -0,0 +1,18 @@
+import { Script } from 'playcanvas';
+
+/**
+ * @import { CameraComponent } from 'playcanvas';
+ */
+
+export class PhysicalPointer extends Script {
+    initialize() {
+        const canvas = this.app.graphicsDevice.canvas;
+        canvas.addEventListener('pointermove', (event) => {
+            /** @type {CameraComponent} */
+            const camera = this.app.root.findComponent('camera');
+            const { z } = camera.entity.getPosition();
+            const { x, y } = camera.screenToWorld(event.clientX, event.clientY, z);
+            this.entity.setPosition(x, y, 0);
+        });
+    }
+}
diff --git a/examples/js/example-list.mjs b/examples/js/example-list.mjs
@@ -7,6 +7,7 @@ export const examples = [
     { name: 'Gaussian Splatting', path: 'splat.html' },
     { name: 'GLB Loader', path: 'glb.html' },
     { name: 'Physics', path: 'physics.html' },
+    { name: 'Physics Cluster', path: 'physics-cluster.html' },
     { name: 'Positional Sound', path: 'positional-sound.html' },
     { name: 'Shoe Configurator', path: 'shoe-configurator.html' },
     { name: 'Solar System', path: 'solar-system.html' },

diff --git a/examples/physics-cluster.html b/examples/physics-cluster.html
@@ -0,0 +1,84 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
+        <title>PlayCanvas Web Components - Physics Cluster</title>
+        <script type="importmap">
+            {
+                "imports": {
+                    "playcanvas": "../node_modules/playcanvas/build/playcanvas.mjs"
+                }
+            }
+        </script>
+        <script type="module" src="../dist/pwc.mjs"></script>
+        <link rel="stylesheet" href="css/example.css">
+    </head>
+    <body>
+        <pc-app>
+            <!-- Modules -->
+            <pc-module name="Ammo" glue="modules/ammo/ammo.wasm.js" wasm="modules/ammo/ammo.wasm.wasm" fallback="modules/ammo/ammo.js"></pc-module>
+            <!-- Assets -->
+            <pc-asset src="assets/skies/octagon-lamps-photo-studio-2k.hdr" id="studio"></pc-asset>
+            <pc-asset src="assets/scripts/gravity.mjs"></pc-asset>
+            <pc-asset src="assets/scripts/physical-pointer.mjs"></pc-asset>
+            <pc-material id="hotpink" diffuse="hotpink"></pc-material>
+            <pc-material id="mediumseagreen" diffuse="mediumseagreen"></pc-material>
+            <!-- Scene -->
+            <pc-scene gravity="0 0 0">
+                <!-- Sky -->
+                <pc-sky asset="studio" type="none" lighting></pc-sky>
+                <!-- Camera -->
+                <pc-entity name="camera" position="0 0 5">
+                    <pc-camera clear-color="#cccccc" tonemap="neutral"></pc-camera>
+                </pc-entity>
+                <!-- Physical Sphere Template -->
+                <template id="sphere-template">
+                    <pc-entity>
+                        <pc-render type="sphere" material="mediumseagreen"></pc-render>
+                        <pc-collision type="sphere"></pc-collision>
+                        <pc-rigidbody type="dynamic" angular-damping="0.9" linear-damping="0.9" restitution="0.9"></pc-rigidbody>
+                        <pc-scripts>
+                            <pc-script name="gravity"></pc-script>
+                        </pc-scripts>
+                    </pc-entity>
+                </template>
+                <!-- Physical Pointer -->
+                <pc-entity name="pointer" position="0 0 0">
+                    <pc-entity scale="0.5 0.5 0.5">
+                        <pc-render type="sphere"></pc-render>
+                    </pc-entity>
+                    <pc-light type="omni" cast-shadows></pc-light>
+                    <pc-collision type="sphere" radius="0.25"></pc-collision>
+                    <pc-rigidbody type="kinematic" restitution="0.9"></pc-rigidbody>
+                    <pc-scripts>
+                        <pc-script name="physicalPointer"></pc-script>
+                    </pc-scripts>
+                </pc-entity>
+            </pc-scene>
+        </pc-app>
+        <script>
+            document.addEventListener('DOMContentLoaded', () => {
+                const scene = document.querySelector('pc-scene');
+                const sphereTemplate = document.getElementById('sphere-template');
+
+                // Clone and append 40 spheres
+                for (let i = 0; i < 40; i++) {
+                    // Clone the sphere template
+                    const clone = document.importNode(sphereTemplate.content, true);
+                    const sphereEntity = clone.querySelector('pc-entity');
+
+                    // Set a random start position
+                    const x = (Math.random() - 0.5) * 10;
+                    const y = (Math.random() - 0.5) * 10;
+                    const z = (Math.random() - 0.5) * 10;
+                    sphereEntity.setAttribute('position', `${x} ${y} ${z}`);
+
+                    // Append the clone to the scene
+                    scene.appendChild(clone);
+                }
+            });
+        </script>
+        <script type="module" src="js/example.mjs"></script>
+    </body>
+</html>
diff --git a/src/scene.ts b/src/scene.ts
@@ -1,7 +1,8 @@
-import { Color, Scene } from 'playcanvas';
+import { Color, Scene, Vec3 } from 'playcanvas';
 
+import { AppElement } from './app';
 import { AsyncElement } from './async-element';
-import { parseColor } from './utils';
+import { parseColor, parseVec3 } from './utils';
 
 /**
  * The SceneElement interface provides properties and methods for manipulating
@@ -35,6 +36,11 @@ class SceneElement extends AsyncElement {
      */
     private _fogEnd = 1000;
 
+    /**
+     * The gravity of the scene.
+     */
+    private _gravity = new Vec3(0, -9.81, 0);
+
     /**
      * The PlayCanvas scene instance.
      */
@@ -56,7 +62,9 @@ class SceneElement extends AsyncElement {
             this.scene.fog.density = this._fogDensity;
             this.scene.fog.start = this._fogStart;
             this.scene.fog.end = this._fogEnd;
-            // ... set other properties on the scene as well
+
+            const appElement = this.parentElement as AppElement;
+            appElement.app!.systems.rigidbody!.gravity.copy(this._gravity);
         }
     }
 
@@ -155,8 +163,28 @@ class SceneElement extends AsyncElement {
         return this._fogEnd;
     }
 
+    /**
+     * Sets the gravity of the scene.
+     * @param value - The gravity.
+     */
+    set gravity(value: Vec3) {
+        this._gravity = value;
+        if (this.scene) {
+            const appElement = this.parentElement as AppElement;
+            appElement.app!.systems.rigidbody!.gravity.copy(value);
+        }
+    }
+
+    /**
+     * Gets the gravity of the scene.
+     * @returns The gravity.
+     */
+    get gravity() {
+        return this._gravity;
+    }
+
     static get observedAttributes() {
-        return ['fog', 'fog-color', 'fog-density', 'fog-start', 'fog-end'];
+        return ['fog', 'fog-color', 'fog-density', 'fog-start', 'fog-end', 'gravity'];
     }
 
     attributeChangedCallback(name: string, _oldValue: string, newValue: string) {
@@ -176,6 +204,9 @@ class SceneElement extends AsyncElement {
             case 'fog-end':
                 this.fogEnd = parseFloat(newValue);
                 break;
+            case 'gravity':
+                this.gravity = parseVec3(newValue);
+                break;
             // ... handle other attributes as well
         }
     }