캔버스 썸네일형 리스트형 자바스크립트와 캔버스 3번째 시간, 공튀기기 놀이 1. HTML 표준 CANVAS 기술 소개 / https://itadventure.tistory.com/130 2. 자바스크립트와 CANVAS 두번째시간. 캔바스에 눈을 내리자 / https://itadventure.tistory.com/131 ◐ 3. 자바스크립트와 캔버스 3번째 시간, 공튀기기 놀이 ◑ 매력덩어리 캔버스 3번째 시간입니다 :) 오늘은 공놀이를 할까 합니다. 떨어지는 공을 받아치며 벽돌을 깨뜨리는 게임을 해보신 적이 있다면 아주 친근하실텐데요. 벽돌까지는 안 나오고 공만 나옵니다. 사방이 꽉 막힌 공간이 있습니다. 그 속에서 하나의 공이 등장하며 여기저기를 떠돌아 다닙니다. 벽에 닿을때마다 반사되어 반대쪽으로 튀어다니긴 하지만 마찰력이 없기 때문에 튀어다니는 힘은 전혀 줄어듬이 없습니.. 더보기 HTML 표준 CANVAS 기술 소개 HTML 표준 CANVAS 기술 소개 오늘은 HTML 표준으로 채택되어 요즈음에는 대부분의 브라우저에서 지원하는 캔버스에 대해 살펴보도록 하겠습니다 :) 캔버스란 HTML 기술중 아직은 그리 널리 퍼지지 않은 매력덩어리 기술인데요. 이 기술이 매력덩어리인 이유는 바로 웹에서 자유로운 GUI(그래픽 유저 인터페이스)를 지원하는 기술이기도 하기 때문입니다. 아쉽지만, 이 페이지는 간단한 웹페이지를 구성하여 꾸미는 정도는 이해하시는 선에서 출발합니다. 그리고 IE8에서는 실행이 안됩니다. 최소 IE9 버전은 되어야 하며, 크롬브라우저의 경우 버전 관계없이 대부분 실행이 됩니다. 먼저 크레이가 준비한 소스를 보도록 하실까요? Canvas is not supported. 이 소스를 웹페이지에서 실행하시면, 구.. 더보기 3차원 웹, 클론? 복제! - 28번째 시간 three.js 버전이 변경되어 소스가 일부 수정되었습니다 ( 2020. 4. 12 ) 작동 소스는 본문과 다소 상이할 수 있습니다. http://dreamplan7.cafe24.com/canvas2/three016.html 세계적으로 생물의 복제는 사회적, 윤리적 문제를 유발하고 있습니다. 심지어 인간복제까지도 이미 실현화되어 실용화한 사례도 있다고 하니 놀라운 일이 아닐 수 없습니다. https://www.youtube.com/watch?v=iDcLznQLPg8&t=329s 한국에도 한차례 복제열풍이 있었지요. 바로 '황우석 박사'의 논문 사기 논란이었습니다. 당시 논문은 조작으로 드러나 확실히 문제가 있었고 줄기세포 연구 자체도 사기로 판명이 났었지만 웬지 그 모든 것이 사기라고 하기에는 석연치.. 더보기 3차원 웹, 오우~ 돌핀! - 27번째 시간 three.js 버전이 변경되어 소스가 일부 수정되었습니다(2020. 4. 12) 본문과 다소 상이할 수 있으며 작동 소스는 아래에서 확인 가능합니다. http://dreamplan7.cafe24.com/canvas2/three015.html 돌고래는 인간 친화적인 동물로 알려져 있습니다. 우선 친근한 그 미소부터가 마음에 들지 않습니까? 크레이처럼 말이죠 :) 3차원 웹 가상 공간의 바닷가에 이 친근한 돌고래를 출현시켜보고 싶긴 하지만 아직 크레이의 실력으로는 블렌더로 이런 동물을 모델링할 정도는 안됩니다. 그래서 생각해낸 것이 있습니다. 바로 무료 3D 모델이지요 :) 그런게 있나요? 물론 있습니다. 어디 있냐구요? 여기 있지요. https://free3d.com 무료 3D 모델 - Fre.. 더보기 3차원 웹 VR 모드, 모바일로 보는 딴 세상 - 26번째 시간 요새 VR 이다 해서 가상세계와 가상현실이 각광받는 듯 합니다. 물론 아직은 컨텐츠의 부족으로 가뭄을 겪고 있는듯 하지만, 5G 모바일 통신체계가 자리잡히고 모바일 기기의 성능이 점점 좋아짐에 따라 컨텐츠 더욱 제작도 쉬워지겠지요. 모바일웹에서 사용하는 HTML5 웹표준 기술은 이미 이런 기술을 위한 준비를 몇년전부터 해왔고, 현 시대에는 표준화하여 대부분의 브라우저에서 이미 지원되고 있습니다. 영상 한번 보실까요? 앞 부분은 PC 웹이고, 뒷부분은 모바일웹입니다. https://youtu.be/VJZPewzuf5w 이번 시간에는 지난 주에 이어, VR 모드를 추가하는 부분을 다뤄보도록 하겠습니다. 미리보기를 원하시는 분은 아래 URL 로 접속하시면 작동화면을 보실 수 있지요. http://dream.. 더보기 3차원 웹, 창공을 누비는 카메라! - 25번째 시간 three.js 버전이 변경되어 소스가 일부 수정되었습니다. ( 2020. 4. 12 ) 본문과 일부 소스가 상이할 수 있으며 작동 소스는 아래에서 확인하실 수 있습니다. http://dreamplan7.cafe24.com/canvas2/three013.html 사람이 새처럼 하늘을 날아다닐 수 있다면 얼마나 좋을까요? 어디든지 순식간에 휙 날아갈 수 있게 말이죠. 위험도 없고 염려없이 하늘을 날 수 있다면 마치 천사와 같은 삶이 아닐지요. 성서에서 말하는 천국을 가게 되는 사람들은 그 곳에서 그런 축복을 누릴 수 있을지도 모릅니다 :) 지난 시간에는 카메라 제어에 대해서 다루어 보았었는데요. 원클릭으로 원하는 지점으로 한번에 휙 가는 것은 편리하지만, 난데없이 갑자기 움직여서 어디에서 어디로 가.. 더보기 3차원 웹 캔버스, 원터치 버튼 이동! - 24번째 시간 three.js 버전이 변경되어 소스가 일부 수정되었습니다. ( 2020. 4. 12 ) 본문과 일부 일치하지 않는 부분이 있을 수 있으며 아래 URL 에서 작동을 확인해보실 수 있습니다. http://dreamplan7.cafe24.com/canvas2/three012.html https://youtu.be/cnARSpNaAV0 웹의 장점은 빠른 찾기 기능입니다. 지금도 언제든지 크레이의 블로그의 메뉴에서 찾고 싶은 메뉴를 클릭하면 언제든지 해당 메뉴 위치로 이동하지요. 3차원 웹에서도 특정지점으로 이동하기 위해 마우스로 낑낑거리며 이동할 수도 있지만, 기왕이면 원클릭으로 한번에 이동하는 기능이 있으면 어떨까요? 이미 영상에서 보신 것처럼 가능합니다. 다만 3차원웹이기 때문에 2차원 웹과는 제공해야.. 더보기 3차원 웹, 소스의 체계적 정리, 22번째 시간 three.js 버전이 변경되어 소스 일부를 작동되도록 개조하였습니다. ( 2020. 4. 12 ) 본문 내용에 으선 반영하였습니다. 지난번 시간까지는 3차원 웹을 구현하는 방법에 대해서 다뤄보았었는데요. 소스가 단순할 때는 느끼지 못했지만 소스가 점점 길어지다보니까 불편한 점이 하나둘 생겨나게 됩니다. 소스가 길어질수록 스크롤의 압박을 견뎌내야 하는 것도 그렇지만 추가되는 기능을 넣어야 할 때도 한참 찾아야 하는 불편이 있습니다. 하지만 다행스럽게도 이를 체계적으로 정리할 수 있는 방법이 있는데요. 바로 파일을 나누는 겁니다. 용도별로 말이죠. 이번 시간에는 지난 시간까지 다루어보았던 하늘과 바다, 섬, 집 컨텐츠가 포함된 3차원 가상공간을 구현한 소스를 분류하는 부분을 다뤄보도록 하겠습니다. .. 더보기 이전 1 2 3 다음
