3차원 웹, 창공을 누비는 카메라! - 25번째 시간

three.js 버전이 변경되어 소스가 일부 수정되었습니다. ( 2020. 4. 12 )
본문과 일부 소스가 상이할 수 있으며 작동 소스는 아래에서 확인하실 수 있습니다.
http://dreamplan7.cafe24.com/canvas2/three013.html

 

사람이 새처럼 하늘을 날아다닐 수 있다면 얼마나 좋을까요?

어디든지 순식간에 휙 날아갈 수 있게 말이죠.

​

위험도 없고 염려없이 하늘을 날 수 있다면 마치 천사와 같은 삶이 아닐지요.

성서에서 말하는 천국을 가게 되는 사람들은 그 곳에서 그런 축복을 누릴 수 있을지도 모릅니다 :)

​

지난 시간에는 카메라 제어에 대해서 다루어 보았었는데요.

원클릭으로 원하는 지점으로 한번에 휙 가는 것은 편리하지만,

난데없이 갑자기 움직여서 어디에서 어디로 가는지 도통 알 수가 없을 때가 있습니다.

​

그래서 움직이는 과정을 스르륵 보여주면서 이동하면 어떨지요?

마치 카메라가 새처럼 하늘을 날아가듯이 말이죠 :)

​

관련 기술을 찾아보다가 어부지리로 연속으로 이동하는 기술까지 건져냈습니다.

영상 보실까요?

​

https://youtu.be/1MgA95cCGwI

위의 3개 버튼은 카메라를 이동하는 목적은 지난번과 똑같지만

움직이는 과정을 보여주어 이동지점이 대강 어디인지 기억할 수 있게 해줍니다.

​

제일 아래 버튼은 말씀드린 바와 같이 어부지리로 건져낸 기능인데요.

이른바 연속 재생 시나리오를 짜고, '시작'명령을 내리면 자기가 알아서 무한 반복하는 기능입니다. 물론 반복조차도 선택적이어서 1번만 재생할 수도 있지요 :)

​

이를 위해 tweenjs.js 라는 자바스크립트 친구가 필요합니다.

tweenjs.js 는 아래 사이트에서 제공하는 무료 라이브러리인데요.

​

https://www.createjs.com/tweenjs

CreateJS | A suite of JavaScript libraries and tools designed for working with HTML5

자바스크립트로 만든 웹에서 사용하는 기술로

보통은 HTML5 요소들을 자유롭고 부드럽게 제어하는 기술인데,

3차원 웹에서도 이 기술을 사용할 수 있습니다.

​

사이트에 보면 매우 많은 파일을 다운받게 되어 있지만,

정작 필요한 것은 tweenjs.js 파일 1개만 있으면 됩니다.

아래 파일을 압축해 놓았으니 다운받아 서버의 js 폴더에 넣어 주시면 됩니다 :)

tweenjs.zip

0.03MB

자, 이제 소스를 약간 수정해볼까요?

​

우선 서버에서 three012.html 를 three013.html 파일로

js/three012.js 파일을 js/three013.js 파일로 복사해주신 다음,

three013.html 소스에서 아래 부분을

<script src="js/three012.js"></script>

이렇게 바꿔 주세요. 부드럽게 움직이는 tweenjs.js 라이브러리도 함께 포함되었습니다.

<script src="js/tweenjs.js"></script>
<script src="js/three013.js"></script>

버튼 크기가 너무 작다는 제보가 있었습니다.

그래서 버튼 크기를 키워보았는데요.

그로 인해 버튼 위치도 약간씩 바뀌게 되었습니다.

스타일 태그에서 .button 과 #button1 ~ 3 의 css 속성을 이렇게 바꾸어 줍니다.

바꾸어 주는 김에 버튼 4번의 css 속성까지 정해주였습니다.

.button
{
	position:fixed;
	width:15%;
	height:50px;
	border:1px solid white;
	cursor:pointer;
	background-color:rgba(101,77,165,0.7);
	padding:10px;
	text-align:center;
	color:white;
	font-size:15pt;
}
#button1 { 
	left: 5px;
	top: 5px;
}
#button2 { 
	left: 5px;
	top: 85px;
}
#button3 {
	left: 5px;
	top: 165px;
}
#button4 {
	left: 5px;
	top: 245px;
}

