diff --git a/.env b/.env new file mode 100644 index 0000000..1b5cf68 --- /dev/null +++ b/.env @@ -0,0 +1 @@ +PUBLIC_URL=. \ No newline at end of file diff --git a/index.html b/index.html index 1125958..4a42769 100644 --- a/index.html +++ b/index.html @@ -2,12 +2,12 @@ - + Vite + React
- + diff --git a/package.json b/package.json index 95905b4..0c28a06 100644 --- 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 index 722c153..57016eb 100644 --- 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 index e9a95db..a915331 100644 --- 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 ( @@ -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 index 7f77052..e7e474b 100644 --- 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 ( @@ -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 index 0e257e0..0e95ee0 100644 --- 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 ( @@ -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 index e7fae7c..30d2068 100644 --- 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 index d75a2c3..7508db3 100644 --- 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 ( @@ -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 index d766a48..25e25c3 100644 --- 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 ( @@ -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 index a6abc33..d221aa6 100644 --- 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 ( @@ -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 index 185feec..342ac49 100644 --- 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 ( @@ -51,4 +51,4 @@ export function MacBookPro(props) { ); } -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 index 7a3da99..252baa1 100644 --- 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 index 0666de5..220e8fd 100644 --- 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 ( @@ -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 index 03d580d..58db82f 100644 --- 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 ( { @@ -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 index 617ce07..5fa09bc 100644 --- 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");