if(life){code();}

Edit Mode (편집 모드) 구현 Obejct 회전 기능localStorage 저장 기능  회전 기능 추가Overlay.jsx : 회전 아이콘 추가, Edit Mode일 때 동물을 회전할 수 있도록 함EditContext.jsx : rotate 함수를 만들어 선택딘 동물의 방향을 변경할 수 있도록 구현 Overlay.jsxexport const Overlay = () => { const { isEditMode, setEditMode, selectedId, setSelectedId, rotate } = useContext(EditContext); return ( {isEditMode && selectedId ? ( rotate("left")} /..

Edit Mode (편집 모드) 구현 객체 추가 및 이동 기능 구현 (객체 리스트 동적 관리/ 동물 및 공룡을 사용자가 마우스로 선택, 원하는 위치에 배치할 수 있는 기능 구현)오브젝트 컴포넌트에 물리엔진 적용gridHelper 추가하여 편집 모드 시각화 개선UI 크기 조정 상태관리에 데이터 추가Environment 컴포넌트에서 기존에 하드코딩된 동물 제거EditContext.jsx 파일에 데이터를 관리할 objects state생성 후 데이터를 objects state의 초기값으로 넣어줌데이터 구성crypto 객체를 통해 생성된 고유한 uuid동물인지 공룡인지 나타내는 typepositionrotation data 코드조각const data = [ { id: crypto.randomUUID(),..

Edit Mode (편집 모드) 구현 1. GUI 추가 : 사용자가 모드를 변경할 수 있도록 Canvas 위에 버튼 추가2. 상태 관리 :  EditMode를 관리하는 상태 관리 시스템 구축 (React Context API 활용)  상태 관리 (EditContext) 설정 context 폴더를 만들고 EditContext.jsx 파일 추가 EditContext.jsximport { createContext, useState } from "react";export const EditContext = createContext(); // createContext 함수를 사용, EditContext 생성export const EditProvider = ({ children }) => { const [isEd..

물리엔진 현실 세계의 물리 법칙들을 3D 공간에서 실현해 주는 엔진→ React Three Fiber(R3F)에서 Rapier라는 물리엔진을 사용할 수 있게 해주는 React3 Rapier 라이브러리 사용  @react-three/rapier 패키지 설치npm install @react-three/rapier  기본적인 물리 설정Suspense비동기로 로딩되는 컴포넌트들이 모두 로딩될 때까지 기다렸다가 렌더링Physics물리 법칙이 적용되는 공간을 정의RigidBody실제로 물체가 물리적으로 상호작용하도록 설정import { Suspense } from "react";import { Physics, RigidBody } from "@react-three/rapier";   ..

Animal.jsx (동물 오브젝트)import { useAnimations, useGLTF } from "@react-three/drei";import { SkeletonUtils } from "three-stdlib";import { useMemo, useEffect, useRef } from "react";export const Animal = ({ name, ...props }) => { const group = useRef(); const { scene, animations } = useGLTF(`/models/animals/${name}.glb`); const clone = useMemo(() => SkeletonUtils.clone(scene), [scene]); con..

3D 오브젝트로 동물원 구성  프로젝트 준비 모델 다운로드 및 폴더 정리프로젝트의 public/models 경로에 3D Object asset을 넣어줌 사용할 3D 오브젝트 카테고리animals (동물 모델)dinos (공룡 모델)map (환경 모델)프로젝트 구조 정리scr폴더에서 불필요한 asset폴더 삭제components 폴더 생성, 환경을 담당할 Environments.jsx 파일 생성 Environments.jsx 초기 코드import { OrbitControls } from "@react-three/drei";export const Environments = () => { return ( );};  3D 모델 불러오기 Animal..

Interaction (Event) in R3F  3D 인터랙티브 이벤트 처리하기 인터랙티브 이벤트 : 사용자의 이벤트를 수신하는 방법 R3F는 컴포넌트의 콜백함수를 통해서 3D 객체와 상호작용을 추가하여 인터랙티브한 웹 경험을 구현 인터렉션(Interaction)사용자가 3D 객체와 상호 작용하는 방식클릭드래그스크롤키보드 입력Events and Interation Events and Interaction - React Three FiberLet's make our meshes react to user input.r3f.docs.pmnd.rs  @react-spring/three 설치npm install three @react-spring/three @react-spring/three@9.7.5 Reac..

Camera 조작 3D 공간에서 카메라의 위치(position)와 시점(lookAt) 조절의 의미 : 사용자의 시각적 경험 결정  Leva를 활용한 카메라 조작 Leva 라이브러리의 useControls를 사용한 카메라 조작npm i leva  useControls를 이용해 카메라의 Z축 위치와 Y축 시점을 조절할 수 있는 슬라이더 생성import { useControls } from "leva";import { useThree } from "@react-three/fiber";const Elements = () => { const { camera } = useThree(); const dirLight = useRef(null); useHelper(dirLight, THREE.DirectionalL..

Light & Shadow React Three Fiber(R3F)에서 빛과 그림자는 3D 장면을 보다 현실감 있게 만드는 요소 빛이 없다면 아무것도 보이지 않으며, 그림자가 없다면 입체감이 부족하게 보일 수 있음현실 세계를 가상으로 모방하는 3D 그래픽에서는 빛과 그림자의 효과를 적절하게 조절하는 것이 필수적  빛(Light)ambientLight : 장면 전체를 균일하게 밝게 비춤pointLight : 특정 위치에서 전 방향으로 빛을 방출spotLight : 특정 위치에서 원뿔 형태로 빛을 쏨directionalLight : 태양광처럼 특정 방향에서 평행하게 빛을 쏨 ambientLight (전체적인 밝기 조절)  directionalLight (태양광과 같은 평행한 빛)  빛의 위치 조절positi..

Obj 3D + Transform Object 3D 모든 3D 객체의 부모 클래스 Scene, Mesh, Group, Camera 등 모든 주요 요소가 Object3D를 상속받음→ 자동으로 생성되는 Scene도 Object3D의 인스턴스position, rotation, scale 등의 변형(Tranform) 속성을 기본적으로 가짐Object3D를 상속받은 모든 객체는 Transform(변환)기능 사용 가능→ useThree 훅을 사용하면 scene을 가져와서 조작 가능Object3 three.js docs threejs.org   useThree 훅을 이용한 Scene 접근import { Canvas, useThree } from "@react-three/fiber";const Element = () ..