Frontend/Three.js

    카메라 컨트롤, Minecraft Controls

    카메라 컨트롤, Minecraft Controls

    Minecraft Controls 플레이어가 게임 세계와 상호작용하고 탐색할 수 있도록 도와주는 다양한 입력 장치의 설정이다.  PointerLockControls에 키보드 컨트롤 추가import * as THREE from "three";import { PointerLockControls } from "three/examples/jsm/controls/PointerLockControls";import { KeyController } from "./KeyController";/* 주제: Minecraft Controls : PointerLockControls에 키보드 컨트롤 추가 */export default function example() { /* Renderer 만들기 : html에 캔버스 미리..

    카메라 컨트롤, DragControls

    카메라 컨트롤, 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

    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

    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..