본문 바로가기

자바스크립트와 캔버스

바빌론JS - 장면 만들고 뷰어로 불러오기 지난 게시글에 바빌론JS를 이용하여 재미난걸 만들어보았었는데요.https://itadventure.tistory.com/680 바빌론js - 3차원 웹!평소 취미 활동대로 이것 저것 다양한 코드의 바다를 순항하던 중 아주 흥미로운 걸 발견했습니다.바로 babylon JS(바빌론JS) 라는건데요.얼마전 다루었던 Three.js와 비슷한 라이브러리로서 웹(Web)에itadventure.tistory.com원리를 모르고 진행했기 때문에 신기하긴 했지만 어떻게 그런건지 이해가 어려울 수 있습니다.오늘은 그 원리를 하나씩 밝혀 보고자 합니다 :)기초코드가장 기본적인 코드는 아래와 같습니다.scene 와 camera 는 필수로 제공되어야 하는데요scene 은 가상공간을, camera 는 카메라를 의미합니다. 상세 .. 더보기
블로그에 스케치팹 3D 장면 넣기 이제는 유튜브 뿐만 아니라 3D 장면도 블로그에 넣을 수 있는 시대가 왔습니다.스케치팹(Sketch Fab)이 바로 그러한데요.아래 평온하게 잠들어 있는 친구 도그(Dog)를 마우스로 이리 저리 잡고 움직이거나 돌려보거나마우스 휠을 확대해 보세요. 스마트폰이라면 두손가락으로 확대/축소/이동해보세요. 여지껏 본적이 없으셨다면 신세계이실 겁니다 :) Dog by sv.stats on Sketchfab스케치팹의 이러한 장면은 마치 유튜브처럼 블로그 본문에 넣을 수 있는데요.티스토리 기준으로 설명드리겠습니다.거두절미하고 바로 시작해 보죠, 스케치팹으로 이동!https://sketchfab.com/화면 위 검색창에 영어로 검색하시거나딱히 단어가 떠오르지 않으면 Explore 메뉴에 마우스를 대면 선택할 수.. 더보기
바빌론js - 3차원 웹! 평소 취미 활동대로 이것 저것 다양한 코드의 바다를 순항하던 중 아주 흥미로운 걸 발견했습니다.바로 babylon JS(바빌론JS) 라는건데요.얼마전 다루었던 Three.js와 비슷한 라이브러리로서 웹(Web)에서 3차원 그래픽을 다루는 자바스크립트입니다. 도입부를 시도해보니 어라? 잠깐 투자한 시간 대비 멋진 결과물을 보여줄 수 있어 나름 만족스럽네요.오늘은 해당 부분을 공유드리고자 합니다.본 내용은 공식 문서의 튜토리얼 내용을 소화하여 크레이 나름대로 재작성하였습니다.https://doc.babylonjs.com/journey/theFirstStep플레이 그라운드! 놀이터로 가볼까?바빌론JS는 실시간으로 코드를 작성, 결과를 볼 수 있는 3차원 플레이 그라운드(PlayGround)를 제공합니다.일종의.. 더보기
돈 뽑는 기계 무한으로 돈을 뽑아주는 기계가 있다면 어떨까요? 당장은 좋을지 몰라도 과도한 돈은 재앙이 된다고도 합니다. 적당한 수준에서 잘 관리할 수 있는게 뭐니뭐니해도 딱 좋지요. 그래도 돈을 실컷 눈으로라도 벌어보고 싶은 이웃님들을 위해(?) 만들어 보았습니다 :) 더보기
철창속 고양이 스크립트 공개! 기능을 좀 더 넣은 최종판입니다 :) 약속대로 스크립트를 공개합니다! 좀 스크롤 압박이 있을 수 있습니다 ㅎㅎ 코로나로 힘들어하는 분들이 모두 자유로워져 힘내시라는 의미도 있어요~ 동영상, 배경음악 모두 저작권은 무료이고 영상은 픽사베이의 저작권 표시의무가 없지만 배경음악은 Music: www.bensound.com 이라는 문구를 포함해야 하는 의무가 있습니다. 아래 내용 안 보이시면 여쪽으로 오세요 ~ 🥾🥾 http://dreamplan7.cafe24.com/canvas7/canvas3.htm 공 통통 dreamplan7.cafe24.com 더보기
강아지는 어딜 보는 걸까요? ( 자바스크립트 캔바스 ) 시작 후 화면 아무 곳이나 클릭해 주세요 :) 이 스크립트도 공개 예정입니다~ HTML 삽입 미리보기할 수 없는 소스 아무것도 안보이시면 여쪽으로 => http://dreamplan7.cafe24.com/canvas7/canvas2.htm 방문해주시는 모든 분들께 늘 감사드립니다. 재미있으셨다면 공감 한방, 댓글은 굿잡! 감사합니다~ 더보기
빗소리 스크립트를 공개합니다. https://itadventure.tistory.com/524 게시글에 사용된 빗소리 스크립트를 공개합니다. 배경이미지, 배경음악은 크레이의 홈페이지에 올려둔 것을 링크하였는데요. 여러분의 입맛에 맞는 걸 어딘가에 업로드하시고 적용하셔도 좋습니다. 아래는 홈페이지용, https://itadventure.tistory.com / 크레이의 IT탐구 아래는 티스토리 게시글용인데요. 티스토리에서는 HTML 모드 글쓰기로 전환하신 다음에 글을 써주셔야 해요. 배경이미지를 바꾸고 싶어요! 배경이미지를 바꾸고 싶으신가요? 어딘가에 마음에 드는 그림파일을 업로드하신 다음에, 아래 소스를 수정해 주시면 됩니다. 해상도는 화면에 걸맞는 사이즈로 편집해 주세요 // 배경 gm.bgImage = await loadImage.. 더보기
ASMR - 캔바스로 느껴보는 빗소리 ( 자바스크립트 ) 티스토리 게시글 내 비가 내려요. 웹브라우저 본문 아무데나 클릭하시면 빗소리가 들리실 겁니다. 휴식이 필요할 때 빗소리를 들어보며 여유를 누려보는건 어떨까요? :) # 3. 28일 스피커 버튼 추가 - 클릭시 소리 토글! 안되시는 분은 여기로 오세요~ http://dreamplan7.cafe24.com/canvas7/canvas1.htm 더보기

티스토리툴바