add template

2024-04-14 09:17:49 -07:00
parent 2d19c63210
commit f8363f2e9e
7 changed files with 129 additions and 0 deletions
--- a/template/src/Experience.jsx
+++ b/template/src/Experience.jsx
@ -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>
+
+    </>
+}
--- a/template/src/index.html
+++ b/template/src/index.html
@ -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>
--- a/template/src/index.jsx
+++ b/template/src/index.jsx
@ -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>
+)
--- a/template/src/style.css
+++ b/template/src/style.css
@ -0,0 +1,11 @@
+html,
+body,
+#root
+{
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: ivory;
+}