안녕하세요. 멤버십에서 새벽까지 당직을 스고 집으로 돌아와 고양이랑 조금 놀다가 잠좀 잘까 했는데 고양이녀석 아프다고 낑낑대서 아침에 병원을 대려가기 위해 잠을 안자고 버티고 있는 1人입니다.. ㅠ_ㅠ
이번시간에는 예전부터 포스팅하려다가 미루고 미루고 미루다가 이제야 포스팅하게된.. -_-;; WPF 3D를 이용한 영화 검색엔진.... (뭔가 거창하네요)이라고 하기엔 너무나 허접한 내용을 소개하고자 합니다. 간단히 Naver Open API를 사용하여 입력한 키워드에 맞는 영화 포스터 이미지를 가져와서 3D화면에 출력하는 내용입니다. 아래는 구현 완료 동영상입니다.
동영상 캡쳐좀 잘해보려고 무압축으로 설정했더니.. 대략 2분짜리 동영상인데 900메가 가까이 커져버리더라구요.. 하는수 없이 다시 인코딩해서 용량 줄인다음 다시올렸는데.. 열악한 제 컴퓨터가 무압축 방식을 견디지 못했는지 중간에 뚝~~ 하고 끊기는 장면이 한번 보이네요-_-;; 실제로 돌려보시면 검색결과 가져오는 부분 이외에는 끊기지는 않습니다..^^;; (이부분은 너무 졸려서 해결하지 않은 채로 그냥 둿어요.. ㅈㅅ)
저번시간에는 구글에서 이미지 주워와서 하더니 이번에는 네이버에서 뒤적거려서 구한 이미지 요리조리 편집해서 사용했습니다. 혹시나 있을 수 있는 문제를 대비해 일단은 원래 제작자분이름을 적어놨는데... (사실은 허락을 받고싶지만.. 외국분이라... ㅠㅠ)
이번에도 역시 소스코드가 상당히 길어서 파일로 첨부했습니다.. (절대 설명하기가 귀찮아서 그러는게 아니랍니다!!!! )
위 내용을 구현하기 위해서는 아래와 같은 준비물이 필요합니다.
1. Naver Open API Key : Naver Developer Center에 가시면 Open API Key를 발급하는 코너가 있습니다.
2. 적절한 UI 이미지 : 저처럼 인터넷에서 주워서 사용하셔두 되고..
3. 3D Panel Mesh : 간단하게 이미지만 출력해주면 되기때문에 아래와 같이 간단한 사각형 Mesh를 만들어 사용했습니다.
4. 머리가 아파오는 수학 : 초등학교 수준같은데 어렵네요..................................................... ㅠ
자 그럼 준비가 되셨나요? 그럼 아래 Class Diagram을 보면서 구조에 대해서 살펴보도록 하겠습니다. 이미지가 줄어들어서 잘안보이시는분은 클릭하시면 원본사지으로 확인 하실 수 있습니다.
이번 예제는 위 그림과 같이 총 4부분으로 나뉘어져있습니다. 가장먼저 오른쪽 중앙의 DVDCase를 보겠습니다. 간단하게 포스터 위에 반투명한 DVD Case모양 Image를 덮여씌워서 출력되는 객체입니다. 그다음은 Panel3D인데요, 좀전에 말한 DVDCase객체가 Panel 3D에 붙게됩니다.
Panel3D는 위에서 보여드릴 간단한 2차원 사격형 Mesh로 구성되어 있으며, 마우스 이벤트등을 활용하기 위해 UIElement3D객체를 상속받아 구현했습니다. 그리고 생성자로 DVDCase객체를(꼭 DVD Case가 아니더라도 상관은 없습니다.) 넣으면 DVDCase를 Visual로 사용하는 VisualBrush로 생성한뒤 DiffuseMaterial를 생성하여 Material로 사용합니다. 코드에서 보시면 아시겠지만, 그냥 Material과 BackMaterial에 모두 VisualBrush를 적용한 이유는, 객체가 원을 그리며 회전을 하게 되는데 객체가 뒤로 갔을경우에도 확인 가능하도록 설정한것입니다.
계속해서 PanelList입니다. PanelList는 ModelVisual3D을 상속받아 구현되었으며, base.Children 속성에 여러개의 Pannel이 추가 되게 됩니다. PanelList에서는 PanelList에서 새로 정의된 Children Property를 통해 UIElement를 입력받는데, Collection에 객체가 추가/제거 될때 마다 적절한 크기&위치를 지정하여 객체들이 원을 이루어 분포될 수 있도록 도와주는 역할을 합니다.
Panel 3D객체들의 회전에 대한 문제는, Panel3D객체가 base.Children속성에 추가되어있기때문에, 간단하게 PanelList에 RotationTransform을 적용하여 간단하게 해결할 수 있었습니다. MainWindow부분에서는 단순한 UI구성과 OpenAPI를 사용한 결과 수집후 Panel List의 Children을 변경하는 기능을담당합니다.
★다운받아 실행해봤는데 에러가 난다고 하시는 분은 Open API키 값을 지정 해주었는 확인 해보시기 바랍니다.
(제키값은 지우고 ############와같이 적어놨기때문에 본인의 OpenAPI로 작성하셔야합니다.)
자그럼 오늘은 여기까지로 하구요, 잠이 쓰나미처럼 몰려오고 있는터라 말이 너무 횡설수설한감이 없진않지만.. 질문이나 다른 건의사항이나 기타 등등은 이메일이나 리플로 남겨주세요~~ 그럼 내일 뵙겠습니다!!
아래는 전체 프로젝트 소스코드입니다.
3DMovieSearch.zip
