Tech 개발 블로그

Three.js를 활용해서 여러가지 시도를 하는 중에 glb파일을 받아서 렌더링을 하는 구간이있었다. glb파일은 gltf와 마찬가지로 GLTFLoader를 사용해서 렌더링을 하면된다. glb파일은 바이너리 파일로 안에 모델링 + 텍스쳐 + 모션 등의 정보를 모두 담고 있다. 받았던 파일은 4메가 정도 될정도로 꽤 큰 사이즈였다. (기본 사이즈 자체도 커서 파일 사이즈도 컸던거같음) 일단 로드를 할 때는 아래처럼 포지션 세팅하고 하는건 커스터마이징이고.. GLTFLoader를 사용해서 load를 하면 화면에 렌더링이 된다! 이때는 물체와 텍스쳐만 렌더링이 되고 모션은 움직이지 않는다. const gltfLoader = new GLTFLoader(); const url = 'obj/LittlestTokyo..

React360 다음으로 3D렌더링을 좀더 복잡하고 정교하게 구현하기 위한 WebGL 라이브러리 중 가장 대표적인 Three.js Three.js는 자바스크립트 3D 라이브러리로 WebGL을 기반으로 하고 있다. 물론 WebGL을 가지고 3D를 만들 수 있지만.. Canvas나 SVG처럼 단순한 형식으로만 제공되기 때문에 코드량이 많아진다고 한다! 그래서 이걸 좀더 쉽게 도와주는 라이브러리가 바로 Three.js 다. (물론 쉽지는 않은거 같...) 아래는 Three.js 의 공식 홈페이지! https://threejs.org/ three.js – JavaScript 3D library threejs.org 한글문서로 매우 친절하게 설명을 해주는 페이지가 있다!(감사합니다..) https://threej..

새로운 프로젝트를 위헤서 웹에서 3D렌더링을 할 수 있는 방안을 찾고 있는 중에 페이스북에서 소개한 React 360에 알게 되었고 좀더 심플한 프로젝트를 React로 할 수 있게 되어서 스터디겸 소개를 하려고한다. 일단 공식문서는 아래에 링크를 참조할 수 있다 https://facebook.github.io/react-360/ React 360 · Create amazing 360 experiences Create amazing 360 experiences facebook.github.io  React360은 Cross Platform을지원해서 데스크탑, 모바일, VR로 제공가능하다. React360을 돌리기 위해서는 먼저 Node.js가 필요하다(React 프로젝트를 진행할 때도 필요) React3..