Tech 개발 블로그

이미지를 나선형의 형태로 배치를 하다가 생긴 문제가 있었는데 바로 이미지를 나선형으로 배치하다보면 반대편의 이미지가 반대로 보여지는 문제가생겼다. 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..