GitHub - Indigochi1d/IntroduceWith3Dweb: R3F로 구현한 Dancing Scroll Introduce 3D WebR3F로 구현한 Dancing Scroll Introduce 3D Web. Contribute to Indigochi1d/IntroduceWith3Dweb development by creating an account on GitHub.github.com 🔎서론위의 프로젝트를 R3F로 구현하면서 사용했던 Hooks들을 자세히 다뤄보려고 한다.다뤄볼 Hooks들은 아래와 같다.useThreeuseFrameuseGLTFuseAnimationsuseProgressuseScroll1️⃣useThree useThree | React Three FiberReact Thr..

🔍ThreeJs에서 R3F로 마이그레이션하기 [ThreeJS] ThreeJS 기본 구성 요소ThreeJS란?ThreeJS란 WebGL(Web Graphic's Library)을 쉽게 사용할 수 있도록 해주는 JS기반 라이브러리이다. Graphic들은 html canvas 위에 그려지는데 이를 개발자가 좀 더 편하게 다루기 위해서 사용된다.ThreeJSindigochi1d.tistory.com전에 포스팅했던 ThreeJS의 기본 구성요소에는 4가지가 있었다.RendererSceneCameraMesh아래에서는 기본 구성요소의 선언 : ThreeJS vs R3F 에 대해서 코드로 작성하며 설명하도록 하겠다.1️⃣RendererThreeJSconst renderer = new THREE.WebGLRendere..

조명전 포스팅에서는 Material 클래스를 선언할때 조명 설정없이도 3D객체를 나타낼 수 있는 BasicMaterial로 선언하였다.하지만 주로 쓰이는 클래스는 라는 클래스이다.이 BasicMaterial을 제외한 나머지 Material클래스들은 조명이 없으면 시각화되지 않는다.이를 해결하기 위해 우리는 조명이라고 불리는 'Light'를 설정해주어야한다.Light는 아래와 같이 DirectionalLight 클래스로 선언하고 인자로 빛의 색, 광원의 밝기를 받는다.const directionalLight = new THREE.DirectionalLight("white", 10);directionalLight.castShadow = true; //빛이 그림자를 드리울 수 있게함directionalLigh..

ThreeJS란?ThreeJS란 WebGL(Web Graphic's Library)을 쉽게 사용할 수 있도록 해주는 JS기반 라이브러리이다. Graphic들은 html canvas 위에 그려지는데 이를 개발자가 좀 더 편하게 다루기 위해서 사용된다.ThreeJS의  기본 구성 요소기본 구성 요소에는 4가지(Renderer, Scene, Camera, Mesh)가 있다. 영화로 예를 들어 설명하자면 Renderer는 영화를 송출하는 기기, Scene은 영화의 배경 혹은 장면, Camera는 영화를 찍고 있는 카메라(시점), Mesh는 영화의 등장인물이나 주위 물체를 의미한다. 1. Rendererconst renderer = new THREE.WebGLRenderer();renderer.setSize(wi..

환경세팅하는 법 프로젝트 디렉토리를 생성하는 절차는 생략하고 진행한다. Vite를 사용하여 프로젝트를 생성한다. npm create vite@latest project_name -- --template vanilla Vite가 지원하는 템플릿은 이러한 것들이 있다. 프로젝트 생성 후 그 디렉토리 안에서 다음 명령어를 실행해 Threejs 라이브러리를 설치해준다. 설치방법은 다음과 같다. npm i three 방금 전 명령어가 문제없이 실행되었다면 프로젝트 디렉토리 내부에 package.json 안에 dependencies에 "three" 라이브러리가 추가된 모습을 볼 수 있다. npm run dev 프로젝트를 생성 후 위의 명령어를 입력하면 서버를 실행시킬 수 있다. 이렇게 ThreeJs 세팅과 실행을 ..