티스토리 뷰

Web/three.js

three.js를 위한 HTML 스켈레톤 생성

yucalip 2017. 6. 22. 17:02

three.js를 이용해 웹에서 인터랙티브한 3d 장면을 구현하기 위해서 HTML 파일을 기본 세팅하는 것을 알아보자.

<Three.js로 3D 그래픽 만들기 2/e> 책에 나온 내용을 참고하였다.

책은 외국 책을 번역한 것이라 html 랭귀지를 설정하는 것이나 인코딩 설정하는 부분이 없다.

이 부분을 작성하지 않으면 title 부분을 비롯해서 한글 부분이 깨져서 나오니, 콘텐츠에 한글이 들어간다면 꼭 적어주어야 한다.





<!DOCTYPE HTML>
<html lang="ko">
<head>
		<meta charset="UTF-8">
		<title>Three.js를 위한 HTML 기본 스켈레톤</title>
		<script src="../learning-threejs/libs/three.js"></script>
		<!-- 전체 페이지를 사용하고, 스크롤바가 생기지 않기 위한 설정 -->
		<style>
			body{
				margin: 0;
				overflow: hidden;
			}
		</style>
	</head>
	<body>
		<!-- 렌더링 된 결과물이 표시될 div-->
		<div id="WebGL-output"></div>

		<script>
			function init() {
				//이 안에 모든 three.js 코드를 집어넣는다.
			}

			window.onload = init;
			// html 문서의 로딩이 끝났을 때 이 init 함수를 실행한다.
		</script>
	</body>
</html>


이제 전역 변수 설정을 제외한 모든 three.js 코드는 function init() { } 안에 적어주면 된다.

저작자표시 비영리 변경금지
공유하기 링크
댓글