Updates @playcanvas/blocks to 2.8.0 (#172)

* Update playcanvas dependency to v2.8.0 and refactor related components

- Reintroduced playcanvas dependency in pnpm-lock.yaml and package.json for blocks.
- Updated imports in SmartCamera and SplatViewer components to include new playcanvas entities.
- Adjusted rotation values in example documentation for consistency.
- Enhanced GSplat component to validate asset prop as an Asset instance.

* changeset

Author: marklundin

.changeset/gentle-donkeys-travel.md

@@ -0,0 +1,5 @@
+---
+"@playcanvas/blocks": patch
+---
+
+Updated @playcanvas/blocks to use 2.8.0 of the engine

packages/blocks/package.json

@@ -67,6 +67,7 @@
   "devDependencies": {
     "@types/react": "19.1.8",
     "@types/react-dom": "19.1.6",
+    "playcanvas": "2.8.0",
     "tsc-alias": "1.8.16"
   },
   "peerDependencies": {

packages/blocks/src/splat-viewer/smart-camera.tsx

@@ -4,7 +4,7 @@ import { useEffect, useRef, useState } from "react";
 import { Entity } from "@playcanvas/react";
 import { Camera, Script } from "@playcanvas/react/components";
 import { useTimeline, useAssetViewer } from "./splat-viewer-context";
-import { Vec3 } from "playcanvas";
+import { Vec3, Entity as PcEntity } from "playcanvas";
 
 import { AnimationTrack, AnimCamera, createRotationTrack } from "./utils/animation"; // assumed
 import { computeStartingPose, Pose, PoseType } from "./utils/pose";
@@ -72,7 +72,7 @@ export function SmartCamera({
   variant?: "paris" | "neutral" | "noir" | "none" | PostEffectsSettings;
 }) {
 
-  const entityRef = useRef<pc.Entity>(null);
+  const entityRef = useRef<PcEntity>(null);
   const { subscribe, isPlaying } = useTimeline();
   const { mode, subscribeCameraReset } = useAssetViewer();
   const timeoutRef = useRef(0);
@@ -83,9 +83,10 @@ export function SmartCamera({
   useEffect(() => {
     timeoutRef.current = setTimeout(() => {
       setShouldUseRenderOnCameraChange(true);
+      app.renderNextFrame = true;
     }, 200);
     return () => clearTimeout(timeoutRef.current);
-  }, []);
+  });
 
   useRenderOnCameraChange(shouldUseRenderOnCameraChange ? entityRef.current : null);
 

packages/blocks/src/splat-viewer/splat-viewer.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { Application } from "@playcanvas/react"
+import { Application, Entity } from "@playcanvas/react"
 import { useApp, useSplat } from "@playcanvas/react/hooks"
 import { GSplat } from "@playcanvas/react/components"
 import { Suspense, useCallback, useEffect, useRef, useState } from "react"
@@ -10,8 +10,7 @@ import { cn } from "@lib/utils"
 import { AnimationTrack } from "./utils/animation"
 import { SmartCamera } from "./smart-camera"
 import { HelpDialog } from "./help-dialog"
-import { FILLMODE_NONE } from "playcanvas"
-import { RESOLUTION_AUTO } from "playcanvas"
+import { RESOLUTION_AUTO, FILLMODE_NONE } from "playcanvas"
 import { useSubscribe } from "./hooks/use-subscribe"
 export type CameraMode = 'orbit' |  'fly';
 
@@ -160,7 +159,9 @@ function SplatComponent({
                 // <InteractiveCamera fov={30} type={type} /> 
                 <SmartCamera fov={30} variant={variant} />
             }
-            <GSplat asset={asset} />
+            <Entity rotation={[0, 0, 180]}>
+                <GSplat asset={asset} />
+            </Entity>
         </>
     )
 }

packages/docs/content/examples/splats.mdx

@@ -3,7 +3,6 @@ export const Example = () => {
     /**
      * Loading a Gaussian Splat ply
      */
-
     const splatURL = "https://6rpjo46zo7.ufs.sh/f/dTTBXSHFOX4z7irrg5DfZElT6yeQYKvdjgi5IsoB0cmu9OtF"
     const { data: splat } = useSplat(splatURL);
 
@@ -19,7 +18,7 @@ export const Example = () => {
         </Entity>
         {/* Create the splat entity */}
         <Entity 
-            rotation={[0, -40, 0]} 
+            rotation={[0, 40, 180]} 
             position={[0.2, -1.7, -6]}>
             { splat && <GSplat asset={splat}/> }
         </Entity>

packages/lib/src/components/GSplat.tsx

@@ -2,7 +2,7 @@
 
 import { FC } from "react";
 import { useComponent } from "../hooks";
-import { Entity, GSplatComponent } from "playcanvas";
+import { Asset, Entity, GSplatComponent } from "playcanvas";
 import { PublicProps } from "../utils/types-utils";
 import { validatePropsWithDefaults, createComponentDefinition, getStaticNullApplication } from "../utils/validation";
 /**
@@ -16,7 +16,6 @@ import { validatePropsWithDefaults, createComponentDefinition, getStaticNullAppl
 export const GSplat: FC<GSplatProps> = (props) => {
 
     const safeProps = validatePropsWithDefaults<GSplatProps, GSplatComponent>(props, componentDefinition);
-
     useComponent("gsplat", safeProps, componentDefinition.schema);
     return null
 
@@ -29,4 +28,13 @@ const componentDefinition = createComponentDefinition(
     () => new Entity("mock-gsplat", getStaticNullApplication()).addComponent('gsplat') as GSplatComponent,
     (component) => (component as GSplatComponent).system.destroy(),
     "GSplatComponent"
-)
+)
+
+componentDefinition.schema = {
+    ...componentDefinition.schema,
+    asset: {
+        validate: (val: unknown) => val instanceof Asset,
+        errorMsg: (val: unknown) => `Invalid value for prop "asset": "${JSON.stringify(val)}". Expected an Asset.`,
+        default: null
+    }
+}