update

mquangdev · May 2, 2024 · df63f6d · df63f6d
1 parent 25b3295
commit df63f6d
Show file tree

Hide file tree

Showing 19 changed files with 44 additions and 51 deletions.
diff --git a/.env b/.env
@@ -0,0 +1 @@
+PUBLIC_URL=.
diff --git a/index.html b/index.html
@@ -2,12 +2,12 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/3D-Portfolio/src/vite.svg" />
+    <link rel="icon" type="image/svg+xml" href="/src/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Vite + React</title>
   </head>
   <body>
     <div id="root"></div>
-    <script type="module" src="/3D-Portfolio/src/main.jsx"></script>
+    <script type="module" src="/src/main.jsx"></script>
   </body>
 </html>
diff --git a/package.json b/package.json
@@ -1,5 +1,4 @@
 {
-  "homepage": "http://mquangdev.github.io/3D-Portfolio",
   "name": "react-three-fiber-starter",
   "private": true,
   "version": "0.0.0",

diff --git a/src/components/Avatar.jsx b/src/components/Avatar.jsx
@@ -7,11 +7,11 @@ import { useAnimations, useFBX, useGLTF, useScroll } from "@react-three/drei";
 import { useFrame } from "@react-three/fiber";
 import * as THREE from "three";
 export default function Avatar(props) {
-  const { nodes, materials } = useGLTF("./../../public/models/Me.glb");
+  const { nodes, materials } = useGLTF("./models/Me.glb");
   const { animations: idleAnimation } = useFBX(
-    "/animations/Breathing_Idle.fbx"
+    "./animations/Breathing_Idle.fbx"
   );
-  const { animations: walkingAnimation } = useFBX("/animations/Walking.fbx");
+  const { animations: walkingAnimation } = useFBX("./animations/Walking.fbx");
   const group = useRef();
   const [animation, setAnimation] = useState("idle");
   idleAnimation[0].name = "idle";
@@ -115,6 +115,6 @@ export default function Avatar(props) {
   );
 }
 
-useGLTF.preload("./../../public/models/Me.glb");
-useFBX.preload("/animations/Breathing_Idle.fbx");
-useFBX.preload("/animations/Walking.fbx");
+useGLTF.preload("./models/Me.glb");
+useFBX.preload("./animations/Breathing_Idle.fbx");
+useFBX.preload("./animations/Walking.fbx");
diff --git a/src/components/Balloon.jsx b/src/components/Balloon.jsx
@@ -8,7 +8,7 @@ import { useGLTF } from "@react-three/drei";
 import React from "react";
 
 export function Balloon(props) {
-  const { nodes, materials } = useGLTF("/3D-Portfolio/models/Balloon.glb");
+  const { nodes, materials } = useGLTF("./models/Balloon.glb");
   return (
     <group {...props} dispose={null}>
       <mesh geometry={nodes.Balloon007.geometry} material={materials.phong1SG}>
@@ -18,4 +18,4 @@ export function Balloon(props) {
   );
 }
 
-useGLTF.preload("/3D-Portfolio/models/Balloon.glb");
+useGLTF.preload("./models/Balloon.glb");
diff --git a/src/components/BlackPanther.tsx b/src/components/BlackPanther.tsx
@@ -13,14 +13,11 @@ import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
 import * as THREE from "three";
 export default function BlackPanther(props) {
   const group = useRef();
-  const { animations } = useGLTF("/3D-Portfolio/models/black_panther.glb");
-  const nodes = useLoader(GLTFLoader, "/3D-Portfolio/models/black_panther.glb")[
-    "nodes"
+  const { animations } = useGLTF("./models/black_panther.glb");
+  const nodes = useLoader(GLTFLoader, "./models/black_panther.glb")["nodes"];
+  const materials = useLoader(GLTFLoader, "./models/black_panther.glb")[
+    "materials"
   ];
-  const materials = useLoader(
-    GLTFLoader,
-    "/3D-Portfolio/models/black_panther.glb"
-  )["materials"];
   const { actions } = useAnimations(animations, group);
   return (
     <group ref={group} {...props} dispose={null}>
@@ -130,4 +127,4 @@ export default function BlackPanther(props) {
   );
 }
 
-useGLTF.preload("/3D-Portfolio/models/black_panther.glb");
+useGLTF.preload("./models/black_panther.glb");
diff --git a/src/components/BookCase.jsx b/src/components/BookCase.jsx
@@ -8,7 +8,7 @@ import { useGLTF } from "@react-three/drei";
 import React from "react";
 
 export function BookCase(props) {
-  const { nodes, materials } = useGLTF("/3D-Portfolio/models/BookCaseWide.glb");
+  const { nodes, materials } = useGLTF("./models/BookCaseWide.glb");
   return (
     <group {...props} dispose={null}>
       <group rotation={[Math.PI / 2, 0, 0]}>
@@ -53,4 +53,4 @@ export function BookCase(props) {
   );
 }
 
-useGLTF.preload("/3D-Portfolio/models/BookCaseWide.glb");
+useGLTF.preload("./models/BookCaseWide.glb");
diff --git a/src/components/Cat.tsx b/src/components/Cat.tsx
@@ -13,11 +13,9 @@ import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
 import * as THREE from "three";
 export default function Cat(props) {
   const group = useRef();
-  const { animations } = useGLTF("/3D-Portfolio/models/Cat.glb");
-  const nodes = useLoader(GLTFLoader, "/3D-Portfolio/models/Cat.glb")["nodes"];
-  const materials = useLoader(GLTFLoader, "/3D-Portfolio/models/Cat.glb")[
-    "materials"
-  ];
+  const { animations } = useGLTF("./models/Cat.glb");
+  const nodes = useLoader(GLTFLoader, "./models/Cat.glb")["nodes"];
+  const materials = useLoader(GLTFLoader, "./models/Cat.glb")["materials"];
   const { actions } = useAnimations(animations, group);
   console.log(actions);
   useEffect(() => {
@@ -91,4 +89,4 @@ export default function Cat(props) {
   );
 }
 
-useGLTF.preload("/3D-Portfolio/models/Cat.glb");
+useGLTF.preload("./models/Cat.glb");
diff --git a/src/components/CouchSmall.jsx b/src/components/CouchSmall.jsx
@@ -8,7 +8,7 @@ import { useGLTF } from "@react-three/drei";
 import React from "react";
 
 export function CouchSmall(props) {
-  const { nodes, materials } = useGLTF("/3D-Portfolio/models/Couch Small.glb");
+  const { nodes, materials } = useGLTF("./models/Couch Small.glb");
   return (
     <group {...props} dispose={null}>
       <group rotation={[-Math.PI / 2, 0, 0]} scale={100}>
@@ -25,4 +25,4 @@ export function CouchSmall(props) {
   );
 }
 
-useGLTF.preload("/3D-Portfolio/models/Couch Small.glb");
+useGLTF.preload("./models/Couch Small.glb");
diff --git a/src/components/Lamp.jsx b/src/components/Lamp.jsx
@@ -8,7 +8,7 @@ import { useGLTF } from "@react-three/drei";
 import React from "react";
 
 export function Lamp(props) {
-  const { nodes, materials } = useGLTF("/3D-Portfolio/models/Lamp.glb");
+  const { nodes, materials } = useGLTF("./models/Lamp.glb");
   return (
     <group {...props} dispose={null}>
       <group position={[0.326, 0.78, -0.505]} rotation={[-1.419, 0.087, 2.088]}>
@@ -39,4 +39,4 @@ export function Lamp(props) {
   );
 }
 
-useGLTF.preload("/3D-Portfolio/models/Lamp.glb");
+useGLTF.preload("./models/Lamp.glb");
diff --git a/src/components/Laptop.jsx b/src/components/Laptop.jsx
@@ -8,7 +8,7 @@ import { useGLTF } from "@react-three/drei";
 import React from "react";
 
 export function Laptop(props) {
-  const { nodes, materials } = useGLTF("/3D-Portfolio/models/Laptop.glb");
+  const { nodes, materials } = useGLTF("./models/Laptop.glb");
   return (
     <group {...props} dispose={null}>
       <mesh
@@ -31,4 +31,4 @@ export function Laptop(props) {
   );
 }
 
-useGLTF.preload("/3D-Portfolio/models/Laptop.glb");
+useGLTF.preload("./models/Laptop.glb");
diff --git a/src/components/Larmbogini.jsx b/src/components/Larmbogini.jsx
@@ -2,7 +2,7 @@ import React, { useRef } from "react";
 import { useGLTF } from "@react-three/drei";
 
 export function Larmbogini(props) {
-  const { nodes, materials } = useGLTF("/3D-Portfolio/models/larmbogini.glb");
+  const { nodes, materials } = useGLTF("./models/larmbogini.glb");
   return (
     <group {...props} dispose={null}>
       <group rotation={[-Math.PI / 2, 0, 0]}>
@@ -59,4 +59,4 @@ export function Larmbogini(props) {
   );
 }
 
-useGLTF.preload("/3D-Portfolio/models/larmbogini.glb");
+useGLTF.preload("./models/larmbogini.glb");
diff --git a/src/components/MacBookPro.jsx b/src/components/MacBookPro.jsx
@@ -8,7 +8,7 @@ import { useGLTF, useTexture } from "@react-three/drei";
 import React from "react";
 
 export function MacBookPro(props) {
-  const { nodes, materials } = useGLTF("/3D-Portfolio/models/MacBook Pro.glb");
+  const { nodes, materials } = useGLTF("./models/MacBook Pro.glb");
   const screenTexture = useTexture("textures/screen.jpg");
   return (
     <group {...props} dispose={null}>
@@ -51,4 +51,4 @@ export function MacBookPro(props) {
     </group>
   );
 }
-useGLTF.preload("/3D-Portfolio/models/MacBook Pro.glb");
+useGLTF.preload("./models/MacBook Pro.glb");
diff --git a/src/components/Mailbox.jsx b/src/components/Mailbox.jsx
@@ -11,7 +11,7 @@ import * as THREE from "three";
 import { config } from "../config";
 
 export function Mailbox(props) {
-  const { nodes, materials } = useGLTF("/3D-Portfolio/models/Mailbox v2.glb");
+  const { nodes, materials } = useGLTF("./models/Mailbox v2.glb");
   const [mailboxHovered, setMailboxHovered] = useState(false);
   useCursor(mailboxHovered);
   useEffect(() => {
@@ -193,4 +193,4 @@ export function Mailbox(props) {
   );
 }
 
-useGLTF.preload("/3D-Portfolio/models/Mailbox v2.glb");
+useGLTF.preload("./models/Mailbox v2.glb");
diff --git a/src/components/Monitor.jsx b/src/components/Monitor.jsx
@@ -8,7 +8,7 @@ import { useGLTF } from "@react-three/drei";
 import React from "react";
 
 export function Monitor(props) {
-  const { nodes, materials } = useGLTF("/3D-Portfolio/models/Monitor.glb");
+  const { nodes, materials } = useGLTF("./models/Monitor.glb");
 
   return (
     <group {...props} dispose={null}>
@@ -17,4 +17,4 @@ export function Monitor(props) {
   );
 }
 
-useGLTF.preload("/3D-Portfolio/models/Monitor.glb");
+useGLTF.preload("./models/Monitor.glb");
diff --git a/src/components/PalmTree.jsx b/src/components/PalmTree.jsx
@@ -8,7 +8,7 @@ import { useGLTF } from "@react-three/drei";
 import React from "react";
 
 export function PalmTree(props) {
-  const { nodes, materials } = useGLTF("/3D-Portfolio/models/Palm tree.glb");
+  const { nodes, materials } = useGLTF("./models/Palm tree.glb");
   return (
     <group {...props} dispose={null}>
       <mesh
@@ -27,4 +27,4 @@ export function PalmTree(props) {
   );
 }
 
-useGLTF.preload("/3D-Portfolio/models/Palm tree.glb");
+useGLTF.preload("./models/Palm tree.glb");
diff --git a/src/components/ParkBench.jsx b/src/components/ParkBench.jsx
@@ -8,7 +8,7 @@ import { useGLTF } from "@react-three/drei";
 import React from "react";
 
 export function ParkBench(props) {
-  const { nodes, materials } = useGLTF("/3D-Portfolio/models/Park Bench.glb");
+  const { nodes, materials } = useGLTF("./models/Park Bench.glb");
   return (
     <group {...props} dispose={null}>
       <mesh
@@ -23,4 +23,4 @@ export function ParkBench(props) {
   );
 }
 
-useGLTF.preload("/3D-Portfolio/models/Park Bench.glb");
+useGLTF.preload("./models/Park Bench.glb");
diff --git a/src/components/Pigeon.jsx b/src/components/Pigeon.jsx
@@ -9,9 +9,7 @@ import React, { useEffect, useRef, useState } from "react";
 
 export function Pigeon(props) {
   const group = useRef();
-  const { nodes, materials, animations } = useGLTF(
-    "/3D-Portfolio/models/Pigeon.gltf"
-  );
+  const { nodes, materials, animations } = useGLTF("./models/Pigeon.gltf");
   const { actions } = useAnimations(animations, group);
   const [animation, setAnimation] = useState("Flying_Idle");
   useEffect(() => {
@@ -65,4 +63,4 @@ export function Pigeon(props) {
   );
 }
 
-useGLTF.preload("/3D-Portfolio/models/Pigeon.gltf");
+useGLTF.preload("./models/Pigeon.gltf");
diff --git a/src/components/Star.jsx b/src/components/Star.jsx
@@ -9,7 +9,7 @@ import { useFrame } from "@react-three/fiber";
 import React, { useRef } from "react";
 
 export function Star(props) {
-  const { nodes, materials } = useGLTF("/3D-Portfolio/models/Star.gltf");
+  const { nodes, materials } = useGLTF("./models/Star.gltf");
   const ref = useRef();
   useFrame(() => {
     ref.current.rotation.y += 0.06;
@@ -25,4 +25,4 @@ export function Star(props) {
   );
 }
 
-useGLTF.preload("/3D-Portfolio/models/Star.gltf");
+useGLTF.preload("./models/Star.gltf");