그리고 버튼3번 소스의 아랫 부분에

<div id=button3 class=button onclick="moveCam(-22, 9, -119, 0, 0, 0)">멀리보기</div>

버튼 4번을 추가합니다. 이 버튼은 둘러보기용으로 사용할 겁니다.

aroundCam() 함수를 호출하는데 앞으로 만들어줄 기능이지요 :)

<div id=button4 class=button onclick="aroundCam()">둘러보기</div>

그 다음으로는 three013.js 파일을 열어,

moveCam 함수를 아래 내용으로 바꿔 치기합니다.

function moveCam(eye_x, eye_y, eye_z, target_x, target_y, target_z)
{
	createjs.Tween.removeAllTweens();
	createjs.Tween.get(camera.position)
		.to({
			x: eye_x, 
			y: eye_y, 
			z: eye_z
		}, 900, 
		createjs.Ease.sineInOut);

	createjs.Tween.get(controls.target)
		.to({
			x: target_x, 
			y: target_y, 
			z: target_z
		}, 900, 
		createjs.Ease.sineInOut);
}

createjs 는 createjs.js 파일을 포함시키기만 하면 바로 생겨나는 라이브러리 덩어리입니다.

이미 정의가 되어 있기 때문에 바로 사용할 수 있는데요.

아래 명령은 이동중이던 자동화 기능들을 모두 지우는 기능이지요.

createjs.Tween.removeAllTweens();

그리고 다음 명령이 바로, 카메라를 부드럽게 이동하는 명령이지요.

createjs.Tween.get(camera.position)
		.to({
			x: eye_x, 
			y: eye_y, 
			z: eye_z
		}, 900, 
		createjs.Ease.sineInOut);

createjs.Tween.get(camera.position) 으로 먼저 대상을 정합니다.

그리고 .to({ x:대상위치, y:대상위치 ... } 명령으로 대상의 해당 요소의 하위 요소에 대한 이동대상을 정하는 것이지요.

x는 camera.position.x 가 되고, y는 camera.position.y, z는 camera.position.z가 되는 것이지요. 만약 x좌표만 이동할라치면, y, z 는 빼도 됩니다

​

이어서 주어지는 900이라는 수치는 이동하는데 소요되는 시간을 주는 겁니다.

그래야 카메라가 서서히 이동할지 빨리 이동할지 알 수가 있는 것이지요.

900은 0.9초인데요. 이 값을 줄이면 매우 빠르게, 이 값을 늘리면 매우 천천히 이동합니다

​

마지막 주어지는 createjs.Ease.sineInOut 은 무엇일까요?

이는 이동 효과를 의미합니다.

​

출발할때와 도착할때 감속효과를 줄 수 있는데요.

우선 파라미터를 생략했을때 주어지는 기본효과는 createjs.Ease.linear 입니다.

이 효과는 그냥 직선으로 균등한 속도로 움직이다가 마지막에 급정거하는 방법이라

가장 단순한 움직임을 보이는데요. 속도 빠른 가상공간을 구현한다면 적당할 것 같습니다.

​

createjs.Ease.sineInOut 는 삼각함수 싸인파를 이용해서 부드러운 움직임을 구현합니다.

출발할 때 저속에서 고속으로 가속을, 도착할 때 고속에서 저속으로 감속을 하는 움직임을 구현하는데요.

sineinOut 말고도 sineOut, sineIn 효과도 있습니다.

​

만일 createjs.Ease.sineOut 효과를 사용할 경우

출발할 때는 급출발했다가 도착할 때는 서서히 감속을,

createjs.Ease.sineIn 효과를 사용할 경우

출발할 때는 서서히 출발하다 도착할 때 급제동을 합니다.

​

싸인파 외에도 아주 다양한 효과가 있습니다.

통통거리며 도착점에서 튀는 효과도 있으니, 아래 효과를 다양하게 실습해 보신다면 좋을 것도 같습니다 :)

​

Ease.linear

Ease.quadIn

Ease.quadOut

Ease.quadInOut

Ease.cubicIn

Ease.cubicOut

Ease.cubicInOut

Ease.quartIn

Ease.quartOut

Ease.quartInOut

Ease.quintIn

Ease.quintOut

Ease.quintInOut

