godber/play.webvr.dev
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add stereo-exp1

Browse Source
This commit is contained in:
Austin Godber 2024-04-14 11:08:56 -07:00
parent e17a4e90ea
commit 26eff21b0d
9 changed files with 5086 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
README.md
View File

@ -1,2 +1,17 @@
# play.webxr.dev # 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
```

10
stereo-exp1/eslint.config.js Normal file
View File

@ -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,
];

4931
stereo-exp1/package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

25
stereo-exp1/package.json Normal file
View File

@ -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"
}
}

24
stereo-exp1/src/Experience.jsx Normal file
View File

@ -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>
</>
}

12
stereo-exp1/src/index.html Normal file
View File

@ -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>

19
stereo-exp1/src/index.jsx Normal file
View File

@ -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>
)

11
stereo-exp1/src/style.css Normal file
View File

@ -0,0 +1,11 @@
html,
body,
#root
{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: ivory;
}

39
stereo-exp1/vite.config.js Normal file
View File

@ -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
},
}