finalize examples

pmndrs · Jul 16, 2024 · b359fcc · b359fcc
1 parent 84133b1
commit b359fcc
Show file tree

Hide file tree

Showing 17 changed files with 266 additions and 39 deletions.
diff --git a/examples/minecraft/src/App.jsx b/examples/minecraft/src/App.jsx
@@ -15,7 +15,27 @@ const store = createXRStore()
 export function App() {
   return (
     <>
-      <button onClick={() => store.enterVR()}>Enter VR</button>
+      <button
+        style={{
+          position: 'absolute',
+          zIndex: 10000,
+          background: 'black',
+          borderRadius: '0.5rem',
+          border: 'none',
+          fontWeight: 'bold',
+          color: 'white',
+          padding: '1rem 2rem',
+          cursor: 'pointer',
+          fontSize: '1.5rem',
+          bottom: '1rem',
+          left: '50%',
+          boxShadow: '0px 0px 20px rgba(0,0,0,1)',
+          transform: 'translate(-50%, 0)',
+        }}
+        onClick={() => store.enterVR()}
+      >
+        Enter VR
+      </button>
       <KeyboardControls
         map={[
           { name: 'forward', keys: ['ArrowUp', 'w', 'W'] },

diff --git a/examples/minecraft/vite.config.ts b/examples/minecraft/vite.config.ts
@@ -6,6 +6,7 @@ import basicSsl from '@vitejs/plugin-basic-ssl'
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react(), basicSsl()],
+  base: '/xr/examples/minecraft/',
   resolve: {
     alias: [{ find: '@react-three/xr', replacement: path.resolve(__dirname, '../../packages/react/xr/src/index.ts') }],
     dedupe: ['@react-three/fiber', 'three'],

diff --git a/examples/pingpong/src/App.jsx b/examples/pingpong/src/App.jsx
@@ -13,7 +13,27 @@ const store = createXRStore({ hand: Hand })
 export function App() {
   return (
     <>
-      <button onClick={() => store.enterAR()}>Enter AR</button>
+      <button
+        style={{
+          position: 'absolute',
+          zIndex: 10000,
+          background: 'black',
+          borderRadius: '0.5rem',
+          border: 'none',
+          fontWeight: 'bold',
+          color: 'white',
+          padding: '1rem 2rem',
+          cursor: 'pointer',
+          fontSize: '1.5rem',
+          bottom: '1rem',
+          left: '50%',
+          boxShadow: '0px 0px 20px rgba(0,0,0,1)',
+          transform: 'translate(-50%, 0)',
+        }}
+        onClick={() => store.enterAR()}
+      >
+        Enter AR
+      </button>
       <Canvas shadows dpr={[1, 1.5]}>
         <Physics maxCcdSubsteps={10} gravity={[0, -5, 0]} timeStep="vary">
           <XR store={store}>

diff --git a/examples/pingpong/vite.config.ts b/examples/pingpong/vite.config.ts
@@ -6,6 +6,7 @@ import basicSsl from '@vitejs/plugin-basic-ssl'
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react(), basicSsl()],
+  base: '/xr/examples/pingpong/',
   resolve: {
     alias: [{ find: '@react-three/xr', replacement: path.resolve(__dirname, '../../packages/react/xr/src/index.ts') }],
     dedupe: ['@react-three/fiber', 'three'],

diff --git a/examples/rag-doll/src/App.jsx b/examples/rag-doll/src/App.jsx
@@ -14,7 +14,27 @@ const store = createXRStore({
 export function App() {
   return (
     <>
-      <button onClick={() => store.enterVR()}>Enter VR</button>
+      <button
+        style={{
+          position: 'absolute',
+          zIndex: 10000,
+          background: 'black',
+          borderRadius: '0.5rem',
+          border: 'none',
+          fontWeight: 'bold',
+          color: 'white',
+          padding: '1rem 2rem',
+          cursor: 'pointer',
+          fontSize: '1.5rem',
+          bottom: '1rem',
+          left: '50%',
+          boxShadow: '0px 0px 20px rgba(0,0,0,1)',
+          transform: 'translate(-50%, 0)',
+        }}
+        onClick={() => store.enterVR()}
+      >
+        Enter VR
+      </button>
       <Canvas dpr={[1, 2]} shadows camera={{ position: [-40, 40, 40], fov: 25, near: 1, far: 100 }}>
         <OrbitControls />
         <XR store={store}>

diff --git a/examples/rag-doll/src/components/Furniture.jsx b/examples/rag-doll/src/components/Furniture.jsx
@@ -40,7 +40,7 @@ export function Chair(props) {
 }
 
 export function Mug(props) {
-  const { nodes, materials } = useGLTF('/cup.glb')
+  const { nodes, materials } = useGLTF('cup.glb')
   const [cup] = useCylinder(() => ({
     mass: 1,
     args: [0.62, 0.62, 1.2, 16],

diff --git a/examples/rag-doll/vite.config.ts b/examples/rag-doll/vite.config.ts
@@ -6,6 +6,7 @@ import basicSsl from '@vitejs/plugin-basic-ssl'
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react(), basicSsl()],
+  base: '/xr/examples/rad-doll/',
   resolve: {
     alias: [{ find: '@react-three/xr', replacement: path.resolve(__dirname, '../../packages/react/xr/src/index.ts') }],
     dedupe: ['@react-three/fiber', 'three'],

diff --git a/examples/room-with-shadows/src/App.jsx b/examples/room-with-shadows/src/App.jsx
@@ -29,7 +29,27 @@ const store = createXRStore()
 export default function App() {
   return (
     <>
-      <button onClick={() => store.enterVR()}>Enter VR</button>
+      <button
+        style={{
+          position: 'absolute',
+          zIndex: 10000,
+          background: 'black',
+          borderRadius: '0.5rem',
+          border: 'none',
+          fontWeight: 'bold',
+          color: 'white',
+          padding: '1rem 2rem',
+          cursor: 'pointer',
+          fontSize: '1.5rem',
+          bottom: '1rem',
+          left: '50%',
+          boxShadow: '0px 0px 20px rgba(0,0,0,1)',
+          transform: 'translate(-50%, 0)',
+        }}
+        onClick={() => store.enterVR()}
+      >
+        Enter VR
+      </button>
       <Canvas shadows camera={{ position: [5, 2, 10], fov: 50 }}>
         <XR store={store}>
           <PerformanceMonitor onDecline={() => set(true)} />

diff --git a/examples/room-with-shadows/src/Room.jsx b/examples/room-with-shadows/src/Room.jsx
@@ -7,35 +7,35 @@ Source: https://sketchfab.com/3d-models/room-6417cbc1870a4a1691cca06912ae0369
 Title: Room
 */
 
-import { useGLTF } from "@react-three/drei"
+import { useGLTF } from '@react-three/drei'
 
 export function Model(props) {
-  const { nodes, materials } = useGLTF("/room-transformed.glb")
+  const { nodes, materials } = useGLTF('room-transformed.glb')
   return (
     <group {...props} dispose={null}>
       <group rotation={[-Math.PI / 2, 0, 0]}>
         <mesh castShadow receiveShadow geometry={nodes.Object_2.geometry} material={materials.Material} />
-        <mesh castShadow receiveShadow geometry={nodes.Object_3.geometry} material={materials["Material.002"]} />
-        <mesh castShadow receiveShadow geometry={nodes.Object_4.geometry} material={materials["Material.003"]} />
+        <mesh castShadow receiveShadow geometry={nodes.Object_3.geometry} material={materials['Material.002']} />
+        <mesh castShadow receiveShadow geometry={nodes.Object_4.geometry} material={materials['Material.003']} />
         <mesh castShadow receiveShadow geometry={nodes.Object_6.geometry} material={materials.krzeslo_1} />
         <mesh castShadow receiveShadow geometry={nodes.Object_7.geometry} material={materials.krzeslo_okno} />
         <mesh castShadow receiveShadow geometry={nodes.Object_8.geometry} material={materials.krzeslo_prawe} />
         <mesh castShadow receiveShadow geometry={nodes.Object_9.geometry} material={materials.krzeslo_srodek} />
         <mesh castShadow receiveShadow geometry={nodes.Object_10.geometry} material={materials.podloga} />
         <mesh castShadow receiveShadow geometry={nodes.Object_11.geometry} material={materials.sciana_okno} />
-        <mesh castShadow receiveShadow geometry={nodes.Object_12.geometry} material={materials["stolik.001"]} />
-        <mesh castShadow receiveShadow geometry={nodes.Object_16.geometry} material={materials["Material.006"]} />
-        <mesh castShadow receiveShadow geometry={nodes.Object_5.geometry} material={materials["Material.004"]} />
+        <mesh castShadow receiveShadow geometry={nodes.Object_12.geometry} material={materials['stolik.001']} />
+        <mesh castShadow receiveShadow geometry={nodes.Object_16.geometry} material={materials['Material.006']} />
+        <mesh castShadow receiveShadow geometry={nodes.Object_5.geometry} material={materials['Material.004']} />
         <mesh geometry={nodes.Object_13.geometry}>
           <meshStandardMaterial transparent opacity={0.5} />
         </mesh>
-        <mesh castShadow receiveShadow geometry={nodes.Object_14.geometry} material={materials["Material.002"]} />
-        <mesh castShadow receiveShadow geometry={nodes.Object_15.geometry} material={materials["Material.005"]} />
+        <mesh castShadow receiveShadow geometry={nodes.Object_14.geometry} material={materials['Material.002']} />
+        <mesh castShadow receiveShadow geometry={nodes.Object_15.geometry} material={materials['Material.005']} />
         <mesh castShadow receiveShadow geometry={nodes.Object_17.geometry} material={materials.mata} />
         <mesh castShadow receiveShadow geometry={nodes.Object_18.geometry} material={materials.stolik} />
       </group>
     </group>
   )
 }
 
-useGLTF.preload("/room-transformed.glb")
+useGLTF.preload('room-transformed.glb')
diff --git a/examples/room-with-shadows/vite.config.ts b/examples/room-with-shadows/vite.config.ts
@@ -6,6 +6,7 @@ import basicSsl from '@vitejs/plugin-basic-ssl'
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react(), basicSsl()],
+  base: '/xr/examples/room-with-shadows/',
   resolve: {
     alias: [{ find: '@react-three/xr', replacement: path.resolve(__dirname, '../../packages/react/xr/src/index.ts') }],
     dedupe: ['@react-three/fiber', 'three'],

diff --git a/examples/stage/src/App.jsx b/examples/stage/src/App.jsx
@@ -9,7 +9,27 @@ const store = createXRStore()
 export default function App() {
   return (
     <>
-      <button onClick={() => store.enterAR()}>Enter AR</button>
+      <button
+        style={{
+          position: 'absolute',
+          zIndex: 10000,
+          background: 'black',
+          borderRadius: '0.5rem',
+          border: 'none',
+          fontWeight: 'bold',
+          color: 'white',
+          padding: '1rem 2rem',
+          cursor: 'pointer',
+          fontSize: '1.5rem',
+          bottom: '1rem',
+          left: '50%',
+          boxShadow: '0px 0px 20px rgba(0,0,0,1)',
+          transform: 'translate(-50%, 0)',
+        }}
+        onClick={() => store.enterAR()}
+      >
+        Enter AR
+      </button>
       <Canvas shadows camera={{ position: [4, 0, 6], fov: 35 }}>
         <XR store={store}>
           <group position={[0, -0.75, 0]}>

diff --git a/examples/stage/src/Cobra.jsx b/examples/stage/src/Cobra.jsx
@@ -6,27 +6,123 @@ Command: npx [email protected] cobra.glb --transform
 import { useGLTF } from '@react-three/drei'
 
 export function Model({ color, ...props }) {
-  const { nodes, materials } = useGLTF('/cobra-transformed.glb')
+  const { nodes, materials } = useGLTF('cobra-transformed.glb')
   return (
     <group scale={0.025} {...props} dispose={null}>
-      <mesh castShadow receiveShadow geometry={nodes.Material2.geometry} material={materials.PaletteMaterial001} rotation={[-Math.PI / 2, 0, 0]} />
-      <mesh castShadow receiveShadow geometry={nodes.Material2007.geometry} material={materials.Suede_Green} rotation={[-Math.PI / 2, 0, 0]} />
-      <mesh castShadow receiveShadow geometry={nodes.Material2009.geometry} material={materials.PaletteMaterial002} rotation={[-Math.PI / 2, 0, 0]} />
-      <mesh castShadow receiveShadow geometry={nodes.Material2010.geometry} material={materials.PaletteMaterial003} rotation={[-Math.PI / 2, 0, 0]} />
-      <mesh castShadow receiveShadow geometry={nodes.Material2012.geometry} material={materials.PaletteMaterial004} rotation={[-Math.PI / 2, 0, 0]} />
-      <mesh castShadow receiveShadow geometry={nodes.Material2018.geometry} material={materials.Translucent_Glass_Corrugated} rotation={[-Math.PI / 2, 0, 0]} />
-      <mesh castShadow receiveShadow geometry={nodes.Material2029.geometry} material={materials.PaletteMaterial005} rotation={[-Math.PI / 2, 0, 0]} />
-      <mesh castShadow receiveShadow geometry={nodes.Material2037.geometry} material={materials.Metal_Silver} rotation={[-Math.PI / 2, 0, 0]} />
-      <mesh castShadow receiveShadow geometry={nodes.Material2040.geometry} material={materials.PaletteMaterial006} rotation={[-Math.PI / 2, 0, 0]} />
-      <mesh castShadow receiveShadow geometry={nodes.Material2066.geometry} material={materials.MT__15_2} rotation={[-Math.PI / 2, 0, 0]} />
-      <mesh castShadow receiveShadow geometry={nodes.Material2067.geometry} material={materials.MT__15} rotation={[-Math.PI / 2, 0, 0]} />
-      <mesh castShadow receiveShadow geometry={nodes.Material2068.geometry} material={materials.MT__15_1_0} rotation={[-Math.PI / 2, 0, 0]} />
-      <mesh castShadow receiveShadow geometry={nodes.Material2071.geometry} material={materials.MT__15_1} rotation={[-Math.PI / 2, 0, 0]} />
-      <mesh castShadow receiveShadow geometry={nodes.Material2078.geometry} material={materials.Groundcover_BarkChips} rotation={[-Math.PI / 2, 0, 0]} />
-      <mesh castShadow receiveShadow geometry={nodes.Material2079.geometry} material={materials.Groundcover_Rock_Crushed_Multi_1} rotation={[-Math.PI / 2, 0, 0]} />
-      <mesh castShadow receiveShadow geometry={nodes.Material3004.geometry} material={materials.MT__15__1} rotation={[-Math.PI / 2, 0, 0]} />
+      <mesh
+        castShadow
+        receiveShadow
+        geometry={nodes.Material2.geometry}
+        material={materials.PaletteMaterial001}
+        rotation={[-Math.PI / 2, 0, 0]}
+      />
+      <mesh
+        castShadow
+        receiveShadow
+        geometry={nodes.Material2007.geometry}
+        material={materials.Suede_Green}
+        rotation={[-Math.PI / 2, 0, 0]}
+      />
+      <mesh
+        castShadow
+        receiveShadow
+        geometry={nodes.Material2009.geometry}
+        material={materials.PaletteMaterial002}
+        rotation={[-Math.PI / 2, 0, 0]}
+      />
+      <mesh
+        castShadow
+        receiveShadow
+        geometry={nodes.Material2010.geometry}
+        material={materials.PaletteMaterial003}
+        rotation={[-Math.PI / 2, 0, 0]}
+      />
+      <mesh
+        castShadow
+        receiveShadow
+        geometry={nodes.Material2012.geometry}
+        material={materials.PaletteMaterial004}
+        rotation={[-Math.PI / 2, 0, 0]}
+      />
+      <mesh
+        castShadow
+        receiveShadow
+        geometry={nodes.Material2018.geometry}
+        material={materials.Translucent_Glass_Corrugated}
+        rotation={[-Math.PI / 2, 0, 0]}
+      />
+      <mesh
+        castShadow
+        receiveShadow
+        geometry={nodes.Material2029.geometry}
+        material={materials.PaletteMaterial005}
+        rotation={[-Math.PI / 2, 0, 0]}
+      />
+      <mesh
+        castShadow
+        receiveShadow
+        geometry={nodes.Material2037.geometry}
+        material={materials.Metal_Silver}
+        rotation={[-Math.PI / 2, 0, 0]}
+      />
+      <mesh
+        castShadow
+        receiveShadow
+        geometry={nodes.Material2040.geometry}
+        material={materials.PaletteMaterial006}
+        rotation={[-Math.PI / 2, 0, 0]}
+      />
+      <mesh
+        castShadow
+        receiveShadow
+        geometry={nodes.Material2066.geometry}
+        material={materials.MT__15_2}
+        rotation={[-Math.PI / 2, 0, 0]}
+      />
+      <mesh
+        castShadow
+        receiveShadow
+        geometry={nodes.Material2067.geometry}
+        material={materials.MT__15}
+        rotation={[-Math.PI / 2, 0, 0]}
+      />
+      <mesh
+        castShadow
+        receiveShadow
+        geometry={nodes.Material2068.geometry}
+        material={materials.MT__15_1_0}
+        rotation={[-Math.PI / 2, 0, 0]}
+      />
+      <mesh
+        castShadow
+        receiveShadow
+        geometry={nodes.Material2071.geometry}
+        material={materials.MT__15_1}
+        rotation={[-Math.PI / 2, 0, 0]}
+      />
+      <mesh
+        castShadow
+        receiveShadow
+        geometry={nodes.Material2078.geometry}
+        material={materials.Groundcover_BarkChips}
+        rotation={[-Math.PI / 2, 0, 0]}
+      />
+      <mesh
+        castShadow
+        receiveShadow
+        geometry={nodes.Material2079.geometry}
+        material={materials.Groundcover_Rock_Crushed_Multi_1}
+        rotation={[-Math.PI / 2, 0, 0]}
+      />
+      <mesh
+        castShadow
+        receiveShadow
+        geometry={nodes.Material3004.geometry}
+        material={materials.MT__15__1}
+        rotation={[-Math.PI / 2, 0, 0]}
+      />
     </group>
   )
 }
 
-useGLTF.preload('/cobra-transformed.glb')
+useGLTF.preload('cobra-transformed.glb')