Compare commits
5 Commits
b0e9724451
...
1bdb7c2e1a
| Author | SHA1 | Date | |
|---|---|---|---|
| 1bdb7c2e1a | |||
| aabacdbc11 | |||
| 2d9326c098 | |||
| 26eff21b0d | |||
| e17a4e90ea |
15
README.md
15
README.md
@ -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
10
stereo-exp1/eslint.config.js
Normal 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
4931
stereo-exp1/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
25
stereo-exp1/package.json
Normal file
25
stereo-exp1/package.json
Normal 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
24
stereo-exp1/src/Experience.jsx
Normal 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
12
stereo-exp1/src/index.html
Normal 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
19
stereo-exp1/src/index.jsx
Normal 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
11
stereo-exp1/src/style.css
Normal 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
39
stereo-exp1/vite.config.js
Normal 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
1006
template/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -12,9 +12,10 @@
|
|||||||
"vite": "^5.2.8"
|
"vite": "^5.2.8"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"@react-three/drei": "^9.105.4",
|
||||||
|
"@react-three/fiber": "^8.16.2",
|
||||||
"react": "18.2",
|
"react": "18.2",
|
||||||
"react-dom": "18.2",
|
"react-dom": "18.2",
|
||||||
"@react-three/fiber": "^8.16.2",
|
|
||||||
"three": "^0.163.0"
|
"three": "^0.163.0"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,7 +1,5 @@
|
|||||||
import { useThree, extend } from '@react-three/fiber'
|
import { useThree, extend } from '@react-three/fiber'
|
||||||
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
|
import { OrbitControls } from '@react-three/drei'
|
||||||
|
|
||||||
extend({ OrbitControls })
|
|
||||||
|
|
||||||
export default function Experience()
|
export default function Experience()
|
||||||
{
|
{
|
||||||
@ -9,7 +7,7 @@ export default function Experience()
|
|||||||
|
|
||||||
return <>
|
return <>
|
||||||
|
|
||||||
<orbitControls args={ [ camera, gl.domElement ] } />
|
<OrbitControls />
|
||||||
|
|
||||||
<directionalLight position={ [ 1, 2, 3 ] } intensity={ 4.5 } />
|
<directionalLight position={ [ 1, 2, 3 ] } intensity={ 4.5 } />
|
||||||
<ambientLight intensity={ 1.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 }>
|
<mesh position-y={ - 1 } rotation-x={ - Math.PI * 0.5 } scale={ 10 }>
|
||||||
<planeGeometry />
|
<planeGeometry />
|
||||||
<meshStandardMaterial color="greenyellow" />
|
<meshStandardMaterial color="grey" />
|
||||||
</mesh>
|
</mesh>
|
||||||
|
|
||||||
</>
|
</>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user