자바스크립트와 캔버스51 블로그에 스케치팹 3D 장면 넣기 이제는 유튜브 뿐만 아니라 3D 장면도 블로그에 넣을 수 있는 시대가 왔습니다.스케치팹(Sketch Fab)이 바로 그러한데요.아래 평온하게 잠들어 있는 친구 도그(Dog)를 마우스로 이리 저리 잡고 움직이거나 돌려보거나마우스 휠을 확대해 보세요. 스마트폰이라면 두손가락으로 확대/축소/이동해보세요. 여지껏 본적이 없으셨다면 신세계이실 겁니다 :) Dog by sv.stats on Sketchfab스케치팹의 이러한 장면은 마치 유튜브처럼 블로그 본문에 넣을 수 있는데요.티스토리 기준으로 설명드리겠습니다.거두절미하고 바로 시작해 보죠, 스케치팹으로 이동!https://sketchfab.com/화면 위 검색창에 영어로 검색하시거나딱히 단어가 떠오르지 않으면 Explore 메뉴에 마우스를 대면 선택할 수.. 2024. 7. 8. 돈 뽑는 기계 무한으로 돈을 뽑아주는 기계가 있다면 어떨까요? 당장은 좋을지 몰라도 과도한 돈은 재앙이 된다고도 합니다. 적당한 수준에서 잘 관리할 수 있는게 뭐니뭐니해도 딱 좋지요. 그래도 돈을 실컷 눈으로라도 벌어보고 싶은 이웃님들을 위해(?) 만들어 보았습니다 :) 2022. 4. 9. 철창속 고양이 스크립트 공개! 기능을 좀 더 넣은 최종판입니다 :) 약속대로 스크립트를 공개합니다! 좀 스크롤 압박이 있을 수 있습니다 ㅎㅎ 코로나로 힘들어하는 분들이 모두 자유로워져 힘내시라는 의미도 있어요~ 동영상, 배경음악 모두 저작권은 무료이고 영상은 픽사베이의 저작권 표시의무가 없지만 배경음악은 Music: www.bensound.com 이라는 문구를 포함해야 하는 의무가 있습니다. 아래 내용 안 보이시면 여쪽으로 오세요 ~ 🥾🥾 http://dreamplan7.cafe24.com/canvas7/canvas3.htm 공 통통 dreamplan7.cafe24.com 2022. 4. 2. 강아지는 어딜 보는 걸까요? ( 자바스크립트 캔바스 ) 시작 후 화면 아무 곳이나 클릭해 주세요 :) 이 스크립트도 공개 예정입니다~ HTML 삽입 미리보기할 수 없는 소스 아무것도 안보이시면 여쪽으로 => http://dreamplan7.cafe24.com/canvas7/canvas2.htm 방문해주시는 모든 분들께 늘 감사드립니다. 재미있으셨다면 공감 한방, 댓글은 굿잡! 감사합니다~ 2022. 3. 30. 빗소리 스크립트를 공개합니다. https://itadventure.tistory.com/524 게시글에 사용된 빗소리 스크립트를 공개합니다. 배경이미지, 배경음악은 크레이의 홈페이지에 올려둔 것을 링크하였는데요. 여러분의 입맛에 맞는 걸 어딘가에 업로드하시고 적용하셔도 좋습니다. 아래는 홈페이지용, https://itadventure.tistory.com / 크레이의 IT탐구 아래는 티스토리 게시글용인데요. 티스토리에서는 HTML 모드 글쓰기로 전환하신 다음에 글을 써주셔야 해요. 배경이미지를 바꾸고 싶어요! 배경이미지를 바꾸고 싶으신가요? 어딘가에 마음에 드는 그림파일을 업로드하신 다음에, 아래 소스를 수정해 주시면 됩니다. 해상도는 화면에 걸맞는 사이즈로 편집해 주세요 // 배경 gm.bgImage = await loadImage.. 2022. 3. 29. ASMR - 캔바스로 느껴보는 빗소리 ( 자바스크립트 ) 티스토리 게시글 내 비가 내려요. 웹브라우저 본문 아무데나 클릭하시면 빗소리가 들리실 겁니다. 휴식이 필요할 때 빗소리를 들어보며 여유를 누려보는건 어떨까요? :) # 3. 28일 스피커 버튼 추가 - 클릭시 소리 토글! 안되시는 분은 여기로 오세요~ http://dreamplan7.cafe24.com/canvas7/canvas1.htm 2022. 3. 27. Node.js - Part13-2. 템플릿 예제 처음부터 시작하는 AWS와 Node.js 책자 본문 일부입니다. https://itadventure.tistory.com/493 [전자책 출간!] 처음부터 시작하는 AWS와 Node.js ( express ) 65 페이지 분량의 미리보기 책을 무료로 제공해드립니다 첨부파일을 다운로드하셔서 보시고 관심을 갖게 되신다면 그 때 구매하세요! 그동안 집필해본 '처음부터 시작하는 AWS와 Node.js' PDF 전자 itadventure.tistory.com 지난 이야기의 설명드린 내용대로 "내친 김에 만들어!" 보도록 하겠습니다. 참고로 랜덤 강아지 이미지를 제공하는 것은 해외 제공 오픈 API입니다. 템플릿을 활용하기 위해 ejs 모듈과 request 모듈을 설치해야 합니다. 새로운 폴더에서 또 시작해보도록 .. 2022. 3. 25. Node.js - Part 12-3. 동적웹페이지 만들기 처음부터 시작하는 AWS와 Node.js 책자 본문 일부입니다. https://itadventure.tistory.com/493 [전자책 출간!] 처음부터 시작하는 AWS와 Node.js ( express ) 65 페이지 분량의 미리보기 책을 무료로 제공해드립니다 첨부파일을 다운로드하셔서 보시고 관심을 갖게 되신다면 그 때 구매하세요! 그동안 집필해본 '처음부터 시작하는 AWS와 Node.js' PDF 전자 itadventure.tistory.com 오늘은 좀 내용이 길어요~ 동적 웹페이지는 어떻게 만들면 되는 것일까요? app.get() 함수를 사용하시면 되는데요. 정적 웹 선언과 오류처리 사이에 배치해 주시면 됩니다. main.js 코드를 아래와 같이 수정해볼까요? const express=requi.. 2022. 3. 23. Node.js - Part 12-1. 동적웹페이지? 그게 뭔데? 처음부터 시작하는 AWS와 Node.js 책자 본문 일부입니다. https://itadventure.tistory.com/493 [전자책 출간!] 처음부터 시작하는 AWS와 Node.js ( express ) 65 페이지 분량의 미리보기 책을 무료로 제공해드립니다 첨부파일을 다운로드하셔서 보시고 관심을 갖게 되신다면 그 때 구매하세요! 그동안 집필해본 '처음부터 시작하는 AWS와 Node.js' PDF 전자 itadventure.tistory.com 정적의 반대말은 동적이지요. 동적 웹페이지란 어떤 것일까요? 웹페이지가 막 걷기도 하거나 뛰기도 하거나 하는 등 움직이는 것일까요?... ^^; 이전 Part에서는 express 프레임워크에서 정적 웹사이트를 구성, 서비스하는 부분을 살펴 보았습니다. 정적인.. 2022. 3. 22. Node.js - Part 11-6. 그림파일도 문제 없어요 처음부터 시작하는 AWS와 Node.js 책자 본문 일부입니다. https://itadventure.tistory.com/493 [전자책 출간!] 처음부터 시작하는 AWS와 Node.js ( express ) 65 페이지 분량의 미리보기 책을 무료로 제공해드립니다 첨부파일을 다운로드하셔서 보시고 관심을 갖게 되신다면 그 때 구매하세요! 그동안 집필해본 '처음부터 시작하는 AWS와 Node.js' PDF 전자 itadventure.tistory.com 파일 모듈에서 잠깐 설명 드렸는데요. 그림, 영상, 이미지 등의 파일은 특별한 처리가 필요해 복잡하다고 했었지요? express 는 그 부분도 문제 없습니다. 정적 웹페이지에서는 자동 처리가 되거든요. 이 참에 그림 파일을 업로드하는 부분도 알아보겠습니다. .. 2022. 3. 16. Node.js - Part 11-5. 스크립트의 이해 자, 이제 4줄짜리 express 기본 소스가 어떤 구조인지 살펴 보도록 하겠습니다. Node.js 스크립트는 항상 첫 줄부터 순차진행됩니다. 첫째 줄 스크립트는 아래와 같은데요. const express=require('express'); 답습하는 의미에서 다시 살펴보겠습니다. const 는 한번 대입하면 변하지 않는 상수를 정의하는 선언문이고 const express 는 상수의 이름을 express 로 지어주겠다는 의미이며, 그리고 express = require('express');는 express 모듈을 불러와 express 에 넣어주겠다는 의미입니다. 등호기호 = 는 동일하다는 의미가 아니라 오른쪽을 복사해서 왼쪽에 넣는 의미였지요. express 도 결국은 모듈이기 때문에 이와 같은 방법을 사.. 2022. 3. 15. http 웹페이지에서 카메라, VR 제어 권한 주기 크롬브라우저의 업데이트로 인해 http 주소에서는 카메라 제어나 휴대폰의 VR기울기 센서를 제어할 수 없도록 변경되었었는데요. 기본적으로 https 주소에서만 카메라나 VR기울기센서를 사용할 수 있습니다. 그렇다고 https 인증서를 구매해서 적용하자니 돈이 들고 해서 나중에 기회가 되면 알아볼까 했었는데요. 오늘 드디어 http 주소에서도 카메라, VR을 제어할 수 있는 방법을 알아내어 공유합니다! 단, 이 방법은 사용자 본인이 각각 적용할 URL을 직접 입력해야 작동되는데요. 먼저 아래 URL 에 접속하신 다음에, chrome://flags/#unsafely-treat-insecure-origin-as-secure Disabled 선택상자를 클릭, Enabled 로 바꿔 주세요 그리고 제어를 허용할 .. 2022. 3. 12. 이전 1 2 3 4 5 다음
