Tech 개발 블로그

최근 구글의 크롬, 마이크로소프트 엣지, 네이버 웨일 등은 한국에서 사용되는 브라우저이다. 하지만 마이크로소프트 인터넷익스플로러(Internet Explorer)를 사용하는 유저가 존재한다.... 인터넷익스플로러는 완전히 이제.. 더이상 서비스를 하지 않는 브라우저이기 때문에 많이 사용되는 HTML5나 CSS3 등에서 일부를 지원하지 않는다. (ActiveX가 이제 없어진다니 IE도 없어지는 꿈을 조금 꿔본다...) 최신 문법 자체도 지원되지 않는 것은 매우 당연! 자바스크립트는 매일매일 새롭게 발전하는데 IE를 한국 유저들이 사용하고 있다는 이유로.. ES6 이하의 자바스크립트로만 개발하게 되면.. 좀 더 공부할 수 있는 가능성이 줄어들 수 있다. 이런 슬픔(?)을 방지하기 위해서 최신의 자바스크립트 ..

이미지를 나선형의 형태로 배치를 하다가 생긴 문제가 있었는데 바로 이미지를 나선형으로 배치하다보면 반대편의 이미지가 반대로 보여지는 문제가생겼다. rotation.y를 해도... 옆의 이미지들이 카메라를 바라보게 하기 어려웠는데 열심히.. 갓글링을 하다보니..! Sprite라는 객체를 찾게 되었다! 일단 공식문서는 아래와같다! https://threejs.org/docs/index.html#api/en/objects/Sprite three.js docs threejs.org Sprite : A sprite is a plane that always faces towards the camera, generally with a partially transparent texture applied. 라는 정의로 ..

한 영역 안에서 만들어진 물체(Mesh)를 가만히 있는게 아니라 마우스를 가져다 댔을 떄, 빙글빙글 돌 수 있도록 만들어보는 연습을 해보았다. 마우스의 포인터를 가지고 현재 가리키고 있는 영역이나 물체를 알려줄 수 있는 Raycaster 클래스를 사용했다. 먼저 아래는 Three.js의 공식 문서에서 얘기하는 Raycaster https://threejs.org/docs/index.html#api/en/core/Raycaster three.js docs threejs.org Raycaster는 raycasting을 기반으로 만들어진 클래스다. Raycasting은 다른 여러 물체들 사이에서 마우스로 하나의 물체를 선택하는데 사용된다. (그러므로 무궁무진하게 많이 사용될수 있다!) 광선의 위치(마우스 포인..

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..

리액트를 다루다 보면, 구글의 oauth를 이용해서 로그인을 할 필요가 있다. 리액트에서 구글 oauth를 이용하는 제일 간단한 방법은, npm 라이브러리에 있는 react-google-login 라이브러리를 이용하면 된다. https://www.npmjs.com/package/react-google-login react-google-login A Google Login Component for React www.npmjs.com 보통의 경우 기본 scope인 id,profile,email 정도만 필요하여 문제가 되지 않는다. 하지만 내가 진행하던 과제에서는 다양한 권한이 필요하여 해당 라이브러리를 이용하여 scope 설정하여 액세스 토큰을 받아왔다. ( 로그인 )} responseType="code" ..