create-playcanvas 0.3.0 → 0.5.0

package/templates/web-components/splat-viewer/index.html

@@ -0,0 +1,31 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <link rel="icon" type="image/png" href="/src/assets/playcanvas.png" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>PlayCanvas + Web Components</title>
+    </head>
+    <body>
+        <!-- Antialiasing is disabled - splat rendering is fragment bound, so MSAA costs a lot and adds little -->
+        <pc-app antialias="false" high-resolution="false">
+            <!-- Hosted so the template stays small. Capture or edit your own splat at
+                 https://superspl.at, then drop the .sog or .ply in public/ and point this at it instead -->
+            <pc-asset id="splat" src="https://developer.playcanvas.com/assets/toy-cat.sog"></pc-asset>
+
+            <pc-scene>
+                <!-- Camera. Orbit controls are attached in src/main.ts -->
+                <pc-entity name="camera" position="0 0 2.5">
+                    <pc-camera></pc-camera>
+                </pc-entity>
+
+                <!-- Splats are captured in their own space, so this one needs offsetting and flipping upright -->
+                <pc-entity name="toy cat" position="0 -0.7 0" rotation="0 0 180">
+                    <pc-gsplat asset="splat"></pc-gsplat>
+                </pc-entity>
+            </pc-scene>
+        </pc-app>
+
+        <script type="module" src="/src/main.ts"></script>
+    </body>
+</html>

package/templates/web-components/splat-viewer/src/main.ts

@@ -0,0 +1,14 @@
+import { whenReady } from '@playcanvas/web-components';
+import { CameraControls } from 'playcanvas/scripts/esm/camera-controls.mjs';
+
+import './style.css';
+
+// The camera is awaited as <pc-camera> rather than the <pc-entity> holding it - an entity becomes
+// ready before its component children do, and CameraControls needs the camera component to exist
+const cameraComponent = await whenReady('pc-camera');
+
+// Engine scripts are resolved by the bundler, so they are attached through the entity rather than
+// with <pc-script name="...">, which only resolves scripts fetched at runtime by <pc-asset>
+const camera = cameraComponent.closestEntity;
+camera?.entity?.addComponent('script');
+camera?.entity?.script?.create(CameraControls);

package/templates/web-components/splat-viewer/src/style.css

@@ -0,0 +1,8 @@
+body {
+    margin: 0;
+    overflow: hidden;
+}
+
+pc-app {
+    display: block;
+}

package/templates/vanilla-ts/eslint.config.mjs

@@ -1,3 +0,0 @@
-import typescriptConfig from '@playcanvas/eslint-config/typescript';
-
-export default typescriptConfig;