Skip to content

Commit b9adbe0

Browse files
marklundinmarklundin
authored
Enhance SplatViewer and documentation updates (#135)
* Enhance SplatViewer and documentation updates - Introduced new `Check` and `Dash` components for improved UI feedback in the SplatViewer documentation. - Updated `registry-mdx-components` to include new components and adjusted imports for better organization. - Enhanced the `SplatViewer` component with new controls and improved camera functionality. - Updated `package.json` to streamline the build process by chaining the `postbuild` command with `registry:build`. - Revised documentation to reflect the latest features and improvements, including new API references and usage examples. These changes enhance the user experience and provide clearer guidance for developers using the SplatViewer component. * linting fixes
1 parent 3a00551 commit b9adbe0

File tree

15 files changed

+578
-226
lines changed

15 files changed

+578
-226
lines changed

‎packages/docs/components/Check.tsx

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import { Check as CheckIcon, Minus as MinusIcon } from 'lucide-react'
2+
3+
export function Check({ children }: { children: React.ReactNode }) {
4+
return (
5+
<div className="flex gap-4 items-center justify-center ">
6+
<div className="bg-teal-800 rounded-full p-1 w-6 h-6 flex items-center justify-center">
7+
<CheckIcon className='text-teal-400'/>
8+
</div>
9+
<span>{ children }</span>
10+
</div>
11+
)
12+
}
13+
14+
export function Dash({ children }: { children: React.ReactNode }) {
15+
return (
16+
<div className="flex gap-4 items-center justify-center ">
17+
<div className="bg-muted rounded-full p-1 w-6 h-6 flex items-center justify-center">
18+
<MinusIcon className='text-muted-foreground'/>
19+
</div>
20+
<span>{ children }</span>
21+
</div>
22+
)
23+
}

‎packages/docs/content/blocks.mdx

Lines changed: 73 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -10,15 +10,18 @@ openGraph:
1010
width: 1200
1111
height: 630
1212
---
13-
import { Tabs, Card, Code } from 'nextra/components'
13+
import { Tabs, Card, Code, Bleed, Steps } from 'nextra/components'
1414
import { ArrowRight, Hexagon, Box } from 'lucide-react'
15+
import registry from '../registry.json'
16+
export const splatUrl = process.env.NEXT_PUBLIC_SAMPLE_SPLAT
17+
export const splatVersion = registry.items.find(item => item.name === 'splat-viewer')?.meta?.version
1518

1619
<a className="flex items-center mb-8 mt-4 -ml-2 flex-row gap-2 bg-muted rounded-full p-2 px-4 max-w-fit" href="/docs/guide/getting-started">
1720
<Box size={14} className="text-muted-foreground" />
1821
<div className="text-xs font-medium text-muted-foreground">Build your first scene in minutes</div>
1922
<ArrowRight size={14} className="text-muted-foreground" />
2023
</a>
21-
# Building Blocks for 3D
24+
# Building Blocks for 3D <Badge variant="secondary" className="-mt-2">new</Badge>
2225

2326
A set of high-level 3D building blocks for React — interactive viewers, spatial layouts, and controls—designed to help you compose immersive scenes with minimal setup.
2427

@@ -29,27 +32,22 @@ A responsive and composable component for displaying Gaussian splats.
2932
Includes built-in camera controls, loading states, and optional UI slots for overlays or actions.
3033
Supports large assets with lazy loading and automatic framing. Use it in modals, pages, or full-screen scenes.
3134

32-
<Badge variant="secondary" className="-mt-2">
33-
[View Source](https://github.com/playcanvas/react-playcanvas/blob/main/packages/docs/content/blocks.mdx)
34-
</Badge>
3535

36-
<Badge variant="secondary" className="-mt-2">
37-
[Report an Issue](https://github.com/playcanvas/react-playcanvas/issues)
38-
</Badge>
39-
40-
<div className="outline p-28 mt-12 mb-0 rounded-t-lg bg-linear-to-br from-violet-600 to-purple-600 relative">
36+
<div className="outline p-28 -mx-6 mt-12 mb-0 rounded-t-lg bg-linear-to-br from-violet-600 to-purple-600 relative">
4137
<OpenInV0Button url={`https://v0.dev/chat/api/open?url=${encodeURIComponent("http://playcanvas-react.vercel.app/r/splatviewer.json")}`} className="absolute top-4 right-4" />
42-
<SplatViewer src='./skull.compressed.ply' type='orbit' className="bg-purple-200 rounded-lg shadow-xl cursor-grab active:cursor-grabbing" >
43-
<div className="flex gap-2 pointer-events-auto flex-grow">
44-
<FullScreenButton />
45-
<DownloadButton />
46-
</div>
47-
<div className="pointer-events-auto">
48-
<MenuButton />
49-
</div>
38+
<SplatViewer src={splatUrl} autoPlay className="bg-purple-200 rounded-lg shadow-xl cursor-grab active:cursor-grabbing" >
39+
<Controls autoHide >
40+
<div className="flex gap-2 pointer-events-auto flex-grow">
41+
<FullScreenButton />
42+
<DownloadButton />
43+
</div>
44+
<div className="pointer-events-auto">
45+
<MenuButton />
46+
</div>
47+
</Controls>
5048
</SplatViewer>
5149
</div>
52-
<div className="border rounded-b-lg demo overflow-hidden">
50+
<div className="border rounded-b-lg -mx-6 demo overflow-hidden">
5351
<Tabs items={['index.tsx', 'viewer.css']} className="!mt-0" tabClassName="!mt-2">
5452
<Tabs.Tab title='index.tsx' className="!mt-0 !rounded-t-none !rounded-b-xl">
5553
```tsx copy
@@ -58,10 +56,14 @@ Supports large assets with lazy loading and automatic framing. Use it in modals,
5856

5957
export function SplatViewerDemo() {
6058
return (
61-
<SplatViewer className="splat-viewer" src='./skull.ply'>
62-
<FullScreenButton />
63-
<DownloadButton />
64-
<MenuButton />
59+
<SplatViewer src={splatUrl} autoPlay >
60+
<div className="flex gap-2 pointer-events-auto flex-grow">
61+
<FullScreenButton />
62+
<DownloadButton />
63+
</div>
64+
<div className="pointer-events-auto">
65+
<MenuButton />
66+
</div>
6567
</SplatViewer>
6668
)
6769
}
@@ -81,6 +83,35 @@ Supports large assets with lazy loading and automatic framing. Use it in modals,
8183
</div>
8284

8385

86+
### Features
87+
<div className="flex flex-row gap-4">
88+
<div className="flex flex-col gap-4 py-4 items-start flex-grow">
89+
<Check>Orbit and fly controls.</Check>
90+
<Check>Keyboard and mouse controls.</Check>
91+
<Check>Controlled and uncontrolled mode.</Check>
92+
<Check>Suspenseful loading.</Check>
93+
<Dash>Camera animations. (coming soon)</Dash>
94+
<Dash>Way points. (coming soon)</Dash>
95+
</div>
96+
<div>
97+
<span>Version {splatVersion}</span>
98+
<div className="flex flex-col gap-4 -ml-2 mt-4">
99+
<a href="https://github.com/playcanvas/react-playcanvas/blob/main/packages/docs/content/blocks.mdx" target="_blank" rel="noopener noreferrer">
100+
<Badge variant="secondary" className="rounded-full px-4 py-0 text-muted-foreground hover:text-foreground transition-colors">
101+
View Source
102+
<ArrowRight size={14} className="text-muted-foreground" />
103+
</Badge>
104+
</a>
105+
106+
<a href="https://github.com/playcanvas/react-playcanvas/issues" target="_blank" rel="noopener noreferrer">
107+
<Badge variant="secondary" className="rounded-full px-4 py-0 text-muted-foreground hover:text-foreground transition-colors">
108+
Report an Issue
109+
<ArrowRight size={14} className="text-muted-foreground" />
110+
</Badge>
111+
</a>
112+
</div>
113+
</div>
114+
</div>
84115

85116
### Installation
86117

@@ -92,14 +123,29 @@ npx shadcn@latest add https://playcanvas-react.vercel.app/r/splatviewer.json
92123

93124
### Anatomy
94125

95-
Import the component.
126+
Import all parts and piece them together.
96127

97128
```jsx
98-
import { SplatViewer } from "@components/ui/splat-viewer";
99-
export default () => <SplatViewer />;
129+
import {
130+
SplatViewer,
131+
FullScreenButton,
132+
DownloadButton,
133+
MenuButton,
134+
Controls
135+
} from "@components/ui/splat-viewer";
136+
137+
export default () => (
138+
<SplatViewer src={splatUrl} >
139+
<Controls >
140+
<FullScreenButton />
141+
<DownloadButton />
142+
<MenuButton />
143+
</Controls>
144+
</SplatViewer>
145+
)
100146
```
101147

102-
### Props
148+
### API Reference
103149

104150
<TSDoc
105151
code={`

‎packages/docs/mdx-components.js

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,8 @@ import { TSDoc, generateDocumentation } from 'nextra/tsdoc'
44
import { defaultComponents } from './client-mdx-components';
55
import { registryComponents } from './registry-mdx-components';
66
import { Badge } from '@/components/ui/badge';
7-
import { OpenInV0Button } from './components/ui/open-in-v0-button';
7+
import { OpenInV0Button } from '@/components/ui/open-in-v0-button';
8+
import { Check, Dash } from '@/components/Check';
89

910
const docsComponents = getDocsMDXComponents({
1011
TSDoc(props) {
@@ -24,6 +25,8 @@ const docsComponents = getDocsMDXComponents({
2425

2526
export function useMDXComponents(components) {
2627
return {
28+
Check,
29+
Dash,
2730
Badge,
2831
OpenInV0Button,
2932
...components,

‎packages/docs/package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,8 @@
88
"dev": "next dev --turbopack",
99
"build": "next build",
1010
"start": "next start",
11-
"postbuild": "pagefind --site .next/server/app --output-path public/_pagefind",
12-
"registry:build": "shadcn registry:build"
11+
"registry:build": "shadcn registry:build",
12+
"postbuild": "pagefind --site .next/server/app --output-path public/_pagefind && npm run registry:build"
1313
},
1414
"author": "",
1515
"license": "ISC",

0 commit comments

Comments
 (0)