분류 전체보기
-
평면도를 3D로 만드는 방법3D/Three.js 2023. 11. 6. 11:53
평면도를 3D로 만드는 방법 1. 2D 이미지를 svg파일로 추출한다. 나는 벡터 드로잉 프로그램 중에 내게 제일 익숙한 Figma 를 사용하여 2D 이미지를 불러와 벽을 따라 path를 따서 svg로 export 했다. 2. 블렌더에서 svg 파일을 import 한다. 2.1. blender 3.6 기준, Edit>Preferences > Add-ons 에서 Import-Export:Scalable Vecor Graphics(SVG) 1.1 format 선택 2.2. File > Import > Scalable Vector Graphics(.svg) 3. 불러들인 svg의 사이즈를 실제 도면과 맞춘다. Scene-Unit의 설정을 Meter로 설정 4. vector 드로잉을 mesh로 바꾼다. 불러들인..
-
엑셀 다운로드프론트엔드/javascript 2023. 10. 27. 11:22
엑셀 다운로드 Blob 이해 https://heropy.blog/2019/02/28/blob/ Blob(블랍) 이해하기 JavaScript에서 Blob(Binary Large Object, 블랍)은 이미지, 사운드, 비디오와 같은 멀티미디어 데이터를 다룰 때 사용할 수 있습니다. 대개 데이터의 크기(Byte) 및 MIME 타입을 알아내거나, 데이터를 송수신 heropy.blog 자바스크립트로 엑셀 다운로드 하는 예제 코드 - JSON 데이터 -> HTML 변환 -> 엑셀 다운로드 - 한글 꺠짐 방지를 위해 utf-8 bom 문자열 "\ufeff"를 Blob 생성시 array 인수에 붙여준다. Download Excel https://codepen.io/dimorin/pen/oNmjNbo Excel Dow..
-
UPBGE로 navigation mesh 만들기3D/Three.js 2023. 10. 20. 20:51
UPBGE로 navigation mesh 만들기 UPBGE 란? UPBGE is an open-source, 3D game engine forked from the old Blender Game Engine and deployed with Blender itself. UPBGE는 기존 Blender 게임 엔진에서 파생되어 Blender 자체와 함께 배포되는 오픈 소스 3D 게임 엔진이다. UPBGE 설치 방법 1. UPBGE 다운로드 https://upbge.org/#/download UPBGE A game-engine fully integrated in Blender upbge.org 아래 내용과 같이 블렌더 버전에 따라 설치할 UPBGE 버전도 다르다. UPBGE 0.36.1 is based on B..
-
SVG 애니메이션 만들기프론트엔드/javascript 2023. 10. 17. 11:48
SVG 애니메이션 만들기 1. SVG 제작 1.1. 직접 만들기 (Figma 에서 만드는 것을 추천) 1.2. SVG 자료 가져와서 커스터마이징 하기 https://storyset.com Storyset | Customize, animate and download illustration for free Choose your own style! Tell your story with the help of our 'friends' Editable color: choose the hue that best suits the needs of your project Customize! There are a lot of different backgrounds and layers to pick from Animated ..
-
TOAST UI DateRangePicker 날짜 초기화프론트엔드/javascript 2023. 10. 17. 10:22
TOAST UI DateRangePicker 날짜 초기화 날짜 범위 선택 라이브러리 중 디자인이 이쁘고 사용성이 좋은 TOAST UI DateRangePicker가 있다. 특별히 선택된 날짜를 초기화 하는 기능을 구현할 때, 공식 document 에 나온 예제나 API 설명만으로는 기능 구현에 어려움이 있었는데, 얼마간 삽질 후 얻은 '초기화' 방법을 여기에 소개한다. close ~ close 선택된 날짜 초기화 방법을 간략히 얘기하자면, 1. default 상태에선 초기화 버튼이 보이지 않다가 2. 날짜가 입력되면 초기화 버튼이 보인다. - change:start, change:end 이벤트 일어나면 getStartDate(), getEndDate() 를 통해 날짜가 입력됐는지 파악 3. 초기화 버튼을..
-
SPA에서 History API 이해프론트엔드/javascript 2023. 10. 16. 17:04
SPA에서 History API 이해 주소 내역은 하나의 목록이다. 뒤로가기, 앞으로가기는 목록 안에서 이동하는 것이다. 따라서, 목록에 새로운 주소를 추가하면 페이지를 이동한 셈이 된다. 목록에 주소를 추가하기 위한 메소드(history.pushState(). history.replaceState())가 HTML5에서 생겼다. 예제를 만들고 테스트하며 목록에 주소를 추가하는 메소드 history.pushState(), historyreplaceState()를 비교하자. 아래 예제를 book 폴더 아래에 만든다. pushState replaceState ①'pushState' 버튼을 클릭하면, 페이지가 새로 갱신되지 않지만 주소만 바뀌고, 뒤로가기 버튼이 활성화된다. 주소 목록에 새로운 주소가 추가된다...
-
Three.js 공부 참고용 포스트3D/Three.js 2023. 6. 3. 08:50
https://velog.io/@9rganizedchaos/series/Three.js-journey-%EA%B0%95%EC%9D%98%EB%85%B8%ED%8A%B8 시리즈 | Three.js journey 강의노트 - 9rganizedchaos.log 🙌🏻 해당 글은 Three.js Journey의 강의 노트입니다.Raycaster와 같은 몇 가지 수식과 솔루션을 사용해 자신만의 Physics를 구현할 수도 있지만, 장력, 마찰, 바운싱, 제약 조건, 피벗 등의 사실적인 Physi velog.io