분류 전체보기

카메라 컨트롤, DragControls

DragControls 3D 장면에서 마우스를 사용해 오브젝트를 드래그하고 이동할 수 있도록 해주는 컨트롤이다. 사용자가 화면에서 직접적으로 물체를 선택하고 조작할 수 있게 해준다.  이 컨트롤러는 Raycaster를 사용해 마우스 포인터와 3D 공간에서의 오브젝트 간 교차를 감지하고, 선택된 오브젝트를 드래그하는 기능을 제공한다.  드래그 시작시 발광 색상 적용 및 복구import * as THREE from "three";import { DragControls } from "three/examples/jsm/controls/DragControls";/* 주제: DragControls */export default function example() { /* Renderer 만들기 : html에 캔버스..

카메라 컨트롤, PointerLockControls

PointerLockControls 마우스 커서를 숨기고 사용자가 마우스를 움직이는 방향에 따라 카메라의 시점을 변경해주는 컨트롤러이다. 이 컨트롤러는 주로 1인칭 시점 게임이나 3D 시뮬레이션에서 자유롭게 시점을 변경하고, 사용자가 화면을 넘어서도 마우스를 계속 움직일 수 있도록 해준다.  MDN문서_Pointer Lock APIPointerLock API를 사용하여 마우스 커서를 화면에서 숨기고, 커서의 위치 대신 움직임 변화를 추적하는 방식이다. 이는 Three.js와 같은 3D 라이브러리에서 1인칭 시점 제어를 구현할 때 매우 유용하다.  import * as THREE from "three";import { PointerLockControls } from "three/examples/jsm/co..

카메라 컨트롤, FirstPersonControls

FirstPersonControls 3D 웹 애플리케이션에서 1인칭 시점(First-Person View)으로 장면을 탐색하고 상호작용할 수 있도록 해주는 컨트롤러이다. 사용자는 마우스와 키보드를 통해 1인칭 시점에서 자유롭게 카메라를 움직일 수 있다.  Fly Controls의 대체 구현이며 Fly Controls에서 몇 가지 기능을 추가하거나 수정해서 다시 만든 버전이라고 생각하면 된다.  import * as THREE from "three";import { FirstPersonControls } from "three/examples/jsm/controls/FirstPersonControls";/* 주제: FirstPersonControls */export default function exampl..

TailwindCSS Setup

Tailwind CSSTailwind CSS는 utility-first framework이다.미리 정의된 CSS 클래스를 사용해 스타일을 적용할 수 있게 해 준다.클래스를 이용해 HTML에 조합해서 사용할 수 있다.  설치: Tailwind CSShttps://tailwindcss.com/docs/installationnpm install -D tailwindcssnode 버전 12 이상이어야 한다.  VSCode extensions 설치Tailwind CSS intellSense : 클래스 이름 자동완성 기능  필요 없는 파일 제거App.cssindex.csslogo.svg  코드 초기화// App.tsxfunction App() { return HELLO;}export default App; // ..