🔦raycaster의 역할과 배경 three.js를 사용하다보면 각 Mesh에 메타데이터를 넣어주고 싶은 일들이 생긴다. (누르면 관련 웹페이지로 넘기던가, 아니면 내부 로직을 위해 id 같은 key값을 리턴해주던가...) 이런 처리를 raycaster 에서 해주는데 적용하고 나면 onClickEvent나 onMouseOverEvent를 구현할 수 있다. raycaster는 뜻 그대로 광선이라고 생각하면 된다. 마우스가 있는 값 기준으로 광선을 쭉 쐈을 때, 그 광선을 맞은 Mesh에 대한 정보를 얻어낼 수 있다. 예를 들면 이런 식으로 구현이 가능하다. 구현을 위해선 몇 가지의 트릭(?)이 존재하는데 주로 사용자 인터렉션 관련된 내용이다. 구현 목표는 다음과 같다. 1. raycaster 생성 in R..

클라이언트에선 다 그렇지만, 언제나 리소스를 가져오는데에 딜레이는 생기기 마련이다. Three.js에서는 이런 체감이 훨씬 더 심한데, 3D 모델링을 기반으로 하거나, 엄청나게 큰 (화질도 크기도) 사진을 종종 import 해와서 Scene에 넣는 경우가 많기 때문에 그렇다. 내 포트폴리오 프로젝트가 절반정도 완료되었는데, import 해와야하는 리소스가 무려 36개다. 네트워크 탭에서 확인해보면 캐시된 메모리들도 있고 해서 로컬에서 실행시키면 거진 바로 켜지는 느낌이 들곤 한다. 시간 탭을 보면 거의 1000ms 안쪽으로 전부 리소스가 받아진다. 리소스를 THREE.TextureLoader에서 받아오니까 결론적으로 모든 렌더링까지 1초정도가 걸리는 셈! 반면 이건 gh-pages 라이브러리로 깃허브 페..

사건의 발단은 이렇다. Three.js를 React에서 다루면서 페인팅이 두 번 되는 느낌이 들었다. (개인 플젝 뿐만 아니라 처음 배우면서 썼던 Next.js에서도 두 번 그려졌다.) useEffect에서 렌더링이랑 카메라랑 오브젝트랑 모든 걸 다루기 때문에 repainting이 되는 순간 조명도 두 배! 오브젝트도 두 배! 가 되버린다. 사실 분명 예전에도 여러 번 타는 걸 본 적이 있는데 별 생각이 없었어서 냅뒀었다. 의존성 문제인가 하고 사이드 이펙트를 다 뒤졌는데 결론은 바로 제목에 써놓은 것처럼 React.StrcitMode가 문제였다. 보통 CRA로 만들어지는 프로젝트는 기본적으로 StrictMode로 나오게되니.. 뭔가 불안하지만 일단 Index.tsx에 있는 React.StrictMode..

요즘 Next.js랑 three.js를 공부해보고 있는데, 대지를 그려주거나 할 때 window 객체에 접근할 일이 자주 있습니다. 하지만 Next.js는 SSR을 기본으로 하기 때문에 서버에서 렌더링 하는 시점에선 전역변수 window를 가져올 수 없습니다. 방법은 두 가지가 있습니다. 1. dynamic 사용 import styles from "../styles/Home.module.css"; import dynamic from "next/dynamic"; const ThreeJSSetting = dynamic(() => import("../components/Example"), {ssr: false}); export default function Home() { return ( HELLO THREE..