[Three.js] Sprite

이미지를 나선형의 형태로 배치를 하다가 생긴 문제가 있었는데 바로 이미지를 나선형으로 배치하다보면

 

반대편의 이미지가 반대로 보여지는 문제가생겼다. rotation.y를 해도... 옆의 이미지들이 카메라를 바라보게 하기 어려웠는데

 

열심히.. 갓글링을 하다보니..! Sprite라는 객체를 찾게 되었다!

 

일단 공식문서는 아래와같다!

https://threejs.org/docs/index.html#api/en/objects/Sprite

three.js docs

 

Sprite 

: A sprite is a plane that always faces towards the camera, generally with a partially transparent texture applied.

 

라는 정의로 되어있는데 결국 plane 타입의 물체인데 이 물체는 언제나 카메라를 향해서 바라본다.

 

Sprite는 일단 shadow를 가질수가 없다. (즉, castShadow 가 true여도 별 소용이 없다!)

 

사용하는 방법은

const loader = new TextureLoader();
const map = loader.load('img/forestella.jpg');

const material = new SpriteMaterial({ map: map, color: 0xffffff, opacity: 0 });
const sprite = new Sprite(material);
//sprite.scale.set(posterWidth, posterHeight, 1);

scene.add(sprite);

로 하면 된다,

 

재질은 똑같이 이미지면 텍스쳐 로더를 사용하면된다.

그리고 Mesh가 아닌 Sprite로 생성해서 이를 scene에 넣으면 된다.

 

그러면 아래와 같이 이미지들이 카메라를 마주보고 이미지가 나타나게 된다!! (feat. 포레스텔라.... 포레스텔라는 사랑입니다..)

 

 

좀더 잘 정리되면 깃헙에 한번 업로드를 해봐야할것같다!