docs(examples): implemented example of an object that is linked to camera (#288)

Author: saitonakamura

examples/src/demos/CameraLinkedObject.tsx

@@ -0,0 +1,32 @@
+import { Box } from '@react-three/drei'
+import { Canvas, createPortal, useThree } from '@react-three/fiber'
+import { VRButton, XR } from '@react-three/xr'
+import { ComponentProps } from 'react'
+
+function Object(props: ComponentProps<typeof Box>) {
+  return (
+    <Box {...props} args={[0.4, 0.1, 0.1]}>
+      <meshStandardMaterial color="blue" />
+    </Box>
+  )
+}
+
+function CameraLinkedObject() {
+  const camera = useThree((state) => state.camera)
+  return createPortal(<Object position={[0, 0.6, -1]} />, camera)
+}
+
+export default function () {
+  return (
+    <>
+      <VRButton />
+      <Canvas>
+        <XR>
+          <ambientLight intensity={0.5} />
+          <pointLight position={[5, 5, 5]} />
+          <CameraLinkedObject />
+        </XR>
+      </Canvas>
+    </>
+  )
+}

examples/src/demos/index.tsx

@@ -6,5 +6,6 @@ const Player = { Component: lazy(() => import('./Player')) }
 const Text = { Component: lazy(() => import('./Text')) }
 const Hands = { Component: lazy(() => import('./Hands')) }
 const Teleport = { Component: lazy(() => import('./Teleport')) }
+const CameraLinkedObject = { Component: lazy(() => import('./CameraLinkedObject')) }
 
-export { Interactive, HitTest, Player, Text, Hands, Teleport }
+export { Interactive, HitTest, Player, Text, Hands, Teleport, CameraLinkedObject }