폴리프레임

1. 설정 열기 - 윈도우 키 + I 로 설정을 열기 2. 개인 설정- 선택 창에서 개인 설정을 선택 3. 색- 왼쪽 메뉴에서 색을 클릭 4. 색 선택- 색 모드 선택에서 라이트 또는 다크 모드를 선택 활용@media (prefers-color-scheme: light) { :root { color: #213547; background-color: #ffffff; } a:hover { color: #747bff; } button { background-color: #f9f9f9; } }

IT 일반 2025. 1. 8. 13:34

FontLoader()는 Three.js에서 폰트 파일을 로드하여 3D 텍스트를 생성할 수 있게 해주는 로더입니다. 폰트 파일은 보통 JSON 형식으로 저장됩니다. Three.js의 typeface.js 예제에서 폰트 파일을 다운로드할 수 있습니다. 사용 예제는 아래와 같습니다.const loader = new THREE.FontLoader();loader.load('path/to/your/font.json', function (font) { // 폰트 로딩 후 텍스트 생성 const textGeometry = new THREE.TextGeometry('Hello, World!', { font: font, size: 80, height: 5, curveSegments: 12, ..

three.js 2025. 1. 8. 13:16

LoadingManager()는 파일 로딩을 관리하는 객체로, 다음과 같은 기능을 제공합니다:onLoad(): 로딩이 완료될 때 호출되는 콜백 함수.onProgress(): 로딩 진행 상황을 모니터링하는 콜백 함수.onError(): 로딩 오류가 발생했을 때 호출되는 콜백 함수.const manager = new THREE.LoadingManager();manager.onStart = function (url, itemsLoaded, itemsTotal) { console.log('Loading started: ' + url);};manager.onLoad = function () { console.log('All objects loaded');};manager.onProgress = function..

three.js 2025. 1. 8. 09:42

document.readyState는 문서의 현재 상태를 나타내는 속성입니다. 다음 세 가지 값이 있습니다:"loading": 문서가 아직 로드 중입니다."interactive": 문서가 로드되었지만, 리소스(이미지, 스타일 등)가 아직 로드되지 않았습니다."complete": 문서와 모든 리소스가 로드되었습니다.여기서 "interactive", 즉 document.readyState === "interactive" 와  같은 속성으로 이벤트 핸들러에서 사용하는 "DOMContentLoaded" 가 있습니다.  if (document.readyState === "interactive" ) doSomthing();// 위와 같은 이벤트 리슨너document.addEventListener("DOMConte..

JavaScript 2025. 1. 8. 09:37

요소에서 cx와 cy 속성은 그라디언트의 중심 좌표를 설정하는 데 사용됩니다. 이 좌표는 SVG 좌표 시스템을 기준으로 하며, 단위를 사용하지 않으면 0에서 1 사이의 비율로 해석됩니다.cx: 그라디언트의 중심의 x좌표를 설정합니다.cy: 그라디언트의 중심의 y좌표를 설정합니다. cx="0.25"와 cy="0.25"는 그라디언트 중심이 SVG 좌표 시스템의 좌측 상단에서 25% 지점에 위치하도록 설정합니다.

html + css 2025. 1. 7. 21:01

1. Viewport (뷰포트)viewport는 SVG가 화면에 표시되는 실제 크기와 위치를 정의합니다. 이는 SVG의 픽셀 공간을 결정하며, 일반적으로 HTML 문서에서 SVG 요소의 width와 height 속성에 의해 설정됩니다.픽셀 단위: viewport는 물리적 픽셀 공간으로 동작합니다.CSS와 관련: HTML 문서 내에서 CSS를 사용해 크기 조정을 적용할 수 있습니다.설정하지 않으면 기본적으로 SVG의 내용이 포함된 본질적 크기(intrinsic size)를 사용합니다.viewport를 설정하지 않고 CSS의 width와 height를 사용하면 외부 컨테이너에 따라 유연하게 변합니다. 2. ViewBox (뷰박스)viewBox는 SVG의 내부 좌표 시스템을 정의합니다. viewBox는 다음..

html + css 2025. 1. 7. 13:42

text-anchor 속성은 SVG(Scalable Vector Graphics) 내 텍스트 요소의 앵커링 위치를 설정하는 데 사용됩니다. text-anchor는 SVG에서만 사용 가능하며, HTML의 일반 텍스트 요소에는 적용되지 않습니다. start: 텍스트의 시작 부분을 기준으로 앵커링합니다.middle: 텍스트의 중간 부분을 기준으로 앵커링합니다.end: 텍스트의 끝 부분을 기준으로 앵커링합니다.예를 들어, text-anchor: middle을 사용하면 텍스트가 중간을 기준으로 정렬됩니다.

html + css 2025. 1. 7. 13:30

useLoader()다양한 종류의 로더를 사용하여 여러 가지 리소스를 로드할 수 있도록 해줍니다. TextureLoader: 이미지 텍스처를 로드합니다. 주로 3D 모델의 표면에 적용될 텍스처를 로드하는 데 사용됩니다.GLTFLoader: GLTF/GLB 파일 형식의 3D 모델을 로드합니다. 이 형식은 3D 모델 데이터와 애니메이션을 포함할 수 있는 효율적인 파일 형식입니다.FBXLoader: FBX 파일 형식의 3D 모델을 로드합니다. 이 형식은 주로 애니메이션이 포함된 모델을 로드하는 데 사용됩니다.OBJLoader: OBJ 파일 형식의 3D 모델을 로드합니다. 간단한 3D 모델을 로드하는 데 주로 사용됩니다.STLLoader: STL 파일 형식의 3D 모델을 로드합니다. 주로 3D 프린팅을 위해 사..

three.js 2024. 12. 25. 20:11