Threejs

🕹️ TransformControls해당 컴포넌트는 mode의 속성을 통해 오브젝트의 편집 모드를 변경할 수 있다. ∙ translate: 오브젝트의 위치 좌표값을 변경∙ rotate: 오브젝트의 회전값을 변경∙ scale: 오브젝트의 규모 변경 따라서 버튼을 생성하고, 해당 버튼을 누를 때 버튼에 적용된 값으로 상태값을 변경하여 컨트롤러의 편집 모드를 설정해보겠다. 이전 게시글에서 mode라는 useState()를 생성하여 "translate" 값을 넣었다. 해당 상태를 만들기 위해 버튼을 만들어보자 📁 Editor / 📄 TransformControlButtons.tsximport { FontAwesomeIcon } from "@fortawesome/react-fontawesome";import..

이전 게시글에서 3D 공간인 Scene을 만들었다. 이제 해당 공간에 박스를 생성해보자. 우선 3D 객체의 구성을 알아보자.3D 객체는 다음과 같이 이루어져있다. 이하, 3D 객체를 모델로 표현하겠다. 🍕 Model∙ 📦 MeshMesh란, 객체를 생성하기 위해서 여러 폴리곤(다각형)의 집합을 이루고 있다.점들이 무수히 모여 선이 되고, 그 선이 모여 폴리곤을 이루고, 해당 폴리곤들이 모여 Mesh라는 객체를 이룬다. ∙ 🌏 Geometry공간의 속성과 관련한 수학 값들이다. ∙ 👕 Material해당 물질을 이루는 재료를 나타낸다.   이 세 가지가 있으면 모델을 표현할 수 있다.  그럼 이제 모델을 만들어보자. 📦 Box박스를 불러오기 위해 📄 BoxLoader.tsx를 생성해주었다. 나는..

참고 사이트∙ seongminn님의 벨로그  현재 작성자는 그래픽 기반의 솔루션 회사에 재직중입니다.threejs에 대해 공부중이라 완벽한 내용은 아니게 될지는 모르겠으나, 잘못된 내용이 기재되어 있을 경우 따끔한 피드백 주시면 겸허히 받아들이고 수정하겠습니다. 📦 three.jsthree.js란, 웹페이지에 3D 객체를 쉽게 렌더링 할 수 있도록 도와주는 3D 라이브러리이다.WebGL 기술을 기반으로 렌더링과 카메라, 조명 등의 3D 프로그래밍 기술을 간단하게 사용할 수 있도록 한다. https://threejs.org/ Three.js – JavaScript 3D Library threejs.org 🖋️ WebGL인터넷 브라우저 환경에서 OpenGL을 플러그인 도움 없이 공식적으로 사용할 수 있도..