[직소퍼즐] 직소 퍼즐 만들기 (5) - drag 구현

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

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

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

 

드래그 구현 시작

 

1. three.js는 z축의 값을 raycaster()로 계산한다. 

 

ray casting이란: https://en.wikipedia.org/wiki/Ray_casting

Ray casting - Wikipedia

 

 

 

일단, 아래 코드가 빈 배열을 반환한다.

 

    const intersects = raycaster.intersectObjects(scene.children);

 

암튼 개삽질 끝에 마우스 감지는 끝났다...

 

다음은 이제 똑같은거 3개 정도 만들고 드래그해서 다른거 위에 올려놓는 테스트 해봐야겠다.

 

참고 문서

 

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

https://threejs.org/docs/#api/en/core/Raycaster

https://pcconsoleoraksil.tistory.com/163