diff --git a/public/room.blend b/public/room.blend index ce32a5e..c9bb0be 100644 Binary files a/public/room.blend and b/public/room.blend differ diff --git a/public/room.blend1 b/public/room.blend1 index 7fe0660..239a059 100644 Binary files a/public/room.blend1 and b/public/room.blend1 differ diff --git a/public/room.fbx b/public/room.fbx index 08a1edf..934b5b7 100644 Binary files a/public/room.fbx and b/public/room.fbx differ diff --git a/src/App.tsx b/src/App.tsx index 18eb752..739f70d 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -6,19 +6,21 @@ import { type ThreeEvent, useLoader, } from "@react-three/fiber"; -import { OrbitControls } from "@react-three/drei"; +import { OrbitControls, useAnimations } from "@react-three/drei"; import { FBXLoader } from "three/examples/jsm/Addons.js"; -import { Vector3 } from "three"; +import { LoopOnce, Vector3 } from "three"; import "./App.css"; const Room = () => { const controls = useRef>(null); const room = useLoader(FBXLoader, "/room.fbx"); + const { mixer } = useAnimations(room.animations, room); const [focus, setFocus] = useState(null); const cameraPosition = useRef(null); const cameraTarget = useRef(new Vector3(0, 1, 0)); + const [windowState, setWindowState] = useState(false); const { camera } = useThree(); @@ -45,6 +47,28 @@ const Room = () => { e.stopPropagation(); + if (e.object.name.includes("Window")) { + const clip = room.animations.find( + (x) => x.name === "LowerWindow|LowerWindowAction", + ); + if (!clip) throw "no animation"; + + const action = mixer.clipAction(clip); + if (action.isRunning()) return; + action.clampWhenFinished = true; + action.setLoop(LoopOnce, 1); + action.timeScale = windowState ? -1 : 1; + if (windowState) { + action.paused = false; + action.time = action.getClip().duration; + } else { + action.reset(); + } + action.play(); + + setWindowState(!windowState); + } + if (e.object.name.includes("Poster") && e.object.name !== focus) { const objectPos = new Vector3(); const objectDir = new Vector3(); @@ -77,6 +101,7 @@ const Room = () => {