분류 전체보기

[Apollo v.3] Reactive variables

Apollo 버전 3 새로운 기능https://www.apollographql.com/docs/react/local-state/reactive-variables  Reactive variablesReact에서 Apollo Client와 함께 사용하는 variables는 GraphQL 쿼리나 변이를 수행할 때 동적 값을 전달하는 방법이다.  Variables 사용 개요GraphQL 쿼리나 변이에서 동적 파라미터를 받는 부분을 정의한 후, React 컴포넌트에서 해당 변수를 Apollo Client의 useQuery나 useMutation 훅과 함께 전달한다.이렇게 전달된 변수는 쿼리나 변이의 조건을 조정하여 특정 데이터를 가져오거나 수정하는 데 사용된다.  makeVar는 Apollo Client의 Rea..

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