add template
This commit is contained in:
parent
2d19c63210
commit
f8363f2e9e
20
template/package.json
Normal file
20
template/package.json
Normal 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
BIN
template/public/bangers-v20-latin-regular.woff
Normal file
Binary file not shown.
28
template/src/Experience.jsx
Normal file
28
template/src/Experience.jsx
Normal 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
12
template/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>R3F</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="./index.jsx"></script></body>
|
||||
</html>
|
19
template/src/index.jsx
Normal file
19
template/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: [ - 4, 3, 6 ]
|
||||
} }
|
||||
>
|
||||
<Experience />
|
||||
</Canvas>
|
||||
)
|
11
template/src/style.css
Normal file
11
template/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
template/vite.config.js
Normal file
39
template/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
|
||||
},
|
||||
}
|
Loading…
Reference in New Issue
Block a user