Add Splat Viewer example (#78)

* Add Splat Viewer example and enhance EnvAtlasComponent functionality

* Fix example links and improve formatting in Splat Viewer documentation

* Add publish workflow and update CI configuration

* Add repository field to package.json

Author: marklundin

.github/workflows/ci.yml

@@ -27,7 +27,4 @@ jobs:
         run: npm i
 
       - name: Lint ESLint
-        run: npm run lint
-
-      - name: Continuous Release
-        run: npx pkg-pr-new publish './packages/lib' --compact
+        run: npm run lint

.github/workflows/publish.yml

@@ -0,0 +1,30 @@
+name: Publish
+
+on:
+  pull_request:
+    branches: [main]
+
+jobs:
+  lint:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Cancel Previous Runs
+        uses: styfle/[email protected]
+        with:
+          access_token: ${{ github.token }}
+
+      - name: Checkout Main
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js 18.x
+        uses: actions/setup-node@v4
+        with:
+          node-version: 18.x
+          cache: 'npm'
+
+      - name: Install Dependencies
+        run: npm i
+  
+      - name: Continuous Release
+        run: npx pkg-pr-new publish './packages/lib' --compact

package-lock.json

@@ -2,6 +2,10 @@
     "name": "playcanvas-react-monorepo",
     "description": "A monorepo for PlayCanvas React renderer and examples. Please see the packages directory for more information.",
     "private": true,
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/playcanvas/react/tree/main/packages/lib"
+    },
     "workspaces": [
         "packages/*"
     ],

package.json

@@ -21,6 +21,10 @@ const examples = {
   'model-viewer' : {
     href: '/examples/model-viewer'
   },
+  'splats' : {
+    title: "Splat Viewer",
+    href: '/examples/splats'
+  },
   'physics' : {
     href: '/examples/physics'
   },
@@ -71,7 +75,6 @@ export default {
     items: {
       ...examples,
       'splats': {
-        display: 'hidden'
       }
     },
   },

packages/docs/src/app/_meta.global.ts

@@ -8,16 +8,17 @@ import { useApp } from "@playcanvas/react/hooks";
 
 type EnvAtlasComponentsProps = {
     src: string;
+    hideSkybox: boolean;
     intensity?: number;
 }
 
- const EnvAtlasComponent: FC<EnvAtlasComponentsProps> = ({ src, intensity = 1, ...props }) => {
+ const EnvAtlasComponent: FC<EnvAtlasComponentsProps> = ({ src, intensity = 1, hideSkybox = true, ...props }) => {
 
     const app = useApp();
 
     useLayoutEffect(() => {
         const layer = app?.scene?.layers?.getLayerByName('Skybox');
-        if(layer){
+        if(hideSkybox && layer){
             layer.enabled = false;
         }
         app.scene.skyboxIntensity = intensity;

packages/docs/src/components/EnvAtlas.tsx

@@ -0,0 +1,31 @@
+export const Example = () => {
+
+    /**
+     * Loading a Gaussian Splat ply
+     */
+
+    const splatURL = "https://6rpjo46zo7.ufs.sh/f/dTTBXSHFOX4z7irrg5DfZElT6yeQYKvdjgi5IsoB0cmu9OtF"
+    const { data: splat } = useSplat(splatURL);
+
+    return <Entity>
+        {/* Create a camera entity */}
+        <EnvAtlasComponent 
+            src='/environment-map.png' 
+            hideSkybox={false}/>
+
+        <Entity>
+            <Camera fov={30} />
+            { splat && <OrbitControls 
+                distanceMin={3} 
+                distanceMax={6} /> }
+        </Entity>
+        {/* Create the splat entity */}
+        <Entity 
+            rotation={[0, -40, 0]} 
+            position={[0.2, -1.7, -6]}>
+            { splat && <GSplat asset={splat}/> }
+        </Entity>
+    </Entity>
+}
+
+<Example />

packages/docs/src/content/splats.mdx

@@ -85,6 +85,7 @@
         "access": "public"
     },
     "devDependencies": {
+        "pkg-pr-new": "^0.0.41",
         "typescript": "5.7.3"
     },
     "dependencies": {