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