Adds @playcanvas/react docs

docs/user-manual/playcanvas-react/building-a-scene.md

@@ -0,0 +1,174 @@
+---
+title: Building a Scene
+sidebar_position: 5
+---
+
+import { Application, Entity } from '@playcanvas/react';
+import { Camera, Render, Light, Collision } from '@playcanvas/react/components';
+import { useState, lazy } from 'react';
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import InteractiveSource from '!!raw-loader!@site/src/components/playcanvas-react-example';
+import CodeBlock from '@theme/CodeBlock';
+import BrowserOnly from '@docusaurus/BrowserOnly';
+
+export const LazyInteractive = lazy(() => import('@site/src/components/playcanvas-react-example'));
+
+Let's build a simple 3D scene step by step using PlayCanvas React. We'll create a basic scene with a lit sphere and see it running live in your browser.
+
+## Starting Point
+
+First, let's create the basic structure of our application using the `Application` component:
+
+```jsx
+import { Application } from '@playcanvas/react'
+
+export default function App() {
+  return (
+    <Application>
+      {/* Your 3D scene will go here */}
+    </Application>
+  )
+}
+```
+
+This creates an empty 3D scene. However, we can't see anything rendered yet. We need a camera and some content.
+
+## Adding a Camera
+
+To view our scene, we need a camera. In PlayCanvas React, we use `Entity` components as containers and attach component behaviors like `Camera`:
+
+```jsx
+import { Application, Entity } from '@playcanvas/react'
+import { Camera } from '@playcanvas/react/components'
+
+export default function App() {
+  return (
+    <Application>
+      <Entity name="camera" position={[0, 0, 5]}>
+        <Camera />
+      </Entity>
+    </Application>
+  )
+}
+```
+
+We've added a camera entity positioned 5 units down the positive Z axis. By default, a camera looks down the negative Z axis so our camera is now looking at the origin. The rendered scene shows a solid grey color (the clear color of the camera).
+
+## Adding a Light
+
+Let's add a directional light to illuminate our scene:
+
+```jsx
+import { Application, Entity } from '@playcanvas/react'
+import { Camera, Light } from '@playcanvas/react/components'
+
+export default function App() {
+  return (
+    <Application>
+      <Entity name="camera" position={[0, 0, 5]}>
+        <Camera />
+      </Entity>
+      <Entity name="light" rotation={[45, 45, 0]}>
+        <Light type="directional" />
+      </Entity>
+    </Application>
+  )
+}
+```
+
+The light is rotated to shine at an angle, which will create more interesting shading on our objects.
+
+## Adding an Object
+
+Now let's add a sphere to our scene using the `Render` component:
+
+<Tabs>
+<TabItem value="code" label="Code">
+
+```jsx
+import { Application, Entity } from '@playcanvas/react'
+import { Camera, Light, Render } from '@playcanvas/react/components'
+
+export default function App() {
+  return (
+    <Application>
+      <Entity name="camera" position={[0, 0, 5]}>
+        <Camera />
+      </Entity>
+      <Entity name="light" rotation={[45, 45, 0]}>
+        <Light type="directional" />
+      </Entity>
+      <Entity name="sphere">
+        <Render type="sphere" />
+      </Entity>
+    </Application>
+  )
+}
+```
+
+</TabItem>
+<TabItem value="demo" label="Live Demo">
+
+export const CompleteScene = () => {
+  return (
+    <div style={{height: '400px', width: '100%', position: 'relative'}}>
+      <Application>
+        <Entity name="camera" position={[0, 0, 5]}>
+          <Camera clearColor="#1a1a1a" />
+        </Entity>
+        <Entity name="light" rotation={[45, 45, 0]}>
+          <Light type="directional" intensity={1} />
+        </Entity>
+        <Entity name="sphere">
+          <Render type="sphere" />
+        </Entity>
+      </Application>
+    </div>
+  );
+};
+
+<CompleteScene />
+
+</TabItem>
+</Tabs>
+
+You should now see a white sphere in the center of your screen!
+
+## Making it Interactive
+
+One of the great advantages of using React is how easy it is to add interactivity. Let's make our sphere respond to clicks.
+
+**Click on the Demo Tab to view the results.**
+
+<Tabs>
+    <TabItem default value="code" label="Code">
+      <CodeBlock language="jsx">{InteractiveSource}</CodeBlock>
+    </TabItem>
+    <TabItem  value="demo" label="Demo" className='example-demo'>
+      <BrowserOnly>
+        <LazyInteractive/>
+      </BrowserOnly>
+    </TabItem>
+</Tabs>
+
+## Key Differences from Web Components
+
+When building scenes with PlayCanvas React compared to Web Components:
+
+1. **Component Structure**: Instead of HTML tags like `<pc-app>`, we use React components like `<Application>`
+2. **Props vs Attributes**: We use React props with camelCase (e.g., `clearColor`) instead of HTML attributes
+3. **Event Handling**: We can use React's event system directly (e.g., `onClick`)
+4. **State Management**: We can leverage React hooks like `useState` for dynamic behavior
+5. **Type Safety**: Full TypeScript support provides better developer experience
+
+## Next Steps
+
+Now that you've built your first scene, try:
+
+- Adding more objects with different shapes (`box`, `cylinder`, `cone`, etc.)
+- Experimenting with different light types (`point`, `spot`)
+- Adding movement with the `OrbitControls` script
+- Exploring physics by adding `RigidBody` and `Collision` components
+
+Now you have the basics, see the [documentation](https://playcanvas-react.vercel.app/docs) for more examples.

docs/user-manual/playcanvas-react/index.mdx

@@ -0,0 +1,88 @@
+---
+title: PlayCanvas React
+sidebar_position: 5.6
+---
+
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+[PlayCanvas React](https://github.com/playcanvas/react) is a modern library that brings the power of the PlayCanvas 3D engine into the React ecosystem. It provides a declarative, component-based approach to building interactive 3D applications using familiar React patterns.
+
+Explore the [official documentation](https://playcanvas-react.vercel.app/docs) or browse the [GitHub repository](https://github.com/playcanvas/react) for more.
+
+<div className='flex py-1 font-bold mb-2'>
+  <a href="#quick-start">
+    <div className='tablet'>
+      <span>Getting Started →</span>
+    </div>
+  </a>  
+  <a href="https://github.com/playcanvas/react" className='foreground underline' target="_blank">View on GitHub ↗</a>
+</div>
+
+<div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(250px, 1fr))', gap: '20px', marginBottom: '40px' }}>
+  <a href="https://playcanvas-react.vercel.app/examples/splats">
+    <img
+      src="/img/user-manual/react/splats.jpg"
+      alt="Gaussian Splats Example"
+      style={{ width: '100%', height: '200px', objectFit: 'cover', borderRadius: '8px', transition: 'transform 0.2s', cursor: 'pointer' }}
+    />
+  </a>
+  <a href="https://playcanvas-react.vercel.app/examples/model-viewer">
+    <img
+      src="/img/user-manual/react/render.png"
+      alt="3D Model Viewer Example"
+      style={{ width: '100%', height: '200px', objectFit: 'cover', borderRadius: '8px', transition: 'transform 0.2s', cursor: 'pointer' }}
+    />
+  </a>
+  <a href="https://playcanvas-react.vercel.app/examples/physics">
+    <img
+      src="/img/user-manual/react/physics.png"
+      alt="Physics Example"
+      style={{ width: '100%', height: '200px', objectFit: 'cover', borderRadius: '8px', transition: 'transform 0.2s', cursor: 'pointer' }}
+    />
+  </a>
+  <a href="https://stackblitz.com/edit/pc-react-tick-tock?file=src%2FScene.tsx">
+    <img
+      src="/img/user-manual/react/clock.png"
+      alt="Clock Example"
+      style={{ width: '100%', height: '200px', objectFit: 'cover', borderRadius: '8px', transition: 'transform 0.2s', cursor: 'pointer' }}
+    />
+  </a>
+</div>
+
+## Why React?
+
+React is at the heart of modern web development, and 3D content is no longer just for games. **PlayCanvas React** brings real-time 3D into the React ecosystem, enabling developers to build immersive experiences using the same tools and patterns they already use. With support for hooks, context, and component composition, it’s 3D — the React way.
+
+Explore more in the [example gallery](https://playcanvas-react.vercel.app/examples).
+
+### Full Engine Power, React Simplicity
+
+Unlike other 3D React libraries, PlayCanvas React gives you access to the **entire** PlayCanvas engine via intuitive React components:
+
+- **Physics** – Full Ammo.js integration
+- **Gaussian Splats** – Cutting-edge 3D point cloud rendering
+- **Pointer Events** – React-style event propagation and bubbling
+- **Asset System** – Declarative and imperative loading of assets
+- **Scripts** – Escape hatches for custom logic when needed
+
+## Quick Start
+
+**The fastest way to get started is with the [StackBlitz template](https://playcanvas-react.vercel.app/new)**. It's a one-click experience that launches a basic scene with a camera and a cube. Fork, edit, or clone the code to make it your own.
+
+Alternatively, follow the [Getting Started guide](https://playcanvas-react.vercel.app/docs/getting-started) or install it directly in your project:
+
+```bash
+npm install @playcanvas/react
+
+Then follow the [first scene walkthrough](./building-a-scene) to learn how to compose a scene using PlayCanvas React components and APIs.
+
+## Learn More
+
+- [Getting Started Guide](getting-started.md) - Set up your first project
+- [Core Concepts](core-concepts.md) - Understand the ECS architecture
+- [Features Showcase](features.md) - Explore all capabilities
+- [Interactive Examples](examples.md) - Learn by doing
+- [API Reference](https://playcanvas-react.vercel.app/api) - Complete component documentation
+
+Join the growing community of developers building the next generation of 3D web experiences with **PlayCanvas React**!

docusaurus.config.js

@@ -5,6 +5,7 @@
 // See: https://docusaurus.io/docs/api/docusaurus-config
 
 import {themes as prismThemes} from 'prism-react-renderer';
+import path from 'path';
 
 /** @type {import('@docusaurus/types').Config} */
 const config = {
@@ -100,6 +101,24 @@ const config = {
       }
     }],
     'docusaurus-plugin-sass',
+    () => ({
+      name: 'custom-webpack-config',
+      configureWebpack: () => ({
+        module: {
+          rules: [
+            {
+              test: /\.m?js$/,
+              resolve: { 
+                fullySpecified: false 
+              },
+            },
+          ],
+        },
+        externals: {
+          'https://esm.sh/canvas-confetti': 'confetti'
+        }
+      }),
+    }),
   ],
 
   presets: [