본문 바로가기

3d웹

3차원 웹, 창공을 누비는 카메라! - 25번째 시간 사람이 새처럼 하늘을 날아다닐 수 있다면 얼마나 좋을까요? 어디든지 순식간에 휙 날아갈 수 있게 말이죠. ​ 위험도 없고 염려없이 하늘을 날 수 있다면 마치 천사와 같은 삶이 아닐지요. 성서에서 말하는 천국을 가게 되는 사람들은 그 곳에서 그런 축복을 누릴 수 있을지도 모릅니다 :) ​ 지난 시간에는 카메라 제어에 대해서 다루어 보았었는데요. 원클릭으로 원하는 지점으로 한번에 휙 가는 것은 편리하지만, 난데없이 갑자기 움직여서 어디에서 어디로 가는지 도통 알 수가 없을 때가 있습니다. ​ 그래서 움직이는 과정을 스르륵 보여주면서 이동하면 어떨지요? 마치 카메라가 새처럼 하늘을 날아가듯이 말이죠 :) ​ 관련 기술을 찾아보다가 어부지리로 연속으로 이동하는 기술까지 건져냈습니다. 영상 보실까요? ​ http.. 더보기
3차원 웹 캔버스, 원터치 버튼 이동! - 24번째 시간 https://youtu.be/cnARSpNaAV0 웹의 장점은 빠른 찾기 기능입니다. 지금도 언제든지 크레이의 블로그의 메뉴에서 찾고 싶은 메뉴를 클릭하면 언제든지 해당 메뉴 위치로 이동하지요. ​ 3차원 웹에서도 특정지점으로 이동하기 위해 마우스로 낑낑거리며 이동할 수도 있지만, 기왕이면 원클릭으로 한번에 이동하는 기능이 있으면 어떨까요? 이미 영상에서 보신 것처럼 가능합니다. 다만 3차원웹이기 때문에 2차원 웹과는 제공해야 할 정보가 좀 다르다고 할까요? 이를 위해서 카메라의 보는 시점 x, y, z 좌표와 바라볼 좌표 x, y, z 가 필요하지요. ​ 사실 3차원 좌표는 느낌으로 가늠하기란 정말 어려운데요. 먼저 지금 카메라의 3차원 좌표 지점을 늘 화면에 표시하면 어떨까요? 그래서 적당한 위치의.. 더보기
3차원 웹, 해가 뜨고 해가 지고, 23번째 시간 https://youtu.be/Zyi10Fgoqh0 3차원 웹 가상세계에서도 시계는 돌아갑니다. 똑딱똑딱- 마치 디즈니 애니메이션 겨울왕국에서 엘사와 함께 할 수 없어 시계만 마냥 바라보며 소리내는 안나처럼 말입니다 :) ​ 과거에는 시간을 측정하는 도구로서 해시계가 있었지요. 비록 비오는 날이면 무용지물이긴 하지만, 그래도 햇볓의 그림자로 시간을 알아낼 수 있었던 것은 조상들의 지혜가 아닌가 생각됩니다. ​ 모두가 태앙이 지구 주위를 회전한다는 천동설을 주장할 때에 갈릴레오 갈릴레이는 지구가 회전한다는 지동설을 주장하였지요. 협박에 못 이겨서 자신의 주장을 굽히면서도 '그대로 지구는 돈다'라고 되뇌이던 갈릴레오 갈릴레이의 주장은 지금에 와서야 그 사실이 더욱 확고해졌습니다. ​ 하지만, HTML5 3차.. 더보기
3차원 웹, 소스의 체계적 정리, 22번째 시간 지난번 시간까지는 3차원 웹을 구현하는 방법에 대해서 다뤄보았었는데요. 소스가 단순할 때는 느끼지 못했지만 소스가 점점 길어지다보니까 불편한 점이 하나둘 생겨나게 됩니다. ​ 소스가 길어질수록 스크롤의 압박을 견뎌내야 하는 것도 그렇지만 추가되는 기능을 넣어야 할 때도 한참 찾아야 하는 불편이 있습니다. ​ 하지만 다행스럽게도 이를 체계적으로 정리할 수 있는 방법이 있는데요. 바로 파일을 나누는 겁니다. 용도별로 말이죠. 이번 시간에는 지난 시간까지 다루어보았던 하늘과 바다, 섬, 집 컨텐츠가 포함된 3차원 가상공간을 구현한 소스를 분류하는 부분을 다뤄보도록 하겠습니다. ​ 이를 위해 폴더와 파일 구성을 다음과 같이 꾸며보도록 하겠습니다. 사실 이 파일 구성은 통째로 다운받으실 수 있게 아래 첨부파일로 .. 더보기
3차원 웹, 땅아 드러나라!, 캔버스와 함께하는 자바스크립트, 21번째 시간 하나님이 이르시되 천하의 물이 한 곳으로 모이고 뭍이 드러나라 하시니 그대로 되니라 하나님이 뭍을 땅이라 부르시고 모인 물을 바다라 부르시니 하나님이 보시기에 좋았더라 - 성서 창세기 1장 중에서 - 슈퍼북이라는 해외 컨텐츠 앞부분에 '천지창조' 영상이 나오는데 아주 끝내줍니다. 한번 감상하시고 가보시면 어떨른지요? :) 참고로 슈퍼북 공식 유튜브 사이트 공개 방식에 따라 링크되었습니다.​ https://youtu.be/fn-wEOpPsMo 불러오는 중입니다... 이번 시간에는 지난 시간에 이어 바다 위에 섬을 띄우는 방법을 다뤄보도록 하겠습니다. 섬의 모양은 블렌더에서 툴을 이용해서 비교적 쉽게 작업했는데요. ​ 역시 크레이가 제공하는 모델을 사용하면 되지만, 직접 블렌더로 만들어보실 분을 위해 약간의.. 더보기
3차원 웹, 하늘과 바다를 만들어 봐, 캔버스와 함께하는 자바스크립트, 20번째 시간 https://youtu.be/ZNrmBoMf0YE 하나님이 이르시되 "물 가운데에 궁창이 있어 물과 물로 나뉘라" 하시고 하나님이 궁창을 만드사 궁창 아래의 물과 궁창 위의 물로 나뉘게 하시니 그대로 되니라 하나님이 궁창을 하늘이라 부르시니라 저녁이 되고 아침이 되니 이는 둘째 날이니라 성서의 창세기 1장, 지구를 창조하신 하나님께서 두번째 날에 행하신 일로 기록됩니다. "물 가운데 궁창이 있어 물과 물로 나뉘라!" 궁창(穹蒼)은 '푸른 하늘'이라는 한자어입니다. ​ 영어 성경 킹제임스 버전에서도, 다음과 같이 말씀하시지요. ​ Let there be / a firmament / in the midst / of the waters, 거기에 있게 되어라 / 하늘이 / 한 가운데에 / 물들의, ​ and .. 더보기
3차원 웹, 그림같은 집을 지어요, 캔버스와 함께하는 자바스크립트, 19번째 시간 미리보기 http://dreamplan7.cafe24.com/canvas/three007.php 3차원 캔바스 예제 1 dreamplan7.cafe24.com 지난 강좌까지는 단순한 상자를 가지고 계속 작업을 했습니다만, 오늘부터는 블렌더에서 직접 모델링한 미니 장난감 집을 띄워보는 시간을 갖도록 하겠습니다 :) ​ 집모양을 블렌더에서 만드는 부분은 사실 스크립트의 강좌내용을 벗어나는 부분이라서 집을 만드는 부분은 여기서는 다루지 않겠지만, 추후 블렌더 강좌에서 한번 다뤄보도록 하겠습니다. 지난 블렌더 강좌는 아래 링크에서 주루룩 보실수 있습니다. 1부 30강까지 다 마스터하신 분이라면 이런 집은 그냥 만드실 수도 있을듯 합니다. https://blog.naver.com/PostList.nhn?blogI.. 더보기
3차원 웹, 빛과 그림자, 캔버스와 함께하는 자바스크립트, 18번째 시간 "빛이 있는 곳에는 어두움도 있다." ​ 천국을 제외한 이 세상은 아직도 빛과 어두움이 공존한다고 생각됩니다 :) 거꾸로 생각하자면 어두움이 있기에 빛이 더욱 밝게 보이기도 하지요. ​ 성서에서도 예수님께서는 빛으로 어두운 세상에 오셨다고 말씀하십니다. 성서 요한복음 1장에서는 아래와 같이 말씀하십니다. 참빛 곧 세상에 와서 각 사람에게 비취는 빛이 있었나니 그가 세상에 계셨으며 세상은 그로 말미암아 지은바 되었으되 세상이 그를 알지 못하였고 자기 땅에 오매 자기 백성이 영접지 아니하였으나 영접하는 자 곧 그 이름을 믿는 자들에게는 하나님의 자녀가 되는 권세를 주셨으니 이는 혈통으로나 육정으로나 사람의 뜻으로 나지 아니하고 오직 하나님께로서 난 자들이니라 성서에 나오는 이 참빛은 바로 예수님이십니다. 이.. 더보기