Ease.sineIn

Ease.sineOut

Ease.sineInOut

Ease.backIn

Ease.backOut

Ease.backInOut

Ease.elasticIn

Ease.elasticOut

Ease.elasticInOut

​

카메라의 이동과 어울려서 카메라의 바라볼 방향 지점도 함께 바뀌어야 할텐데요.

그 다음에 나오는 소스가 해당 부분을 담당합니다.

controls.target 가 이동대상인 것을 제외하면 앞과 같은 원리이지요.

	createjs.Tween.get(controls.target)
		.to({
			x: target_x, 
			y: target_y, 
			z: target_z
		}, 900, 
		createjs.Ease.sineInOut);

이 것으로 1~3번째 버튼은 끝입니다.

클릭하면 부드럽게 이동하는 것을 볼 수 있지요.

​

4번째 버튼, 클릭하면 자기 혼자 여기저기 왔다 갔다 하는 기능인데요.

매우 어려워 보이시나요? 앞의 과정을 이해하신 다면 매우 쉽니다 :)

우선 three013.js 에 다음 함수를 추가해 주세요.

위치는 상관없으나 moveCam() 함수의 정의가 끝난 다음이 좋을듯 하군요.

function aroundCam()
{
	createjs.Tween.removeAllTweens();
	createjs.Tween.get(camera.position, {loop: true})
		.to({
			x: 10, y: 15, z: 12
		}, 5000, 
		createjs.Ease.sineInOut)

		.wait(500)

		.to({
			x: -100, y: 17, z: 42
		}, 2000, 
		createjs.Ease.quartIn)

		.wait(500)

		.to({
			x: 126, y: 23, z: 93
		}, 6000, 
		createjs.Ease.bounceOut)

		.wait(500)

		.to({
			x: 0, y: 38, z: 227
		}, 2000,				
		createjs.Ease.cubicIn)

		.wait(500)

		.to({
			x: 36, y: 12, z: -32
		}, 15000,				
		createjs.Ease.elasticIn)

		.wait(500)

		.to({
			x: 36, y: 115, z: -2
		}, 3000,				
		createjs.Ease.backOut)

		.wait(500)

		.to({
			x: 36, y: 10, z: -2
		}, 12000,				
		createjs.Ease.bounceInOut)

		.wait(500)

		.to({
			x: 10, y: 11, z: 12
		}, 5000,				
		createjs.Ease.elasticIn)

		.wait(1500);
}

앞에서 버튼 클릭하면 이동하던 명령어들이 모두 점( . )기호로 연결된 것을 볼 수 있는데요.

만일 아래와 같은 시나리오라면,

.to({
	x: 10, y: 15, z: 12
}, 5000, 
createjs.Ease.sineInOut)

.wait(500)

.to({
	x: -100, y: 17, z: 42
}, 2000, 
createjs.Ease.quartIn)
        :

10. 15. 12 좌표로 5초동안 이동하고, ( to )

0.5초 쉬었다가, ( wait )

다시 -100. 17. 42 위치로 이동하는 겁니다.

이동 시나리오를 모두 이렇게 적어주는 것이지요.

효과는 앞에서 설명드린바와 같이 여러가지를 각각마다 적용할 수 있습니다.

​

그리고 {loop: true} 이 부분은 반복동작을 의미합니다.

이 항목이 없으면 그냥 1번 동작하고 마는데, 이 항목이 있음으로 말미암아 카메라가 하염없이 하염없이 무한 반복하며 움직입니다.

이를 멈출 수 있는 건 바로 createjs.Tween.removeAllTweens(); 명령이지요.

​

이 기능을 이용하면, 웬지 멋진 가상세계를 만들어놓고 가만히 앉아서 구경하는 자동 관광 투어를 만들 수 있다고 생각되지 않으신가요 ? :)

​

여기까지 버티고 읽어주신 분들께 감사드리며 수고 많으셨습니다 :)

관련 예제에 대한 실제 실행은 아래 페이지에서 보실 수 있습니다.

​

http://dreamplan7.cafe24.com/canvas2/three013.html

3차원웹 캔버스

 

다음 강좌는 여기입니다 :) / https://itadventure.tistory.com/66

3차원 웹 VR 모드, 모바일로 보는 딴 세상 - 26번째 시간