본문 바로가기
자바스크립트와 캔버스

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

 

createjs.com

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

보통은 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차원웹 캔버스

 

dreamplan7.cafe24.com

 

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

 

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

요새 VR 이다 해서 가상세계와 가상현실이 각광받는 듯 합니다. 물론 아직은 컨텐츠의 부족으로 가뭄을 겪고 있는듯 하지만, 5G 모바일 통신체계가 자리잡히고 모바일 기기의 성능이 점점 좋아짐에 따라 컨텐츠..

itadventure.tistory.com