분류 전체보기

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..

Cypress testing libray 설치

Cypress testing libray 설치https://testing-library.com/docs/cypress-testing-library/intronpm install --save-dev cypress @testing-library/cypress  설치 후 Element 사용 가능react testing Libray에서 사용했던 getByText와 같은 걸 사용해 element를 가져 올 수 있다.getByText, getByRow, getByContainer를 사용할 수 있게 된다.  types에 추가하기// cypress/tsconfig.json{ "compilerOptions": { "allowJs": true, "baseUrl": "../node_modules", "ty..

Cypress, 실제 사용 환경에 가까운 테스트

CypressCypress는 Jest가 아닌 mocha를 사용한다.웹 애플리케이션을 테스트하기 위한 JavaScript 기반의 엔드투엔드(E2E) 테스팅 프레임워크이다.컴퓨터에 설치되는 데스크톱 응용 프로그램으로 브라우저에서 실행되는 모든 것에 대한 빠르고 쉽고 안정적인 테스트를 도와준다.브라우저에서 사용자의 동작을 흉내 내어 실제 사용 환경에 가까운 테스트를 할 수 있게 해준다.https://www.cypress.io/  설치npm install cypress다운로드하는데 시간이 약간 길 수 있음  프레임워크 열기npx cypress open반드시 [name].cy.ts 의 형태를 준수cypress open 해서 테스트 파일을 읽어 올 수 있다.  cypress를 typescript로 구성하기// cy..

Raycaster, 클릭한 Mesh 감지하기

마우스 이벤트 추가const mouse = new THREE.Vector2();/* 이벤트 */window.addEventListener("resize", setSize);canvas.addEventListener("click", (e) => { console.log("📢 [ex02_eventClick.js:85]", e);});// 이벤트 콘솔 결과PointerEvent { clientX: 300, clientY : 200}마우스로 클릭한 위치 표시 - clientX, clientY  threejs에 맞게 좌표를 변환해야 한다./* 2D 화면상의 마우스 위치 만들기 */const mouse = new THREE.Vector2();/* 이벤트 */window.addEventListener("resiz..