무찌르자 단팥빵 무찌르자 단팥빵

canvas size 이해devicePixelRatio(dpr)은하나의 css 픽셀을 그릴 때 사용되는 장치의 픽셀 수이다. dpr이 다르더라도 보여지는 모습이 달라지지 않도록 구현하는 방법을 알아본다.내용의 출처는 맛있는 코딩 님 강의에서 가져왔다.     const canvas = document.querySelector('canvas');canvas.style.backgroundColor = 'gold';const ctx = canvas.getContext('2d');const dpr = window.devicePixelRatio;const canvasWidth = 400;const canvasHeight = 400;canvas.width = canvasWidth * dpr;canvas.height..

Three.js 재질별 material 속성 정리플라스틱: metalness: 0, roughness: 0.2 ~ 0.4const plasticMaterial = new THREE.MeshStandardMaterial({ color: 0xff0000, // 원하는 색상 metalness: 0, roughness: 0.3,});메탈: metalness: 1, roughness: 0 ~ 0.3const metalMaterial = new THREE.MeshStandardMaterial({ color: 0xaaaaaa, // 금속의 기본 색상 (은색, 철색 등) metalness: 1, roughness: 0.2,});유리: metalness: 0, roughness: 0, opacity: 0.1 ..

Three.js 설치(번들러 사용) three.js 보일러플레이트를 사용하여 three.js를 설치한다.아래 링크 보일러플레이트는 webpack 번들러를 사용했다.https://github.com/aakatev/three-js-webpack GitHub - aakatev/three-js-webpack: Boilerplate for Three JS projectBoilerplate for Three JS project. Contribute to aakatev/three-js-webpack development by creating an account on GitHub.github.comgit clone https://github.com/aakatev/three-js-webpack.git .npm inpm ..

jquery 확장 메서드 [셀렉터를 이용한 확장 메소드] 문법 : $.fn.메소드명 사용방법 : $(selector).메소드명()$.fn.HTMLTagRestore = function(){ var value = this.val(); if(this.is("input") || this.is("textarea")){ this.val(value.replaceAll('a', 'A').replaceAll('b', 'B')); } return this; // 함수 체인 }; $("input").on('input',function(){ $(this).HTMLTagRestore(); }); $("input").HT..

한글 입력시 이벤트 중복 호출 해결 방법 cjk(중국어, 일본어, 한국어) 문자는 브라우저에서 처리하는 과정이 한 단계 더 필요하다. 따라서 한국어 입력시 이벤트가 중복 호출되는 현상이 생긴다. 이를 해결하기 위해 isComposing 이라는 이벤트 속성을 사용한다. isComposing 은 글자가 조합 중인지 boolean을 반환한다. 아래는 isComposing 사용 예시다. const inputEl = document.querySelector('input'); inputEl.addEventListener('keydown', event => { if(event.key === 'Enter' && !event.isComposing){ console.log(event.isComposing); console..

부동소수점 오류 현상 const a = 0.1; const b = 0.2; console.log(a+b); // 0.30000000000000004 소수점이 있는 실수를 이진수로 표현할 때 이진수로 표현하지 못하는 소수가 발생하여 컴퓨터는 가장 근사치의 값이 저장된다. 고정 소수점 또는 부동 소수점 을 사용해 이를 해결한다. 부동 소수점을 표현하는 방식으로 일반적으로 IEEE에서 표준으로 제안한 방식을 사용한다.( 부호비트(1bit), 지수비트(8bit), 가수비트(23bit) ) 하지만 부동 소수점 계산에는 정밀도가 손실되고, 반올림으로 오차가 생기는 오류가 발생한다. 부동 소수점 오류를 해결하기 위한 방법으로 - toFixed() 사용 - Math 객체의 메서드 사용 - 기타 라이브러리 사용 (Big..

3D를 위한 삼각함수 기초 sinθ = θ에서 직각까지 빙돌아서 tanθ = θ에서 직각까지 바로 간 다음에 뚫린 길로 cosθ = 빗변에서 시작해서 θ를 사이에 두고 tanθ = sinθ / cosθ 특수각의 삼각비 30도 45도 60도 sin $$ \frac{ 1 }{2} $$ $$ \frac{ \sqrt{2} }{2} $$ $$ \frac{ \sqrt{3} }{2} $$ cos $$ \frac{ \sqrt{3} }{2} $$ $$ \frac{ \sqrt{2} }{2} $$ $$ \frac{ 1 }{2} $$ tan $$ \frac{1} { \sqrt{3} } $$ $$ { 1 } $$ $$ { \sqrt{3} } $$ 라디안 라디안은 호의 길이로 각도를 나타내는 방법이다. 각도를 실수로 표현하기 위..

Three.js 설치(번들러 없이)Three.js 는 모듈 방식으로 개발하는 것을 권장한다.three.js에서 공식적으로 webpack이나 vite같은 번들러의 이용을 권장하고 있고,  공식 문서도 번들러의 사용을 전제로 작성되어 있다. 아래의 설치 방법은 번들러를 사용하지 않은 방법이다.번들러를 사용하지 않기 때문에 폴더의 경로를 직접 지정해줘야 하는 번거로움이 있다.importmap을 사용하여 그 번거로움을 해결한다.1. npm 명령어 이용하여 설치1.1 node_moduls/three/build 폴더에서 three.module.js 가져오기npm install threeThree.js를 불러오기 위해서는 폴더의 경로를 지정해 주어야 한다. 하지만 Three.js의 다양한 모듈(controls, lo..