r3f start

jakedowns · Jan 26, 2024 · 64d7f4c · 64d7f4c
1 parent a24b62e
commit 64d7f4c
Show file tree

Hide file tree

Showing 11 changed files with 103 additions and 0 deletions.
diff --git a/r3f/public/index.html b/r3f/public/index.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+	<meta name="theme-color" content="#000000">
+	<!--
+      manifest.json provides metadata used when your web app is added to the
+      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
+    -->
+	<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
+	<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+	<!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+	<title>React App</title>
+</head>
+
+<body>
+	<noscript>
+		You need to enable JavaScript to run this app.
+	</noscript>
+	<div id="root"></div>
+	<!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+</body>
+
+</html>
diff --git a/r3f/src/App.js b/r3f/src/App.js
@@ -0,0 +1,39 @@
+import { useRef, useState } from 'react'
+import { Canvas, useFrame } from '@react-three/fiber'
+import { OrbitControls } from '@react-three/drei'
+
+function Box(props) {
+  // This reference gives us direct access to the THREE.Mesh object
+  const ref = useRef()
+  // Hold state for hovered and clicked events
+  const [hovered, hover] = useState(false)
+  const [clicked, click] = useState(false)
+  // Subscribe this component to the render-loop, rotate the mesh every frame
+  useFrame((state, delta) => (ref.current.rotation.x += delta))
+  // Return the view, these are regular Threejs elements expressed in JSX
+  return (
+    <mesh
+      {...props}
+      ref={ref}
+      scale={clicked ? 1.5 : 1}
+      onClick={(event) => click(!clicked)}
+      onPointerOver={(event) => (event.stopPropagation(), hover(true))}
+      onPointerOut={(event) => hover(false)}>
+      <boxGeometry args={[1, 1, 1]} />
+      <meshStandardMaterial color={hovered ? 'hotpink' : 'orange'} />
+    </mesh>
+  )
+}
+
+export default function App() {
+  return (
+    <Canvas>
+      <ambientLight intensity={Math.PI / 2} />
+      <spotLight position={[10, 10, 10]} angle={0.15} penumbra={1} decay={0} intensity={Math.PI} />
+      <pointLight position={[-10, -10, -10]} decay={0} intensity={Math.PI} />
+      <Box position={[-1.2, 0, 0]} />
+      <Box position={[1.2, 0, 0]} />
+      <OrbitControls />
+    </Canvas>
+  )
+}
diff --git a/r3f/src/index.js b/r3f/src/index.js
@@ -0,0 +1,5 @@
+import { createRoot } from 'react-dom/client'
+import './styles.css'
+import App from './App'
+
+createRoot(document.getElementById('root')).render(<App />)
diff --git a/r3f/src/styles.css b/r3f/src/styles.css
@@ -0,0 +1,16 @@
+* {
+  box-sizing: border-box;
+}
+
+html,
+body,
+#root {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  background: #f0f0f0;
+}
diff --git a/res/inspiration/1200x1200bb.jpg b/res/inspiration/1200x1200bb.jpg
diff --git a/res/inspiration/1425x1425sr.jpg b/res/inspiration/1425x1425sr.jpg
diff --git a/res/inspiration/6_1.png b/res/inspiration/6_1.png
diff --git a/res/inspiration/7_1.png b/res/inspiration/7_1.png
diff --git a/res/inspiration/GEhWBogaMAAHwDW.jpg b/res/inspiration/GEhWBogaMAAHwDW.jpg
diff --git a/res/inspiration/d90c6d1926809.560110460b341.jpg b/res/inspiration/d90c6d1926809.560110460b341.jpg
diff --git a/res/inspiration/qqh5kedak8ec1.webp b/res/inspiration/qqh5kedak8ec1.webp