docs: add Motion and Model Viewer examples to PlayCanvas React section

docs/user-manual/react/examples/model-viewer.mdx

@@ -0,0 +1,20 @@
+---
+title: Model Viewer
+description: Live PlayCanvas React example — a glb model viewer with environment lighting, shadows and orbit controls.
+---
+
+import { CodeExample } from '@site/src/components/playcanvas-react/CodeExample';
+import ModelViewerExample from '@site/src/components/playcanvas-react/examples/ModelViewerExample';
+import ModelViewerExampleSource from '!!raw-loader!@site/src/components/playcanvas-react/examples/ModelViewerExample.jsx';
+
+A simple glb model viewer with environment lighting, a shadow catcher and auto-rotating orbit controls. Drag to orbit the camera around the model.
+
+<CodeExample
+  label="Model viewer"
+  filename="ModelViewerExample.jsx"
+  code={ModelViewerExampleSource}
+  showControls={false}
+  showDemo
+>
+  <ModelViewerExample />
+</CodeExample>

docs/user-manual/react/examples/motion.mdx

@@ -0,0 +1,20 @@
+---
+title: Motion
+description: Live PlayCanvas React example — animating entities and lights with springs from the Motion animation library.
+---
+
+import { CodeExample } from '@site/src/components/playcanvas-react/CodeExample';
+import MotionExample from '@site/src/components/playcanvas-react/examples/MotionExample';
+import MotionExampleSource from '!!raw-loader!@site/src/components/playcanvas-react/examples/MotionExample.jsx';
+
+Hover over the capsule to see entities and lights animate with springs from the [Motion](https://motion.dev/) animation library. Motion values drive each entity's position, rotation and scale, while a script applies animated intensities to the lights.
+
+<CodeExample
+  label="Animating with Motion"
+  filename="MotionExample.jsx"
+  code={MotionExampleSource}
+  showControls={false}
+  showDemo
+>
+  <MotionExample />
+</CodeExample>

i18n/ja/docusaurus-plugin-content-docs/current/user-manual/react/examples/model-viewer.mdx

@@ -0,0 +1,20 @@
+---
+title: モデルビューア
+description: PlayCanvas Reactのライブサンプル — 環境ライティング、影、オービットコントロールを備えたglbモデルビューア。
+---
+
+import { CodeExample } from '@site/src/components/playcanvas-react/CodeExample';
+import ModelViewerExample from '@site/src/components/playcanvas-react/examples/ModelViewerExample';
+import ModelViewerExampleSource from '!!raw-loader!@site/src/components/playcanvas-react/examples/ModelViewerExample.jsx';
+
+環境ライティング、シャドウキャッチャー、自動回転するオービットコントロールを備えたシンプルなglbモデルビューアです。ドラッグしてモデルの周りでカメラを回転させてみましょう。
+
+<CodeExample
+  label="モデルビューア"
+  filename="ModelViewerExample.jsx"
+  code={ModelViewerExampleSource}
+  showControls={false}
+  showDemo
+>
+  <ModelViewerExample />
+</CodeExample>

i18n/ja/docusaurus-plugin-content-docs/current/user-manual/react/examples/motion.mdx

@@ -0,0 +1,20 @@
+---
+title: モーション
+description: PlayCanvas Reactのライブサンプル — Motionアニメーションライブラリのスプリングでエンティティとライトをアニメーション。
+---
+
+import { CodeExample } from '@site/src/components/playcanvas-react/CodeExample';
+import MotionExample from '@site/src/components/playcanvas-react/examples/MotionExample';
+import MotionExampleSource from '!!raw-loader!@site/src/components/playcanvas-react/examples/MotionExample.jsx';
+
+カプセルにホバーすると、[Motion](https://motion.dev/)アニメーションライブラリのスプリングでエンティティとライトがアニメーションします。モーション値が各エンティティの位置、回転、スケールを駆動し、スクリプトがアニメーションされた強度をライトに適用します。
+
+<CodeExample
+  label="Motionでアニメーション"
+  filename="MotionExample.jsx"
+  code={MotionExampleSource}
+  showControls={false}
+  showDemo
+>
+  <MotionExample />
+</CodeExample>

package.json

@@ -53,6 +53,7 @@
     "docusaurus-plugin-sass": "^0.2.6",
     "js-yaml": "^4.2.0",
     "leva": "^0.10.1",
+    "motion": "^12.40.0",
     "playcanvas": "^2.19.6",
     "prism-react-renderer": "^2.4.1",
     "raw-loader": "^4.0.2",

sidebars.js

@@ -479,6 +479,8 @@ const sidebars = {
             id: 'user-manual/react/examples/index',
           },
           items: [
+            'user-manual/react/examples/model-viewer',
+            'user-manual/react/examples/motion',
             'user-manual/react/examples/physics',
           ]
         },

src/components/playcanvas-react/examples/ModelViewerExample.jsx

@@ -0,0 +1,66 @@
+import { Application, Entity } from '@playcanvas/react';
+import { Camera, Environment, Render, Script } from '@playcanvas/react/components';
+import { useEnvAtlas, useModel } from '@playcanvas/react/hooks';
+import { CameraControls } from 'playcanvas/scripts/esm/camera-controls.mjs';
+import { Vec2 } from 'playcanvas';
+import AutoRotate from '../AutoRotate';
+import Grid from '../Grid';
+import StaticPostEffects from '../PostEffects';
+import ShadowCatcher from '../ShadowCatcher';
+
+const OrbitControls = ({ zoomRange = [1, 10], pitchRange = [-90, -5], ...props }) => (
+  <Script
+    script={CameraControls}
+    enableFly={false}
+    zoomRange={new Vec2(zoomRange[0], zoomRange[1])}
+    pitchRange={new Vec2(pitchRange[0], pitchRange[1])}
+    {...props}
+  />
+);
+
+// ↑ imports hidden
+
+const ModelViewerScene = () => {
+  /**
+   * A simple glb viewer with environment lighting, a shadow catcher
+   * and auto-rotating orbit controls.
+   */
+  const { asset: envAtlas } = useEnvAtlas('/assets/environment.png');
+  const { asset: model } = useModel('/assets/lambo.glb');
+
+  if (!model || !envAtlas) {
+    return null;
+  }
+
+  return (
+    <Entity>
+      {/* Create some environment lighting */}
+      <Environment envAtlas={envAtlas} showSkybox={false} />
+
+      {/* Render the background grid */}
+      <Grid />
+
+      {/* Add a shadow catcher to catch the shadows from the model */}
+      <ShadowCatcher width={5} depth={5} />
+
+      {/* Create a camera entity */}
+      <Entity name="camera" position={[4, 1, 4]}>
+        <Camera clearColor="#090707" fov={28} renderSceneColorMap={true} />
+        <OrbitControls inertiaFactor={0.07} zoomRange={[6, 10]} pitchRange={[-90, -5]} />
+        <StaticPostEffects />
+        <AutoRotate />
+      </Entity>
+
+      {/* Render the model */}
+      <Render type="asset" asset={model} />
+    </Entity>
+  );
+};
+
+const ModelViewerExample = () => (
+  <Application>
+    <ModelViewerScene />
+  </Application>
+);
+
+export default ModelViewerExample;