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/README.md
+++ b/README.md
@@ -1,2 +1,17 @@
 # play.webxr.dev

+## Keeping the Template Updated
+
+Periodically we should make sure that the template is up to date. To do this,
+we can use the `npm-check-updates` package. To run it, run the following
+command, it will show you what needs updating:
+
+```bash
+npx npm-check-updates
+```
+
+then to apply the changes:
+
+```bash
+npx npm-check-updates -u
+```
--- a/stereo-exp1/eslint.config.js
+++ b/stereo-exp1/eslint.config.js
@@ -0,0 +1,10 @@
+import globals from "globals";
+import pluginJs from "@eslint/js";
+import pluginReactConfig from "eslint-plugin-react/configs/recommended.js";
+
+
+export default [
+  {languageOptions: { globals: globals.browser }},
+  pluginJs.configs.recommended,
+  pluginReactConfig,
+];
--- a/stereo-exp1/package-lock.json
+++ b/stereo-exp1/package-lock.json
--- a/stereo-exp1/package.json
+++ b/stereo-exp1/package.json
@@ -0,0 +1,25 @@
+{
+  "name": "stereo-exp1",
+  "private": true,
+  "version": "0.1.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.0.0",
+    "@vitejs/plugin-react": "4.2",
+    "eslint": "^8.57.0",
+    "eslint-plugin-react": "^7.34.1",
+    "globals": "^15.0.0",
+    "vite": "^5.2.8"
+  },
+  "dependencies": {
+    "@react-three/drei": "^9.105.4",
+    "@react-three/fiber": "^8.16.2",
+    "react": "18.2",
+    "react-dom": "18.2",
+    "three": "^0.163.0"
+  }
+}
--- 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;
+}
--- a/stereo-exp1/vite.config.js
+++ b/stereo-exp1/vite.config.js
@@ -0,0 +1,39 @@
+import react from '@vitejs/plugin-react'
+import { transformWithEsbuild } from 'vite'
+
+export default {
+    root: 'src/',
+    publicDir: '../public/',
+    base: './',
+    plugins:
+    [
+        // React support
+        react(),
+
+        // .js file support as if it was JSX
+        {
+            name: 'load+transform-js-files-as-jsx',
+            async transform(code, id)
+            {
+                if (!id.match(/src\/.*\.js$/))
+                    return null
+
+                return transformWithEsbuild(code, id, {
+                    loader: 'jsx',
+                    jsx: 'automatic',
+                });
+            },
+        },
+    ],
+    server:
+    {
+        host: true, // Open to local network and display URL
+        open: !('SANDBOX_URL' in process.env || 'CODESANDBOX_HOST' in process.env) // Open if it's not a CodeSandbox
+    },
+    build:
+    {
+        outDir: '../dist', // Output in the dist/ folder
+        emptyOutDir: true, // Empty the folder first
+        sourcemap: true // Add sourcemap
+    },
+}