[직소퍼즐] 직소 퍼즐 만들기 (4) - three.js 사용

- canvas를 사용할거고, 거기서 drag n drop 기능을 이용해서 네모 조각을 움직이는 기능을 구현한다

- 특정한 조각의 배열이 순서를 이루면 정답으로 인정한다

- 네모 조각을 진짜 직소 퍼즐 조각처럼 만든다

 

z Index를 임시로 구현하지 않고 그냥 canvas를 3d로 사용하려고 한다.

이렇게 하려면 canvas getContext를 webgl로 사용해야 하고, 그 이후에는 모양 하나 만들려면 꽤나 귀찮은 작업이 들어가기 때문에, three.js를 사용하려고 한다.

 

https://threejs.org/

Three.js – JavaScript 3D Library

 

정작 three.js 사용하려고 보니 고려해야할게 한두가지가 아니다. 일단 카메라와 빛부터...

 

알게된 사실

1. camera 객체의 z값은 perspectiveCamera에서 params로 넣은 far 값을 넘지 못한다. 생각해보니 당연하네. 

 

아이 귀찮아..

 

https://webdoli.tistory.com/60?category=959968 

three.js 18편 사용자 반응의 꽃 "raycast()"

작업중에 이런 블로그를 발견해서 다음부터 이 블로그를 참고해야겠다.