vr-cube // add vr support, add and tweak TurrelCube(VR)

package.json

@@ -9,8 +9,8 @@
     "react-router-dom": "^5.1.2",
     "react-scripts": "3.1.1",
     "react-spring": "^8.0.27",
-    "react-three-fiber": "^3.0.11",
-    "three": "^0.110.0"
+    "react-three-fiber": "^3.0.14",
+    "three": "^0.111.0"
   },
   "scripts": {
     "start": "react-scripts start",
@@ -44,4 +44,4 @@
       "pre-commit": "pretty-quick --staged --pattern '{src,public}/**/*.{js,jsx,css,html}'"
     }
   }
-}
+}

src/App.js

@@ -70,6 +70,8 @@ const App = () => {
   return (
     <Router>
       <div className="App">
+        <div id="vrButton" className="vrButtonContainer" />
+
         <Switch>
           <Route
             path="/experiments/:id/full"

src/components/CanvasContainer/index.js

@@ -1,12 +1,26 @@
 import React from 'react';
+import { VRButton } from 'three/examples/jsm/webxr/VRButton.js';
 import { Canvas } from 'react-three-fiber';
 
 const CanvasContainer = props => {
+  const useVR = true; //'getVRDevices' in window.navigator || 'xr' in window.navigator;
+
+  const vrOptions = {
+    referenceSpaceType: 'bounded-floor',
+  };
   return (
     <Canvas
       style={{ background: '#777777' }}
       shadowMap
       camera={{ position: [0, 0, 10] }}
+      vr
+      onCreated={({ gl }) => {
+        if (useVR) {
+          document
+            .getElementById('vrButton')
+            .appendChild(VRButton.createButton(gl, vrOptions));
+        }
+      }}
     >
       {props.children}
     </Canvas>

src/components/ExperimentMetadata/styles.css

@@ -1,7 +1,7 @@
 .Experiment__Metadata {
   position: absolute;
   z-index: 100;
-  bottom: 20px;
+  bottom: 100px;
   left: 20px;
   display: flex;
   flex-direction: column;

src/experiments/cube_turrell_vr/index.js

@@ -0,0 +1,124 @@
+import React, { useRef } from 'react';
+import { useFrame, useThree } from 'react-three-fiber';
+import { RingBufferGeometry } from 'three';
+
+const angToRad = ang => {
+  return (ang * Math.PI) / 180;
+};
+
+export const TurrellCubeExperimentVR = () => {
+  // Camera Override
+  const { camera } = useThree();
+  camera.position.set(0, 0, 0);
+  camera.fov = 35;
+
+  const cubeZero = useRef();
+  useFrame(() => (cubeZero.current.rotation.x += 0.04));
+  const cubeOne = useRef();
+  useFrame(
+    () => (cubeOne.current.rotation.x = cubeOne.current.rotation.y += 0.02)
+  );
+  const cubeTwo = useRef();
+  useFrame(
+    () => (cubeTwo.current.rotation.x = cubeTwo.current.rotation.y -= 0.02)
+  );
+  const cubes = useRef();
+  useFrame(() => (cubes.current.rotation.z -= 0.01));
+
+  return (
+    <group position={[0, 0, 0]}>
+      <ambientLight color="red" intensity={0} />
+      <spotLight
+        color="red"
+        intensity={0.35}
+        position={[0, -0.2, 2.75]}
+        angle={1}
+        penumbra={0.5}
+        shadow-mapSize-width={2048}
+        shadow-mapSize-height={2048}
+        castShadow
+      />
+
+      <spotLight
+        color="red"
+        intensity={0.2}
+        position={[0, 0, 5.0]}
+        angle={1.5}
+        penumbra={1}
+      />
+
+      <group ref={cubes} position={[0, 2.75, -4]} scale={[0.25, 0.25, 0.25]}>
+        <mesh ref={cubeZero} castShadow>
+          <boxBufferGeometry attach="geometry" args={[1.0, 1.0, 1.0]} />
+          <meshPhongMaterial
+            attach="material"
+            color="#FFF"
+            shininess={30}
+            specular="#F00"
+          />
+        </mesh>
+
+        <mesh ref={cubeOne}>
+          <boxBufferGeometry attach="geometry" args={[2.5, 2.5, 2.5]} />
+          <meshPhongMaterial
+            attach="material"
+            color="#FFF"
+            opacity={0.4}
+            transparent
+            shininess={30}
+            specular="#F00"
+          />
+        </mesh>
+
+        <mesh ref={cubeTwo}>
+          <boxBufferGeometry attach="geometry" args={[5, 5, 5]} />
+          <meshPhongMaterial
+            attach="material"
+            color="#FFF"
+            shininess={5}
+            specular="#F00"
+            opacity={0.3}
+            transparent
+          />
+        </mesh>
+      </group>
+      <mesh
+        receiveShadow
+        position={[0, 0, -10]}
+        rotation={[0, angToRad(55), 0]}
+      >
+        <planeBufferGeometry attach="geometry" args={[2000, 2000]} />
+        <meshPhongMaterial attach="material" color="#555" />
+      </mesh>
+      <mesh
+        receiveShadow
+        position={[0, 0, -10]}
+        rotation={[0, angToRad(-55), 0]}
+      >
+        <planeBufferGeometry attach="geometry" args={[2000, 2000]} />
+        <meshPhongMaterial attach="material" color="#555" />
+      </mesh>
+
+      <mesh
+        receiveShadow
+        position={[0, -10, 0]}
+        rotation={[angToRad(-30), 0, 0]}
+      >
+        <planeBufferGeometry attach="geometry" args={[2000, 2000]} />
+        <meshPhongMaterial attach="material" color="#444" />
+      </mesh>
+    </group>
+  );
+};
+
+export default {
+  id: 'cube_turrel_vr',
+  vr: true,
+  component: TurrellCubeExperimentVR,
+  metadata: {
+    name: 'Turrell Cube (VR)',
+    author: 'JoskerDu',
+    description:
+      'An ode to James Turrell. Specifically the installation "Catso, Red" at the Mattress Factory in Pittsburgh, PA.',
+  },
+};

src/experiments/index.js

@@ -2,6 +2,7 @@
 import simpleCube from './simple_cube/';
 import anotherCube from './cube_plus/';
 import turrellCube from './cube_turrell/';
+import turrellCubeVR from './cube_turrell_vr/';
 import modelStatic from './model_static/';
 import modelSuspense from './model_suspense/';
 import modelAnimated from './model_animated/';
@@ -11,6 +12,7 @@ const experiments = [
   simpleCube,
   anotherCube,
   turrellCube,
+  turrellCubeVR,
   modelStatic,
   modelSuspense,
   modelAnimated,