diff --git a/FE/public/maintest.fbx b/FE/public/maintest.fbx new file mode 100644 index 0000000..22be4c5 Binary files /dev/null and b/FE/public/maintest.fbx differ diff --git a/FE/src/pages/StarPage.js b/FE/src/pages/StarPage.js index b9f0a66..a0acc3c 100644 --- a/FE/src/pages/StarPage.js +++ b/FE/src/pages/StarPage.js @@ -5,7 +5,7 @@ import { useQuery, useMutation } from "react-query"; import { useRecoilState, useRecoilValue, useSetRecoilState } from "recoil"; import styled from "styled-components"; import { Canvas, useThree } from "@react-three/fiber"; -import { OrbitControls } from "@react-three/drei"; +import { OrbitControls, useFBX } from "@react-three/drei"; import * as THREE from "three"; import diaryAtom from "../atoms/diaryAtom"; import userAtom from "../atoms/userAtom"; @@ -28,17 +28,22 @@ function StarPage() { - + + @@ -126,6 +131,18 @@ function StarPage() { ); } +function Scene() { + const fbx = useFBX("/maintest.fbx"); + + return ( + + ); +} + function StarView() { const { scene, raycaster, camera } = useThree(); const [diaryState, setDiaryState] = useRecoilState(diaryAtom); @@ -223,8 +240,8 @@ function StarView() { const direction = targetPosition.clone().sub(currentPosition); const distance = direction.length(); - if (distance > 0.05) { - const moveDistance = Math.min(0.05, distance); + if (distance > 0.005) { + const moveDistance = Math.min(0.005, distance); direction.normalize().multiplyScalar(moveDistance); camera.position.add(direction); requestAnimationFrame(animate); @@ -258,6 +275,7 @@ function StarView() { return ( <> + - + - + {Object.keys(texture).length > 0