add stereo-exp1

2024-04-14 11:08:56 -07:00
parent e17a4e90ea
commit 26eff21b0d
9 changed files with 5086 additions and 0 deletions
--- a/stereo-exp1/src/Experience.jsx
+++ b/stereo-exp1/src/Experience.jsx
@ -0,0 +1,24 @@
+import { useThree, extend } from '@react-three/fiber'
+import { OrbitControls } from '@react-three/drei'
+
+export default function Experience()
+{
+  const { camera, gl } = useThree()
+
+  return <>
+    <OrbitControls />
+
+    <directionalLight position={ [ 1, 2, 3 ] } intensity={ 4.5 } />
+    <ambientLight intensity={ 1.5 } />
+
+    <mesh position-y={ 5 } scale={ 10 }>
+      <planeGeometry />
+      <meshStandardMaterial color="blue"/>
+    </mesh>
+
+    <mesh position-y={ - 1 } rotation-x={ - Math.PI * 0.5 } scale={ 10 }>
+      <planeGeometry />
+      <meshStandardMaterial color="grey" />
+    </mesh>
+  </>
+}
--- a/stereo-exp1/src/index.html
+++ b/stereo-exp1/src/index.html
@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Stereo Experiment 1</title>
+</head>
+<body>
+    <div id="root"></div>
+    <script type="module" src="./index.jsx"></script></body>
+</html>
--- a/stereo-exp1/src/index.jsx
+++ b/stereo-exp1/src/index.jsx
@ -0,0 +1,19 @@
+import './style.css'
+import ReactDOM from 'react-dom/client'
+import { Canvas } from '@react-three/fiber'
+import Experience from './Experience.jsx'
+
+const root = ReactDOM.createRoot(document.querySelector('#root'))
+
+root.render(
+    <Canvas
+        camera={ {
+            fov: 45,
+            near: 0.1,
+            far: 200,
+            position: [ - 4, 3, 6 ]
+        } }
+    >
+        <Experience />
+    </Canvas>
+)
--- a/stereo-exp1/src/style.css
+++ b/stereo-exp1/src/style.css
@ -0,0 +1,11 @@
+html,
+body,
+#root
+{
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: ivory;
+}