three.js를 이용한 3D렌더링 페이지 제작

정보보안과 직접적으로 관련된 이야기는 아니지만 ,이번엔 일종의 번외편으로써 웹페이지에 3D렌더링을 한 과정에 대해서 설명해보려고 합니다.
사실 이 웹페이지를 제작하게 된 특별한 이유가 있다기보다는 그냥 재미삼아 호기심에 한번 만들어본 것이기 때문에 깊게 파고들진 않으려고 합니다.

3D 웹 페이지 링크
깃허브 페이지 링크


목차

  1. three.js
  2. turbosquid.com
  3. 웹페이지 설명

1. three.js

three.js는 자바스크립트로 작성된 3D 라이브러리 입니다. 웹페이지에서 3D를 렌더링할 수 있으며, example 폴더에 예제가 많이 있어서 예제 코드를 참고하면서 만들기 좋습니다.

three.js 예제 중 하나.

http://infosecreload.today/3d/just_fun/index.html

위의 링크 클릭해서 들어가시면 제가 업로드한 three.js의 예제 중 하나를 볼 수 있습니다.


2. turbosquid.com

이 사이트에서 3D 오브젝트들을 다운받을 수 있습니다. 유료도 있고 일부 무료도 있으니 다운받으셔서 테스트하기에 좋습니다.


3. 웹페이지 설명

위의 three.js 라이브러리의 예제를 그대로 쓰면 한 페이지에 하나의 오브젝트만 보이게 되는데, 이런 오브젝트를 한 페이지에 여러개 보여줄수는 없을까 고민하다가 iframe 태그를 이용해 보여주는 방식을 택했습니다. 사실상 iframe 태그를 사용하는 것이 보안상 좋지 않을 수는 있겠지만, 개인 테스트용 페이지에서까지 따질 필요는 없다고 생각해서 다른 대안을 알아보진 않았습니다.

깃허브 페이지에 들어가셔서 코드를 보시면 아시겠지만, 예제 코드에서 오브젝트와 텍스처 경로와 마우스 이벤트에 반응하는 속도 정도만을 수정했습니다.

댓글 남기기