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

Compare commits

base: godber:b0e9724451501ce757563226fb50d9da7aecfe7f
Branches Tags
godber:main
godber:add-stereo-exp1
..
compare: godber:1bdb7c2e1aa45df556032061fba963f0b24b0bc1
Branches Tags
godber:main
godber:add-stereo-exp1

5 Commits
b0e9724451 ... 1bdb7c2e1a

Author SHA1 Message Date
Austin Godber
1bdb7c2e1a Merge pull request 'add-stereo-exp1' (#1) from add-stereo-exp1 into main 
Reviewed-on: #1
 2024-04-19 08:25:13 -07:00
Austin Godber
aabacdbc11 load texture 2024-04-14 17:43:56 -07:00
Austin Godber
2d9326c098 add doublesided 2024-04-14 15:23:14 -07:00
Austin Godber
26eff21b0d add stereo-exp1 2024-04-14 11:08:56 -07:00
Austin Godber
e17a4e90ea add drei to template 2024-04-14 10:34:55 -07:00
12 changed files with 5979 additions and 126 deletions
Show Stats Expand all files Collapse all files

15
README.md
View File

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

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, useTexture } from '@react-three/drei'
import { DoubleSide } from 'three'
export default function Experience()
{
const { camera, gl } = useThree()
// const harborSealRockTexture = useTexture('./MARS-Harbor-Seal-Rock-in-Jezero-Crater-cross-eyed-Manzoni_May-1662x2048.jpg')
const goliathTexture = useTexture('https://tile.loc.gov/storage-services/service/pnp/stereo/1s00000/1s00000/1s00600/1s00612v.jpg')
const texture = goliathTexture
const {width, height} = texture.image
return <>
<OrbitControls />
<directionalLight position={ [ 1, 2, 3 ] } intensity={ 4.5 } />
<ambientLight intensity={ 1.5 } />
<mesh position-y={ 5 } scale={ .01 }>
<planeGeometry args={[width, height]}/>
<meshStandardMaterial map={texture} side={DoubleSide} />
</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: [ 0, 5, 20 ]
} }
>
<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
},
}

1006
template/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

5
template/package.json
View File

@ -12,9 +12,10 @@
"vite": "^5.2.8"
},
"dependencies": {
"@react-three/drei": "^9.105.4",
"@react-three/fiber": "^8.16.2",
"react": "18.2",
"react-dom": "18.2",
"@react-three/fiber": "^8.16.2",
"three": "^0.163.0"
}
}
}

8
template/src/Experience.jsx
View File

@ -1,7 +1,5 @@
import { useThree, extend } from '@react-three/fiber'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
extend({ OrbitControls })
import { OrbitControls } from '@react-three/drei'
export default function Experience()
{
@ -9,7 +7,7 @@ export default function Experience()
return <>
<orbitControls args={ [ camera, gl.domElement ] } />
<OrbitControls />
<directionalLight position={ [ 1, 2, 3 ] } intensity={ 4.5 } />
<ambientLight intensity={ 1.5 } />
@ -21,7 +19,7 @@ export default function Experience()
<mesh position-y={ - 1 } rotation-x={ - Math.PI * 0.5 } scale={ 10 }>
<planeGeometry />
<meshStandardMaterial color="greenyellow" />
<meshStandardMaterial color="grey" />
</mesh>
</>