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

add template

Browse Source
This commit is contained in:
Austin Godber
2024-04-14 09:17:49 -07:00
parent 2d19c63210
commit f8363f2e9e
7 changed files with 129 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
template/package.json Normal file
View File

@@ -0,0 +1,20 @@
{
"name": "threejs-template",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build"
},
"devDependencies": {
"@vitejs/plugin-react": "4.1",
"vite": "^4.5.0"
},
"dependencies": {
"react": "18.2",
"react-dom": "18.2",
"@react-three/fiber": "^8.15.8",
"three": "^0.158.0"
}
}

BIN
template/public/bangers-v20-latin-regular.woff Normal file
View File

Binary file not shown.

28
template/src/Experience.jsx Normal file
View File

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

12
template/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>R3F</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="./index.jsx"></script></body>
</html>

19
template/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
template/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
template/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
},
}