Merge pull request #43 from moonraker22/new-lesson

New lesson
moonraker22 · Nov 14, 2022 · 16adff4 · 16adff4
2 parents fa78d28 + c0c8aeb
commit 16adff4
Show file tree

Hide file tree

Showing 17 changed files with 59,121 additions and 0 deletions.
diff --git a/49-mouse-events-with-r3f/package-lock.json b/49-mouse-events-with-r3f/package-lock.json
diff --git a/49-mouse-events-with-r3f/package.json b/49-mouse-events-with-r3f/package.json
@@ -0,0 +1,34 @@
+{
+  "name": "exercise",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "dev": "react-scripts start",
+    "build": "react-scripts build"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "@react-three/drei": "^9.32.4",
+    "@react-three/fiber": "^8.8.7",
+    "r3f-perf": "^6.5.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-scripts": "^5.0.1",
+    "three": "^0.145.0"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}
diff --git a/49-mouse-events-with-r3f/public/hamburger.glb b/49-mouse-events-with-r3f/public/hamburger.glb
diff --git a/49-mouse-events-with-r3f/public/index.html b/49-mouse-events-with-r3f/public/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>49 - Mouse events with R3F</title>
+</head>
+<body>
+    <div id="root"></div>
+</body>
+</html>
diff --git a/49-mouse-events-with-r3f/src/Experience.js b/49-mouse-events-with-r3f/src/Experience.js
@@ -0,0 +1,105 @@
+import { useFrame } from '@react-three/fiber'
+import { meshBounds, useGLTF, OrbitControls } from '@react-three/drei'
+import { useRef } from 'react'
+
+export default function Experience() {
+  const cube = useRef()
+  const sphere = useRef()
+
+  const hamburger = useGLTF('./hamburger.glb')
+
+  useFrame((state, delta) => {
+    cube.current.rotation.y += delta * 0.2
+  })
+
+  const eventHandler = (event) => {
+    cube.current.material.color.set(`hsl(${Math.random() * 360}, 100%, 75%)`)
+    cube.current.rotation.set(
+      Math.random() * 2,
+      Math.random() * 2,
+      Math.random() * 2
+    )
+    cube.current.position.set(
+      Math.random() * 2 - 1,
+      Math.random() * 2 - 1,
+      Math.random() * 2 - 1
+    )
+    console.log(cube.current.scale)
+    console.log('the event occured', event)
+
+    console.log('---')
+    console.log('distance', event.distance) // Distance between camera and hit point
+    console.log('point', event.point) // Hit point coordinates (in 3D)
+    console.log('uv', event.uv) // UV coordinates on the geometry (in 2D)
+    console.log('object', event.object) // The object that triggered the event
+    console.log('eventObject', event.eventObject) // The object that was listening to the event (useful where there is objects in objects)
+
+    console.log('---')
+    console.log('x', event.x) // 2D screen coordinates of the pointer
+    console.log('y', event.y) // 2D screen coordinates of the pointer
+
+    console.log('---')
+    console.log('shiftKey', event.shiftKey) // If the SHIFT key was pressed
+    console.log('ctrlKey', event.ctrlKey) // If the CTRL key was pressed
+    console.log('metaKey', event.metaKey)
+    cube.current.scale.set(1.5, 1.5, 1.5)
+    event.stopPropagation()
+    sphere.current.scale.set(
+      Math.random() * 2,
+      Math.random() * 2,
+      Math.random() * 2
+    )
+    cube.current.scale.set(1, 1, 1)
+  }
+
+  return (
+    <>
+      <OrbitControls makeDefault />
+
+      <directionalLight position={[1, 2, 3]} intensity={1.5} />
+      <ambientLight intensity={0.5} />
+
+      <mesh
+        position-x={-2}
+        onClick={(event) => event.stopPropagation()}
+        onPointerEnter={(event) => event.stopPropagation()}
+        ref={sphere}
+      >
+        <sphereGeometry />
+        <meshStandardMaterial color="orange" />
+      </mesh>
+
+      <mesh
+        ref={cube}
+        position-x={2}
+        scale={1.5}
+        onClick={eventHandler}
+        onPointerEnter={() => {
+          document.body.style.cursor = 'pointer'
+        }}
+        onPointerLeave={() => {
+          document.body.style.cursor = 'default'
+        }}
+        raycast={meshBounds}
+      >
+        <boxGeometry />
+        <meshStandardMaterial color="mediumpurple" />
+      </mesh>
+
+      <mesh position-y={-1} rotation-x={-Math.PI * 0.5} scale={10}>
+        <planeGeometry />
+        <meshStandardMaterial color="greenyellow" />
+      </mesh>
+
+      <primitive
+        object={hamburger.scene}
+        scale={0.25}
+        position-y={0.5}
+        onClick={(event) => {
+          console.log(event.object)
+          event.stopPropagation()
+        }}
+      />
+    </>
+  )
+}
diff --git a/49-mouse-events-with-r3f/src/index.js b/49-mouse-events-with-r3f/src/index.js
@@ -0,0 +1,22 @@
+import './style.css'
+import ReactDOM from 'react-dom/client'
+import { Canvas } from '@react-three/fiber'
+import Experience from './Experience.js'
+
+const root = ReactDOM.createRoot(document.querySelector('#root'))
+
+root.render(
+  <Canvas
+    onPointerMissed={() => {
+      console.log('You missed!')
+    }}
+    camera={{
+      fov: 45,
+      near: 0.1,
+      far: 200,
+      position: [-4, 3, 6],
+    }}
+  >
+    <Experience />
+  </Canvas>
+)
diff --git a/49-mouse-events-with-r3f/src/style.css b/49-mouse-events-with-r3f/src/style.css
@@ -0,0 +1,11 @@
+html,
+body,
+#root
+{
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: ivory;
+}