Merge pull request #235 from boostcampwm2023/feat/234-3d-floor

[Feat] 3D 바닥 구현
boostcampwm2023 · Dec 7, 2023 · b28c48d · b28c48d
2 parents 952ce9a + 7af4df4
commit b28c48d
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 8 deletions.
diff --git a/FE/public/maintest.fbx b/FE/public/maintest.fbx
diff --git 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() {
       <CanvasContainer>
         <Canvas
           camera={{
-            position: [-1, -1, -1],
+            position: [
+              -0.5 / Math.sqrt(3),
+              -0.5 / Math.sqrt(3),
+              -0.5 / Math.sqrt(3),
+            ],
           }}
         >
-          <ambientLight />
+          <directionalLight intensity={0.037} />
+          <ambientLight intensity={0.01} />
           <OrbitControls
             enabled={starState.drag}
             enablePan={false}
             enableDamping={false}
             enableZoom={false}
             target={[0, 0, 0]}
-            rotateSpeed={-0.4}
+            rotateSpeed={-0.25}
           />
           <StarView />
         </Canvas>
@@ -126,6 +131,18 @@ function StarPage() {
   );
 }
 
+function Scene() {
+  const fbx = useFBX("/maintest.fbx");
+
+  return (
+    <primitive
+      object={fbx}
+      scale={0.005}
+      position={[0, Math.cos(Math.PI / 1.98) * 20, 0]}
+    />
+  );
+}
+
 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,18 +275,21 @@ function StarView() {
 
   return (
     <>
+      <Scene />
       <mesh>
         <sphereGeometry
           args={[30, 32, 16, 0, Math.PI * 2, 0, Math.PI / 1.98]}
         />
         <primitive object={material} attach='material' side={THREE.BackSide} />
       </mesh>
       <mesh onDoubleClick={mode === "create" ? doubleClickOnCreate : null}>
-        <sphereGeometry args={[29]} />
+        <sphereGeometry
+          args={[29, 32, 16, 0, Math.PI * 2, 0, Math.PI / 1.98]}
+        />
         <meshStandardMaterial transparent opacity={0} side={THREE.BackSide} />
       </mesh>
       <mesh>
-        <sphereGeometry args={[3]} />
+        <sphereGeometry args={[0.5]} />
         <meshStandardMaterial transparent opacity={0} side={THREE.BackSide} />
       </mesh>
       {Object.keys(texture).length > 0