폴리프레임

JavaScript에서 type은 // main.js import * as THREE from "three"; import { OrbitControls } from 'jsm/controls/OrbitControls.js';또는

JavaScript 2024. 9. 18. 07:34

1. Attributes (HTML 특성) Attributes는 HTML 문서에서 DOM 요소에 직접 작성된 값입니다.이 값은 브라우저가 요소를 처음 읽을 때 설정됩니다.HTML 자체에서 볼 수 있는 정보이며, 주로 요소의 초기 상태를 나타냅니다.예를 들어 에서 type, value, id는 모두 attributes입니다. getAttribute() 및 setAttribute() 메서드를 사용하여 HTML 특성을 가져오거나 설정할 수 있습니다.// 요소 선택let input = document.getElementById('myInput');// Attribute 값을 가져오기console.log(input.getAttribute('value')); // "Hello"// Attribute 값을 설정하기..

JavaScript 2024. 9. 17. 11:31

canvas.toDataURL("image/png") 캔버스의 이미지를 PNG 형식의 데이터 URL로 변환합니다. HTML 요소의 내용을 Base64 형식의 데이터 URL로 변환합니다. 이 URL은 브라우저에서 이미지나 파일로 사용할 수 있는 문자열입니다. const image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");toDataURL() 메서드에 "image/png"를 전달하면, 캔버스의 내용을 PNG 포맷의 이미지 데이터 URL로 변환합니다. 만약 다른 이미지 포맷(ex: "image/jpeg")을 원하면, 해당 포맷을 지정할 수 있습니다. replace("image/png", "image/octet-str..

JavaScript 2024. 9. 16. 22:10

속성접근자 (property accessors)점 또는 괄호 표기법으로 객체의 속성에 접근할 수 있도록 해줍니다. 속성의 이름을 키로 사용하는 연관 배열(a.k.a 맵, 딕셔너리, 해시, 룩업 테이블)로 생각할 수 있습니다  1. 점 표기법 (dot notation) - 정적(static)document.createElement("pre");// createElement()라는 메소드를 document 객체에서 찾아서 호출하는 명령어cv.onRuntimeInitialized = function() { console.log("Runtime initialized");};2. 대괄호 표기법 (bracket notation) - 동적(dynamic)document["createElement"]("pre");c..

JavaScript 2024. 9. 16. 12:01

OpenCV와 OpenCV.js는 동일한 라이브러리 기반이지만, 기능과 사용 방식에서 몇 가지 차이가 있습니다  언어 및 플랫폼  OpenCV: 주로 C++, Python, Java와 같은 여러 언어에서 사용할 수 있으며, 데스크탑 애플리케이션 개발에 많이 사용됩니다.OpenCV.js: OpenCV의 JavaScript 버전으로, 브라우저 환경에서 사용됩니다. WebAssembly를 사용하여 성능을 최적화했으며, 브라우저에서 컴퓨터 비전 기능을 구현할 수 있습니다. 성능 OpenCV: C++로 작성되었기 때문에 성능이 뛰어나며, 네이티브 환경에서 GPU와 같은 하드웨어 가속을 쉽게 사용할 수 있습니다.OpenCV.js: WebAssembly로 동작하기 때문에 성능이 상당히 좋지만, 브라우저에서의 제약 때..

JavaScript 2024. 9. 16. 11:17

HSL은  색상표현의 한 방법으로 Hue, Saturation, and Lightness 을 의미 합니다. 색상값은 hsl(hue, saturation, lightness)로 표기합니다.hue : JavaScript 표준은  0 ~360으로 각도를 표기하지만, Three.js 에서는 0 ~ 1 사이 값으로 표기하고, 내부적으로는 0~ 360 으로 변환 사용됩니다.saturation : 색상의 밀도를 나타내며, 0 ~ 100 (퍼센트) 로 표기합니다. 100 은 완전하게 색상을 나타내지만, 50%의 경우는 gray(회색)이 겹쳐보이고, 0%의 경우는 회색으로만 나타납니다. lightness : 빛의 세기를 나타내며, 0 ~ 100 (퍼센트) 로 표기하며, 0 은 빛이 없으므로 완전히 어둡고, 100은 최고..

JavaScript 2024. 9. 13. 00:01

구면좌표계(spherical coordinate system [스피어리컬 커디네잇 시스템])는 3차원 공간 상의 점들을 나타내는 좌표계의 하나로, 보통 (r,θ,ϕ)로 나타낸다.r (반지름): 원점에서 해당 점까지의 거리.θ (theta, 세타): z축을 기준으로 하는 방위각, 즉 위도에 해당하는 각도. 이는 z축에서 해당 점까지의 각도를 나타내며, 0에서 π(180도)까지의 범위를 가집니다.φ (phi, 파이): x-y 평면에서의 방위각, 즉 경도에 해당하는 각도입니다. 이는 x축에서 해당 점의 투영까지의 각도를 나타내며, 0에서 2π(360도)까지의 범위를 가집니다.구면좌표계와 직교좌표계 변환구면좌표계에서 직교좌표계로 변환하려면 다음 공식을 사용할 수 있습니다.x = r * sin(θ) * cos(φ..

JavaScript 2024. 9. 12. 14:04

WebGL에서 화면의 좌표는 일반적으로 NDC(Normalized Device Coordinates) 좌표계를 사용합니다. Normalized Value 라고도 하며,  Three.js에서 사용합니다. 위 그림에서 빨강색의 좌표계는 Canvas 등 일반적으로 HTML(2D)에서 사용하는 좌표 체계입니다. 그러나 three.js에서는 힌색라인으로 표시된 NDC 좌표(3D) 체계를 사용합니다. NDC 체계에서는 X 좌표는  -1 (왼쪽 끝)에서 +1(오른쪽 끝)으로 나타내며, Y좌표는 -1(아래 끝)에서 +1(위쪽 끝) 으로 나타냅니다. Z 좌표는 일반적으로 0에서 1, 또는 -1에서 1범위로 사용되지만, 통상 2D 평면에서는 생략됩니다. 이 좌표를 변환하기 위하여, 다음의 함수를 사용할 수 있습니다.// ..

JavaScript 2024. 9. 10. 22:36