본문 바로가기

Canvas

3차원 웹, 클론? 복제! - 28번째 시간 세계적으로 생물의 복제는 사회적, 윤리적 문제를 유발하고 있습니다. 심지어 인간복제까지도 이미 실현화되어 실용화한 사례도 있다고 하니 놀라운 일이 아닐 수 없습니다. https://www.youtube.com/watch?v=iDcLznQLPg8&t=329s ​ 한국에도 한차례 복제열풍이 있었지요. 바로 '황우석 박사'의 논문 사기 논란이었습니다. 당시 논문은 조작으로 드러나 확실히 문제가 있었고 줄기세포 연구 자체도 사기로 판명이 났었지만 웬지 그 모든 것이 사기라고 하기에는 석연치 않은 부분이 있었지요. ​ 단 하나 성공한 1번 줄기세포가 사실은 처녀혼 임신과 같은 이상한 발표를 하고 얼른 땜방해서 묻어버리려고 하는 분위기로 느껴지기도 했습니다. ​ 최근 해외에서 연구 활동중인 '황우석 박사'의 국내 .. 더보기
3차원 웹 VR 모드, 모바일로 보는 딴 세상 - 26번째 시간 요새 VR 이다 해서 가상세계와 가상현실이 각광받는 듯 합니다. 물론 아직은 컨텐츠의 부족으로 가뭄을 겪고 있는듯 하지만, 5G 모바일 통신체계가 자리잡히고 모바일 기기의 성능이 점점 좋아짐에 따라 컨텐츠 더욱 제작도 쉬워지겠지요. 모바일웹에서 사용하는 HTML5 웹표준 기술은 이미 이런 기술을 위한 준비를 몇년전부터 해왔고, 현 시대에는 표준화하여 대부분의 브라우저에서 이미 지원되고 있습니다. 영상 한번 보실까요? 앞 부분은 PC 웹이고, 뒷부분은 모바일웹입니다. ​ https://youtu.be/VJZPewzuf5w 이번 시간에는 지난 주에 이어, VR 모드를 추가하는 부분을 다뤄보도록 하겠습니다. 미리보기를 원하시는 분은 아래 URL 로 접속하시면 작동화면을 보실 수 있지요. http://dream.. 더보기
3차원 웹 캔버스, 원터치 버튼 이동! - 24번째 시간 https://youtu.be/cnARSpNaAV0 웹의 장점은 빠른 찾기 기능입니다. 지금도 언제든지 크레이의 블로그의 메뉴에서 찾고 싶은 메뉴를 클릭하면 언제든지 해당 메뉴 위치로 이동하지요. ​ 3차원 웹에서도 특정지점으로 이동하기 위해 마우스로 낑낑거리며 이동할 수도 있지만, 기왕이면 원클릭으로 한번에 이동하는 기능이 있으면 어떨까요? 이미 영상에서 보신 것처럼 가능합니다. 다만 3차원웹이기 때문에 2차원 웹과는 제공해야 할 정보가 좀 다르다고 할까요? 이를 위해서 카메라의 보는 시점 x, y, z 좌표와 바라볼 좌표 x, y, z 가 필요하지요. ​ 사실 3차원 좌표는 느낌으로 가늠하기란 정말 어려운데요. 먼저 지금 카메라의 3차원 좌표 지점을 늘 화면에 표시하면 어떨까요? 그래서 적당한 위치의.. 더보기
3차원 웹, 땅아 드러나라!, 캔버스와 함께하는 자바스크립트, 21번째 시간 하나님이 이르시되 천하의 물이 한 곳으로 모이고 뭍이 드러나라 하시니 그대로 되니라 하나님이 뭍을 땅이라 부르시고 모인 물을 바다라 부르시니 하나님이 보시기에 좋았더라 - 성서 창세기 1장 중에서 - 슈퍼북이라는 해외 컨텐츠 앞부분에 '천지창조' 영상이 나오는데 아주 끝내줍니다. 한번 감상하시고 가보시면 어떨른지요? :) 참고로 슈퍼북 공식 유튜브 사이트 공개 방식에 따라 링크되었습니다.​ https://youtu.be/fn-wEOpPsMo 불러오는 중입니다... 이번 시간에는 지난 시간에 이어 바다 위에 섬을 띄우는 방법을 다뤄보도록 하겠습니다. 섬의 모양은 블렌더에서 툴을 이용해서 비교적 쉽게 작업했는데요. ​ 역시 크레이가 제공하는 모델을 사용하면 되지만, 직접 블렌더로 만들어보실 분을 위해 약간의.. 더보기
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장에서는 아래와 같이 말씀하십니다. 참빛 곧 세상에 와서 각 사람에게 비취는 빛이 있었나니 그가 세상에 계셨으며 세상은 그로 말미암아 지은바 되었으되 세상이 그를 알지 못하였고 자기 땅에 오매 자기 백성이 영접지 아니하였으나 영접하는 자 곧 그 이름을 믿는 자들에게는 하나님의 자녀가 되는 권세를 주셨으니 이는 혈통으로나 육정으로나 사람의 뜻으로 나지 아니하고 오직 하나님께로서 난 자들이니라 성서에 나오는 이 참빛은 바로 예수님이십니다. 이.. 더보기
3차원 웹, 밝은 빛을 보라, 캔버스와 함께하는 자바스크립트, 17번째 시간 지난 시간에는 3차원공간을 마우스로 자유자재로 돌려보는 예제를 살펴보았었는데요. https://itadventure.tistory.com/51 3차원 웹, 마우스로 움직이다, 캔버스와 함께하는 자바스크립트, 16번째 시간 3차원 웹 기술, 캔버스와 자바스크립트 "마우스로 움직이다" 시간입니다 :) 오늘은 우선 예제 영상을 보도록 하실까요? ​ https://youtu.be/2ECIpZvg7Og 허공에 3개의 정육면체가 있으며, 마우스로 클릭하여 드래.. itadventure.tistory.com 박스 뒷면이 너무 새까맣게 보였던 문제에 대해 잠시 거론했었지요 :) 왜 이렇게 까말까요? 그 원인은 포인트 라이트라고 만들어 놓은 3개의 조명이 모두 Z축을 따라 양수의 방향에만 있기 때문입니다. 상자 뒷면을 .. 더보기
3차원 웹, 마우스로 움직이다, 캔버스와 함께하는 자바스크립트, 16번째 시간 3차원 웹 기술, 캔버스와 자바스크립트 "마우스로 움직이다" 시간입니다 :) 오늘은 우선 예제 영상을 보도록 하실까요? ​ https://youtu.be/2ECIpZvg7Og 허공에 3개의 정육면체가 있으며, 마우스로 클릭하여 드래그하니 3개의 정육면체가 동시에 돌아갑니다. 마우스 휠을 위로 돌리면, 확대되고 아래로 돌리면 축소하며, 마우스 우클릭하여 드래그할 경우 화면이 상하 좌우로 그대로 이동합니다. ​ 마우스 우클릭이 추가됨으로서 마치 가상공간을 마음껏 들여다 보는 느낌인데요. 꽤 복잡해 보일듯 하지만, 사실 이 부분은 이미 만들어져 있는 멋진 기능이 마련되어 있기 때문에 그냥 가져다가 사용하면 됩니다. ​ 이를 위해서 먼저 스크립트 라이브러리를 추가해 주어야 하는데요. 지난 소스의 여기 아래 부분.. 더보기