Three.js (4) 썸네일형 리스트형 Three.js 객체의 이동, 리사이즈, 회전 | position, scale, rotation 선행학습 이번 글에서는 객체의 변형을 구현하기 위한 핵심 코드 라인만 기재되어 있다. 객체 자체를 만들고 화면에 띄우는 과정은 아래 글을 통해 확인 가능하다. Three.js 반응형 canvas + 전체화면 만들기 Three.js 한 눈에 보는 Geometry 종류 CONTENTS 이번 글에서 다룰 내용은 다음과 같다. AxesHelper 켜기 Three.js 객체의 이동 position Three.js 객체의 크기 변형 scale Three.js 객체 회전 rotation AxesHelper 켜기 객체의 이동과 변형을 시작하기 전, 변화를 좀더 뚜렷하게 확인할 수 있도록 '축'선을 켜준다. // 축선 켜기 const axesHelper = new THREE.AxesHelper(3) // 괄호 안 숫자 .. Three.js 한 눈에 보는 Geometry 종류 선행학습 본 Three.js 시리즈는 Node.js에 기반한 코드를 다룹니다. mesh 객체를 화면에 나오게 하는 것 까지는 다음 글에서 참고해주세요. Three.js 반응형 canvas + 전체화면 만들기 Node.js로 Three.js 시작하기 CONTENTS 이번 글에서 다룰 내용은 Three.js 개발시에 활용 가능한 Geometry(도형)의 모양에 관한 것으로, 공식 문서에서 제시된 코드를 요약된 라이브러리 설명문서 형식으로 기술할 예정입니다. BoxGeometry 박스 PlaneGeometry 평면 CircleGeometry 원 ConeGeometry 원뿔 CylinderGeometry 실린더 RingGeometry 평면 링 TorusGeometry 도넛 - 토러스 TorusKnotGeomet.. Three.js 반응형 canvas + 전체화면 만들기 사전 학습 Node.js로 Three.js 시작하기 Node.js로 Three.js 시작하기 Three.js 학습을 시작하며, 처음에는 js 파일을 다운로드해서 쓰거나 cdn을 이용하여 간단한 기능을 구현해보았다. 하지만 node 모듈을 깔지 않고는 사용할 수 없는 기능들이 있었다. 그래서 결국 Node facet.tistory.com 지난 시간에 Node.js 기반 Three.js의 설치에 대해 알아보았다. 이번 글에서는 사전 작업을 바탕으로 three.js 코드가 올라갈 canvas를 html에 추가하고, 이 위에 three.js로 기본 도형인 박스 하나를 구현하며, 구현된 화면 비율이 인터넷 브라우저의 크기 변경과 상관 없이 유지될 수 있도록 canvas와 three.js코드에 반응형 설정을 위한 .. Node.js로 Three.js 시작하기 Three.js 학습을 시작하며, 처음에는 js 파일을 다운로드해서 쓰거나 cdn을 이용하여 간단한 기능을 구현해보았다. 하지만 node 모듈을 깔지 않고는 사용할 수 없는 기능들이 있었다. 그래서 결국 Node.js에 three dependancy를 추가해서 쓰는 방법으로 기본 세팅 방법이 귀결되었다. 개발용 서버로는 Vite 를 사용하고 있다. Node.js로 Three.js를 시작하는 방법을 두 가지로 나누어 설명하고자 한다. 첫 번째는 nodejs가 이미 깔려 있는 경우로, 첨부해둔 Starter 파일을 다운받아서 npm install로 한방에 세팅하는 방법, 두 번째는 학습을 위해 처음부터 한땀한땀 직접 설치해 나가는 방법이다. 코드 에디터는 Visual Studio Code(VSCode)를 사.. 이전 1 다음
