개발 · 컴퓨터공학/three.js

Threejs Cloth Tailor 개발일지 - edge line draw 선 긋기, 겹쳐서 안보임 현상, mesh cut 방법 모색

이전 포스팅 보러가기 현황 정리현재 vertex 제거하고 물리 시뮬레이션에 반영하기까지 구현이 되었다근데 생각해보면, 나중에 천을 연결할 때에는 결국에 vertex 간에 새로운 edge로써 연결해야한다 결국 vertex를 지우는 것보다는 edge를 만들고 edge를 지움으로써 cut / attach를 구현해야한다  그러면 edge의 경우에는 하나만 연결할 수는 없으니까 두 개 이상의 vertex를 접합에 사용해야한다 음.. 접합 좀 어려운 것 같다  정리하면 결국 edge 단위로 자르기 / 붙이기를 해야하니까 edge 자르기를 구현하고 mesh 붙이기 알고리즘을 좀 찾아보자 edge 표시 이벤트일단 edge를 자르기 위해서 이벤트가 필요하다마우스로 vertex에서 vertex까지 쭉 드래그를 했을 때, ..

2024. 6. 29. 09:05

개발 · 컴퓨터공학/three.js

Threejs Cloth Tailor 개발일지 - cloth simulation 함수 시점 분리하기, vertex 제거 후 시뮬레이션 이슈 해결

이전 포스팅 보러가기  remove vertex의 문제점 이전에 vertex를 없애는 것이 가능했었는데 위와 같은 모양으로 없앴을 때, mesh가 잘렸다. 라고 보고 분리되어야하지만분리되지 않고 한 mesh처럼 동작한다 export function removeVertex(mesh: THREE.Mesh, rmIdx: number){ const meshAttribute = mesh.geometry.attributes const meshIndex = mesh.geometry.index const posArr = meshAttribute.position.array const normArr = meshAttribute.normal.array const uvArr = meshAttribute.uv.arra..

2024. 6. 28. 09:02

개발 · 컴퓨터공학/three.js

Threejs Cloth Tailor 개발일지 - vertex remove 정점 제거하기

이전 포스팅 보러가기 다음 구현 목적 천을 자를 때 primitive 차원에서 다양한 방법이 있다  vertex를 없애면서 관련된 face들도 다 없애는 방법edge만 없애고 vertex를 분리하는 방법자를 때 테셀레이션을 사용해서 submesh들을 생성하면서 자연스럽게 만드는 방법 최종적으로는 테셀레이션을 사용해야할 것 같은데 먼저 edge 방법으로 천을 자르고 mesh를 분리하는 방법을 구현해보자 음.. 그 전에 remove mode에서 vertex를 삭제하는 테스트를 빨리 좀 해보자remove vertex function getIntersectObject(scene: Scene, camera: Camera): Mesh | null{ raycaster.setFromCamera(mouse, camer..

2024. 6. 27. 09:08

개발 · 컴퓨터공학

node 모듈 에러 : UnhandledPromiseRejectionWarning: SyntaxError: Unexpected token '??='

다른 환경으로 옮겨서 npx vite를 실행하려고 하다가 이런 에러가 떴다 뭔가 싶어서 찾아봤는데 https://stackoverflow.com/questions/77630306/node23108-unhandledpromiserejectionwarning-syntaxerror-unexpected-token (node:23108) UnhandledPromiseRejectionWarning: SyntaxError: Unexpected token '??='(node:23108) UnhandledPromiseRejectionWarning: SyntaxError: Unexpected token '??=' I was caught with this error when is switch to node 14.17.2 f..

2024. 6. 26. 09:00

개발 · 컴퓨터공학/three.js

Threejs Cloth Tailor 개발일지 - remove mode, 메쉬 자르기

이전 포스팅 보러가기 새로운 모드 만들기 : remove modeexport type Mode = "NONE" | "RAYCAST" | "REMOVE"export const Modes: Mode[] = ["NONE", "RAYCAST", "REMOVE"]REMOVE 모드에서는 마우스 이벤트가 클릭시 제거하도록 할 것인데RAYCAST와 이벤트를 분리하려니 좀 복잡하다  export function getIntersectVertex(scene: Scene, camera: Camera): number[]{ raycaster.setFromCamera(mouse, camera) const intersects = raycaster.intersectObjects(scene.children) let closest..

2024. 6. 25. 09:00

개발 · 컴퓨터공학/three.js

Threejs Cloth Tailor 개발일지 - Typescript 함수 오버로딩, raycasting vertex debugger gui, vertex 중복과 face

이전 포스팅 보러가기 raycast 로 찾은 vertex gui 표시하기이전에 transformation을 고려하지 않고 vertex를 찾다가 고생좀 했다geometry에는 transformation이 적용되지 않는다는 것을 고려하고 개발하는 것은 정말 중요한 점이다  이래서 geometry vertex를 직접 건드리는 것은 컴퓨터그래픽스를 알지 못하면 불가능한 작업이다 이제는 찾은 vertex를 gui에 띄우자 Typescript 함수 오버로딩이런 식으로 다른 인자를 갖는 같은 기능으로 오버로딩하고 싶었는데찾아보니 TS에서 오버로딩은 지원하지 않는 것 같다 대신 인자의 형태를 여러 개 허용해서 함수 안에서 if문으로 분리하는 것.불편하니 그냥 함수를 분리해야겠다  raycast 로 찾은 vertex g..

2024. 6. 24. 09:04