rewrite lesson 5 in vite and r3f

algoritmau · Mar 3, 2023 · 78cc2bd · 78cc2bd
1 parent 9c1f761
commit 78cc2bd
Show file tree

Hide file tree

Showing 35 changed files with 2,052 additions and 6,647 deletions.
diff --git a/05 Transforming Objects/Vite/.gitignore b/05 Transforming Objects/Vite/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/05 Transforming Objects/Vite/.nvmrc b/05 Transforming Objects/Vite/.nvmrc
@@ -0,0 +1 @@
+18.14.2
diff --git a/05 Transforming Objects/Vite/README.md b/05 Transforming Objects/Vite/README.md
@@ -0,0 +1,24 @@
+# 05. Transforming Objects
+
+I've set up a custom Vite config to use TypeScript and Sass.
+
+## Setup
+
+Run this following commands to install the dependencies, start the development server, and build for production:
+
+```bash
+# Install dependencies (only the first time)
+pnpm install
+
+# Run the local server at localhost:5173
+pnpm dev
+
+# Build for production in the dist/ directory
+pnpm build
+```
+
+## Lesson
+
+There are four properties to transform objects: `position`, `scale`, `rotation`, and `quaternion`. All these properties are compiled to matrices.
+
+All of the `Object3D` inheriting classes have those properties. For instance, `PerspectiveCamera` or `Mesh`.
diff --git a/05 Transforming Objects/Vite/index.html b/05 Transforming Objects/Vite/index.html
@@ -0,0 +1,15 @@
+<!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" />
+    <link rel="icon" type="image/svg+xml" href="/threejs-journey-logo.svg" />
+    <title>04 - Local Server</title>
+  </head>
+  <body>
+    <canvas id="webgl"></canvas>
+
+    <script src="/src/main.ts" type="module"></script>
+  </body>
+</html>
diff --git a/05 Transforming Objects/Vite/package.json b/05 Transforming Objects/Vite/package.json
@@ -0,0 +1,20 @@
+{
+  "name": "vite-local-server",
+  "private": true,
+  "version": "0.1.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "devDependencies": {
+    "@types/three": "^0.149.0",
+    "sass": "^1.58.3",
+    "typescript": "^4.9.3",
+    "vite": "^4.1.0"
+  },
+  "dependencies": {
+    "three": "^0.150.1"
+  }
+}