Update dependencies and enhance documentation for @playcanvas/react

README.md

@@ -4,7 +4,9 @@
 [![Twitter](https://img.shields.io/twitter/follow/playcanvas?label=%40playcanvas&style=flat&colorA=000000&colorB=000000&logo=twitter&logoColor=000000)](https://twitter.com/playcanvas)
 ![Issues](https://img.shields.io/github/issues/playcanvas/react?style=flat&colorA=000000&colorB=000000)
 
-A lightweight, declarative library for for creating 3D apps, with an extensible Entity-Component System supporting Physics, Pointer Events, and a built-in Scripting API.
+A lightweight, declarative library for for creating 3D apps that supports Physics, Pointer Events, Gaussian Splats and a built-in Scripting API straight out of the box.
+
+View the docs at [playcanvas-react.vercel.app](https://playcanvas-react.vercel.app)
 
 <img width="1339" alt="image" src="https://github.com/user-attachments/assets/c07f915a-fae2-4aa8-a727-46ec7f300aa8"></img>
 
@@ -39,12 +41,12 @@ const App = (lambo) => {
 
 #### Features
 
-- [x] Simple nested Entities, Components and Assets.
-- [x] Suspend 3D Assets during loading with [`swr`](https://www.npmjs.com/package/swr) or [`react-query`](https://www.npmjs.com/package/@tanstack/react-query).
-- [x] Supports PointerEvents with event bubbling
-- [x] Supports [Ammo.js](https://github.com/kripken/ammo.js) physics out of the box
-- [x] Subscribe to frame updates with the `<Script/>` component
-- [x] Extensible Entity Component System that allows you to add new features.
+- Simple declarative API for creating 3D apps
+- Supports Asset loading with Suspense boundaries.
+- PointerEvents with event bubbling
+- Supports [Physics]((https://github.com/kripken/ammo.js)) out of the box
+- Imperative Scripting API for the `<Script/>` component for high performance updates.
+- Extensible Entity Component System that allows you to add new features.
 
 #### Learning more
 

packages/docs/package.json

@@ -22,8 +22,8 @@
     "motion": "^11.13.1",
     "next": "^15.0.2",
     "next-mdx-remote-client": "^1.0.3",
-    "nextra": "^4.0.0-app-router.34",
-    "nextra-theme-docs": "^4.0.0-app-router.30",
+    "nextra": "^4.0.0",
+    "nextra-theme-docs": "^4.0.0",
     "playcanvas": "^2.3.3",
     "react": "^18.3.1",
     "react-codesandboxer": "^3.1.5",

packages/docs/src/app/docs/page.mdx

@@ -9,9 +9,9 @@ import { OpenHomePageExampleInCodeSandbox } from '@/docs-components/code-sandbox
 import { OpenHomePageExampleInStackBlitz } from '@/docs-components/OpenInStackblitz'
 import Example from '@/templates/HomePageExample'
 
-# `@playcanvas/react`
+## @playcanvas/react
 
-A react library for for creating 3D apps, with an extensible Entity-Component System supporting physics, interaction, and scripting.
+A thin react library for for creating 3D apps that suppports pointer events, physics, gaussian splats, and more straight out of the box.
 
 import { Tabs, Code } from 'nextra/components'
 
@@ -62,11 +62,9 @@ import { Tabs, Code } from 'nextra/components'
   <OpenHomePageExampleInStackBlitz />
 </Cards>
 
+### How does it work?
 
-
-## How does it work?
-
-The library provides a thin declarative layer around the PlayCanvas ECS. You create an `Application` and add `Entities` to it. Entities have position, rotation and scale. You add behaviour by attaching `Components` to entities.
+The library provides a thin declarative layer around the open source library [PlayCanvas](https://playcanvas.com). You create an `Application` and add `Entities` to it. Entities have position, rotation and scale. You add behaviour by attaching `Components` to entities.
 
 Here's a simple example rendering a simple 3D asset with orbit controls.
 
@@ -90,7 +88,7 @@ const App = (car) => {
 }
 ```
 
-## Features
+### Features
 
 PlayCanvas comes with a number of built in components and scripts that you can use. This makes it easy to get started building your app.
 

packages/docs/src/app/faq/page.mdx

@@ -10,6 +10,7 @@ PlayCanvas is built on the concept of Entities and Components (ECS). Entities ar
 No, this is not a replacement for the PlayCanvas Editor. It's an alternative way to build projects using web tooling.
 
 ## How does this compare to react-three-fiber?
-Conceptually it's similar to [react-three-fiber](https://github.com/pmndrs/react-three-fiber). It's a declarative way to build 3D apps. However PlayCanvas has an ECS and a neccesarily wider set of features than three.js, such as an asset system and physics system.
+Conceptually it's similar to [react-three-fiber](https://github.com/pmndrs/react-three-fiber). However PlayCanvas has an ECS that include a wider set of features meaning features such as physics, gaussian splats, and more are available out of the box.
 
-Most importantly, react-three-fiber is a custom React renderer. This library is not.
+## Is this a react renderer?
+No, not currently, although work is underway to [implement a the react renderer](https://github.com/playcanvas/react/pull/35). At the moment, it's simply a thin wrapper around the PlayCanvas engine, surfacing the PlayCanvas API as a react component library.

packages/docs/src/app/layout.tsx

@@ -1,7 +1,7 @@
 
 /* eslint-env node */
 import { Footer, Layout, Navbar } from 'nextra-theme-docs'
-import { Head } from 'nextra/components'
+import { Banner, Head } from 'nextra/components'
 import { getPageMap } from 'nextra/page-map'
 import './globals.css'
 import { CodeXml } from 'lucide-react'
@@ -32,12 +32,14 @@ export const metadata = {
 export default async function RootLayout({ children }: { children: React.ReactNode }) {
   const navbar = (
     <Navbar
+
       logo={
         <div className="flex items-center gap-2">
           <div className="rounded-full bg-zinc-800 p-2 inline-block">
             <CodeXml size={24} strokeWidth={2} />
           </div>
-          <span style={{ opacity: '60%' }}>Simple 3D for the Web</span>
+          <span className='font-bold'>@playcanvas/react</span>
+          <span style={{ opacity: '60%' }}>- Declarative 3D</span>
         </div>
       }
       // PlayCanvas discord server
@@ -52,8 +54,13 @@ export default async function RootLayout({ children }: { children: React.ReactNo
       <Head faviconGlyph="✦" />
       <body>
         <Layout
+          banner={<Banner storageKey="0.2.0-release"><a href="https://github.com/playcanvas/react/releases/tag/v0.2.0" target="_blank" rel="noreferrer">
+            🎉 <b>@playcanvas/react 0.2.0</b> is released. Read more →
+          </a></Banner>}
           navbar={navbar}
-          footer={<Footer />}
+          footer={<Footer>
+            MIT {new Date().getFullYear()} ©{' '} PlayCanvas.
+          </Footer>}
           editLink="Edit this page on GitHub"
           docsRepositoryBase="https://github.com/playcanvas/react/blob/main/examples/docs"
           sidebar={{ 

packages/docs/src/templates/HomePageExample.jsx

@@ -9,6 +9,8 @@ import Grid from '@/components/Grid';
 import AutoRotate from '@/components/AutoRotate';
 import { StaticPostEffects } from '@/components/PostEffects';
 import { LoadingSpinner } from '@/components/LoadingSpinner';
+import ShadowCatcher from '@/components/ShadowCatcher';
+
 const Example = () => {
 
     const { data: envMap } = useEnvAtlas('/environment-map.png');
@@ -17,7 +19,7 @@ const Example = () => {
     if(!envMap || !model) return <LoadingSpinner />;
 
     return (<Entity>
-        <EnvAtlas asset={envMap} intensity={0.5} showSkybox={false} />
+        <EnvAtlas asset={envMap} intensity={0.8} showSkybox={false} />
         <Grid />
         <Entity name='camera' position={[4, 1, 4]}>
             <Camera clearColor='#090707' fov={28} />
@@ -26,7 +28,9 @@ const Example = () => {
             <AutoRotate />
         </Entity>
         <Entity>
-            <Container asset={model}/>
+            <Container asset={model}>
+                <ShadowCatcher width={5} depth={5}/>
+            </Container>
         </Entity>
     </Entity>)
 }