크래프톤 정글 week13, day95 - 잔디심기, threeJS 학습 중 에러

백준

2475

파이썬

브론즈5

검증수

import sys
input = sys.stdin.readline

num = list(map(int, input().split()))
result = 0

for n in num:
    result += n*n

result = result % 10
print(result)

---

게시판 UI들은 반절정도 구현되서 three.js를 연습할 겸 유튜브 강의를 들었다.

원래라면 게시판을 처음 들어갈 때 로그인 페이지로 넘어가게 하려고 했는데, 세진이가 "로그인과 회원가입으로 넘어갈 수 있는 메인 페이지를 하나 만들자. 그리고 그 페이지 배경에 three.js를 이용해서 3d 큐브같은 동적인 배경을 만들어보자" 해서 강의의 학습 내용을 메인페이지에서 만들려고 했다.

 

< 학습 강의 >

링크를 올려도 되는지 모르겠다. 혹시나 문제가 생기면 내릴 예정

https://www.youtube.com/watch?v=0jnGlLb_z7w&list=PLe6NQuuFBu7HUeJkowKRkLWwkdOlhwrje&index=6

import { OrbitControls } from "@react-three/drei";
import { useFrame } from "@react-three/fiber";
import { useRef } from "react"
import { Mesh } from "three"
import * as THREE from "three"

const Element3D = () => {
    const refMesh = useRef<Mesh | null>(null);

    return (
        <>
            <directionalLight position={[1, 1, 1]} />

            <axesHelper scale={10} />
            <OrbitControls />

            <mesh ref={refMesh}
                position-y={2}
                rotation-z={THREE.MathUtils.degToRad(45)}
                scale={[2, 1, 1]}
            >
                <boxGeometry />
                <meshStandardMaterial color="#e67e22" />
                <axesHelper />

                <mesh>
                    <sphereGeometry />
                    <meshStandardMaterial color="red" />
                </mesh>
            </mesh>
        </>
    )
}
export default Element3D

영상에 나오는 예시를 연습해보며 그대로 페이지에 적용해보고 있었다.

현재 학습한 부분은 정사각형부터 시작해서 3d 큐브 변경=> x, y, z축으로 이동 =>  3d큐브 길이 늘리기 => 3d 큐브를 3d타원형으로 변경까지 학습하고 있었다.

 

이 부분을 메인페이지에 적용하고자

import Login from './page/login';
import './App.css';
import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
import Signup from './page/signup';
import Post from './page/post';
import Main from './page/main';
import Write from './page/write';

const App = () => {
  return (
    <>
      <BrowserRouter>
        <Routes>
          <Route path="/" element={<Navigate replace to="/login" />} />
          <Route path='/main' element={<Main />}></Route>
          <Route path='/login' element={<Login />}></Route>
          <Route path='/signup' element={<Signup />}></Route>
          <Route path='/post' element={<Post />}></Route>
          <Route path='/write' element={<Write />}></Route>
        </Routes>
      </BrowserRouter>
    </>
  );
}

export default App;

route에 적용해서 실행했는데, three.js를 사용한 메인페이지 외에 다른 페이지 UI들이 다 터졌다.

기존에 작성해놨던 멀쩡한 UI들이

이런식으로 기존에 작성해논 컴포넌트가 사라지거나 위치가 어긋나거나 하는 에러가 발생했다.

일단 저 메인페이지를 주석처리해놓으면 문제가 없어져서 three.js가 호환이 잘 안되는건지 원인을 잘 모르겠다. 주변에 물어보고 싶지만 아직 three.js를 알고있는 사람은 없고 구글링해도 터지는 원인을 못찾아서
카이스트 정글 수료생인 킹갓이주희님에게 조심스레 질문드려 보려고 한다..

게시판은 만들어야 하기 때문에 메인페이지는 일단 봉인

 

학습 시간 : 10 ~ 26시