docs: add Motion and Model Viewer examples to PlayCanvas React section#1040
Merged
Conversation
Ports the Motion and Model Viewer examples from the retired playcanvas-react.vercel.app docs site as siblings of the existing Physics example. - Model Viewer: glb viewer with environment lighting, grid, shadow catcher and auto-rotating orbit controls, reusing the existing Grid/ShadowCatcher/PostEffects/AutoRotate components and lambo.glb - Motion: demonstrates driving entity transforms and light intensities with springs from the Motion animation library, including the MotionEntity/MotionLight bridge components in the displayed source - Adds the motion package as a dependency - Adds both pages to the sidebar and mirrors them in the ja locale Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Contributor
There was a problem hiding this comment.
Pull request overview
This PR adds two new PlayCanvas React live examples (Model Viewer and Motion) to the React section of the user manual, recreating content from the retired playcanvas-react.vercel.app docs site and wiring the pages into the docs sidebar (including Japanese locale equivalents).
Changes:
- Added new React example components:
ModelViewerExample(GLB viewer) andMotionExample(Motion springs driving entity/light animation). - Added new docs pages for both examples in
docs/and mirrored them ini18n/ja/. - Added the
motionpackage dependency and linked the new pages insidebars.js.
Reviewed changes
Copilot reviewed 8 out of 9 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| src/components/playcanvas-react/examples/MotionExample.jsx | New Motion-driven hover demo using Motion springs + PlayCanvas React entities/scripts. |
| src/components/playcanvas-react/examples/ModelViewerExample.jsx | New GLB model viewer example reusing existing staging components (grid/shadow catcher/post FX/autorotate). |
| docs/user-manual/react/examples/motion.mdx | New English docs page embedding the Motion example + source. |
| docs/user-manual/react/examples/model-viewer.mdx | New English docs page embedding the Model Viewer example + source. |
| i18n/ja/docusaurus-plugin-content-docs/current/user-manual/react/examples/motion.mdx | Japanese translation of the Motion example docs page. |
| i18n/ja/docusaurus-plugin-content-docs/current/user-manual/react/examples/model-viewer.mdx | Japanese translation of the Model Viewer docs page. |
| sidebars.js | Adds both examples under React → Examples in the sidebar. |
| package.json | Adds motion dependency required by the Motion example. |
| package-lock.json | Locks motion (and its transitive deps) for reproducible installs. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
- Move the light intensity script to module scope and pass the motion value via props instead of defining a per-render class with a closure; guard against the light component being unavailable - Normalize pointer coordinates by canvas size in MouseRotatesEntity and unregister the mousemove handler in destroy() Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Recreates the Motion and Model Viewer examples from the retired
playcanvas-react.vercel.appdocs site (removed in playcanvas/react#274) as siblings of the existing Physics example under/user-manual/react/examples/.Model Viewer
A glb viewer with environment lighting, background grid, shadow catcher and auto-rotating orbit controls. Reuses the existing
Grid,ShadowCatcher,PostEffectsandAutoRotatecomponents plus thelambo.glb/environment.pngassets already instatic/assets/, so no new assets are needed.Motion
The "Hover" demo: a capsule that springs to a larger scale on hover, reveals orbiting decoration primitives that track the pointer, and animates light intensities — all driven by springs from the Motion library. The
MotionEntity/MotionLightbridge components (Motion spring values → PlayCanvas entity transforms) are included in the displayed source, since that integration is the point of the example. The original's Tailwind overlay was rewritten with inline styles.Other changes
motionas a dependency (the one new package this needs)sidebars.jsunder the React Examples categoryjalocale per the localization rule in AGENTS.mdVerification
npm run lintpasses (0 errors).uSceneColorMapmessage from the shared PostEffects/lambo setup) appears identically on the existing React index page and is untouched by this PR.🤖 Generated with Claude Code