분류 전체보기

glTF, 3D 모델과 장면을 경량화하고 빠르게 전송·렌더링하기 위한 표준 파일 포맷

glTF3D 모델과 장면(scene)을 효율적으로 저장하고 전송하기 위해 Khronos Group에서 만든 파일 포맷이다.주로 3D 그래픽 애플리케이션, 게임 엔진, 웹 애플리케이션에서 사용된다.glTF는 "3D 모델의 JPEG"라고도 불리며, 경량성과 로딩 속도 최적화가 특징이다.glTF는 모델 데이터를 최소한의 용량으로 저장해 전송 시간을 단축하고, 디바이스 메모리를 절약한다.  표준화된 포맷이 포맷은 JSON 기반의 텍스트 포맷과 이진 데이터인 .glb 포맷을 제공한다..gltfJSON 기반 텍스트 포맷.모델 데이터와 리소스를 외부에서 참조..glb바이너리 포맷.모든 데이터를 단일 파일에 포함.  크로스 플랫폼다양한 환경에서 동일하게 작동하며, WebGL, Three.js, Babylon.js 같은..

Cypress, 브라우저의 localStorage에 저장된 값을 검증하는 코드 테스트

describe("로그인", () => { const user = cy; it("양식을 작성하고 로그인해야 합니다.", () => { user.visit("/"); user.findByPlaceholderText("이메일").type("client@mail.com"); user.findByPlaceholderText("비밀번호").type("123123"); user .findByRole("button") .should("not.have.class", "pointer-events-none") .click(); user.window().its("localStorage.token-name").should("be.a", "string"); });});..

Cypress, React Testing Library에서 제공하는 비동기 쿼리 메서드 체인 안되는 부분 해결 방법

Cypress testing libray를 설치 후 Form 가져오기describe("로그인", () => { it("홈페이지로 이동해야 합니다.", () => { cy.visit("/").title().should("eq", "로그인 | Nuber Eats"); }); it("Form에 내용을 입력해야 합니다.", () => { cy.visit("/") .findByPlaceholderText("이메일") .type("test@mail.com") .findByPlaceholderText("비밀번호") .type("123123") .findByRole("button") .should("not.have.class", "pointer-ev..

Raycaster, 드래그 클릭 방지

드래그 클릭 방지드래그 후 마우스를 떼는 순간 클릭됐다 체크된다.마우스 이벤트를 사용하여 드래그 클릭 방지하기  처음 위치에서 최소 거리 이상 이동 시 드래그로 간주function checkIntersects() { if (mouseDragMoved) return; // 드래그 시 클릭 이벤트 실행하지 않음 // 카메라와 마우스 위치를 사용해 Raycaster 업데이트 raycaster.setFromCamera(mouse, camera); // 마우스 위치와 교차하는 객체 확인 const intersects = raycaster.intersectObjects(meshes); for (const item of intersects) { console.log("📢 [ex03_preventDr..