JavaScript/WebGL(Three.js) (5) 썸네일형 리스트형 OrbitControls OrbitControls Orbit 이라는 단어는 공전한다 라는 뜻을 가지고 있습니다. 3D 모델은 물론 rotation 기능을 통해 회전시키며 확인할 수 있지만 단순히 화면에 출력하는 것만으로는 사용자가 원하는 다양한 각도에서 모델을 확인하기 어렵습니다. 이를 위해 Three.js에서는 OrbitControls라는 모듈을 제공해 마우스를 통해 카메라를 자유롭게 조작할 수 있는 기능을 제공합니다. 정확히 말하자면 Orbit 이라는 단어와 뜻처럼 모델이 자전 하는 것이 아니라 모델을 중심으로 카메라가 공전(Orbit)하면서 움직이는 방식입니다. 사용자 입장에서는 모델을 둘러보는 것처럼 느껴지지만 실제로는 카메라의 위치와 방향을 계속 조작하는 것이라고 볼 수 있습니다. OrbitControls의 기능O.. glTF 포맷 & GLTFLoader glTF 포맷 glTF는 3차원 장면과 모델을 표현하는 파일의 포맷입니다(.gltf) 3D 모델을 생성하는 방법, 툴, 확장자는 여러가지 이지만, 웹에서 3D 모델을 동작하기 위해선 gltf, glb와 같은 확장자 포맷이 필요합니다.https://dkkim2318.tistory.com/185 3D 객체 렌더링이번 포스트에서는 Three.js를 통해 3D 모델을 생성해 렌더링 해보는 예제를 수행하겠습니다. Three.js는 전용 IDE나 에티터 툴이 없기 때문에 웹상에 에디터 프로그램이나 vscode 등등 어떤 도구를 가dkkim2318.tistory.com실제로 이전 포스트 내용처럼 Three.js로 3D 모델을 직접 생성하고 렌더링할 수 있지만, 실제 현업에서는 이러한 방식보다 3D 모델링 툴과 전문.. 3D 객체 렌더링 이번 포스트에서는 Three.js를 통해 3D 모델을 생성해 렌더링 해보는 예제를 수행하겠습니다. Three.js는 전용 IDE나 에티터 툴이 없기 때문에 웹상에 에디터 프로그램이나 vscode 등등 어떤 도구를 가지고 작업을 해도 상관없습니다. Three.js를 통한 큐브 렌더링1. Three.js 사용 준비 Three.js는 자바스클비트 라이브러리입니다. 라이브러리를 활용할 수 있는 어러 방법이 있지만 이번 예제에서는 제일 간단히 HTML에 CDN으로 Three.js를 임포트 해주곘습니다.여기서 주의해야할 점은 script 태그의 type 입니다. 웹 개발에서 script 태그는 보통 타입을 명시하지 않거나, js를 지정해 주는데 해당 예제는 Three.js의 module을 import 하고 .. Three.js의 기본 요소 Three.js 설치 Three.js를 알아보기 앞서, 설치 방법을 알아 보겠습니다. Three.js는 npm을 통해 설치가 가능합니다, npm install --save three위와 같은 명령어를 통해 설치가 가능하며 상세한 방법은 Three.js의 공식문서를 참고 해주시기 바랍니다.https://threejs.org/docs/index.html#manual/en/introduction/Installation three.js docs threejs.org또한 레퍼런스를 참고하여 설치하는 것도 가능합니다.https://threejs.org/ Three.js – JavaScript 3D Library threejs.org 해당 사이트는 Three.js의 레퍼런스를 공휴하는 사이트인데 해당 사이트에서 파일.. WebGL 과 Three.js WebGL 일반적으로 웹은 텍스트와 정적인 디자인 요소의 조합으로 이루어져있습니다. 그러나 필요에 따라 화면 속 물건을 둘러보거나 입체적으로 무언가를 표혀하기 위해 3D 모델이나 인터렉티브한 동작을 추가하기 위해선 정체 모를 모듈 프로그램이나, 동영상으로 대체하는 경우가 빈번했습니다. WebGL은 이러한 특정 3D 모델이나 인터렉티브한 동작을 별도의 설치없이 구현하기 위해 JS로 설계된 웹 브라우저용 3D 엔진입니다. Three.js WebGL의 장단점은 여러가지가 있지만 단점 중 가장 큰 부분은 학습 난이도입니다. 코딩에 필요한 지식이 필요함에 앞서 그래픽에 대한 이해가 있어야하며 3D 모델과 제어에 활용되는 요소에 대한 이해가 있어야 합니다. 또한 WebGl은 하드웨어와 아주 가깝게 맞닿아 있는 L.. 이전 1 다음
