Compare commits
No commits in common. "1bdb7c2e1aa45df556032061fba963f0b24b0bc1" and "b0e9724451501ce757563226fb50d9da7aecfe7f" have entirely different histories.
1bdb7c2e1a
...
b0e9724451
15
README.md
15
README.md
@ -1,17 +1,2 @@
|
|||||||
# 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
|
|
||||||
```
|
|
||||||
|
|||||||
@ -1,10 +0,0 @@
|
|||||||
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
4931
stereo-exp1/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -1,25 +0,0 @@
|
|||||||
{
|
|
||||||
"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"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@ -1,24 +0,0 @@
|
|||||||
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>
|
|
||||||
</>
|
|
||||||
}
|
|
||||||
@ -1,12 +0,0 @@
|
|||||||
<!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>
|
|
||||||
@ -1,19 +0,0 @@
|
|||||||
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>
|
|
||||||
)
|
|
||||||
@ -1,11 +0,0 @@
|
|||||||
html,
|
|
||||||
body,
|
|
||||||
#root
|
|
||||||
{
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
background: ivory;
|
|
||||||
}
|
|
||||||
@ -1,39 +0,0 @@
|
|||||||
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,10 +12,9 @@
|
|||||||
"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,5 +1,7 @@
|
|||||||
import { useThree, extend } from '@react-three/fiber'
|
import { useThree, extend } from '@react-three/fiber'
|
||||||
import { OrbitControls } from '@react-three/drei'
|
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
|
||||||
|
|
||||||
|
extend({ OrbitControls })
|
||||||
|
|
||||||
export default function Experience()
|
export default function Experience()
|
||||||
{
|
{
|
||||||
@ -7,7 +9,7 @@ export default function Experience()
|
|||||||
|
|
||||||
return <>
|
return <>
|
||||||
|
|
||||||
<OrbitControls />
|
<orbitControls args={ [ camera, gl.domElement ] } />
|
||||||
|
|
||||||
<directionalLight position={ [ 1, 2, 3 ] } intensity={ 4.5 } />
|
<directionalLight position={ [ 1, 2, 3 ] } intensity={ 4.5 } />
|
||||||
<ambientLight intensity={ 1.5 } />
|
<ambientLight intensity={ 1.5 } />
|
||||||
@ -19,7 +21,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="grey" />
|
<meshStandardMaterial color="greenyellow" />
|
||||||
</mesh>
|
</mesh>
|
||||||
|
|
||||||
</>
|
</>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user