개발/Web

[Three.js] POINT CLOUD 3D 이미지 웹페이지 노출

1. Point Cloud 이미지란?Point cloud 이미지는 객체의 3D 형태를 나타내기 위해 사용하는 데이터 집합입니다. 주로 3D 스캐너나 LiDAR 장비 등을 통해 수집되며, 각 점은 3차원 공간에서의 좌표를 가지고 있습니다. 이 글에서는 Three.js를 사용하여 Point Cloud 데이터를 웹에서 시각화하는 방법을 소개합니다.  2. Three.js 소개Three.js는 웹 브라우저에서 3D 그래픽을 쉽게 구현할 수 있도록 도와주는 자바스크립트 라이브러리입니다. HTML5의 `` 요소와 WebGL을 사용하여 복잡한 3D 그래픽을 렌더링할 수 있습니다.  3. Point Cloud 데이터를 Three.js로 시각화하기 아래는 byte 형식의 Point Cloud 데이터를 웹에서 시각화하는 ..

Blob 데이터를 이미지로 보여주는 방법

DB에 Blob으로 저장되 있는 이미지데이터를 조회해서 화면에 보여줄 필요가 있었습니다. Entity에서는 Blob데이터를 아래와 같이 ByteArray으로 가져올 수 있습니다.@Column(name="img_data")@Lobval imgData: ByteArray, 가져온 ByteArray는 아래의 함수를 호출해서 이미지데이터를 Base64 인코딩 후 앞에 data:image/png;base64, 를 추가합니다. 이 데이터 URL(data URL)을 사용하여 HTML에서 이미지를 인라인으로 명시할수 있습니다. 브라우저는 이 데이터를 디코딩하여 이미지를 렌더링합니다.fun getImgSrc(byteArray: ByteArray) : String { var base64Encode = Base64.g..

location.href 시 history.length 변경 없는 이슈, history.pushState 뒤로가기 이슈

location.href = '이동할 URL'; javascript 에서 location.href를 하게 되면 명시한 URL로 이동을 하고 history.length가 1 증가하게 된다. location.href를 사용하였는데 history.length가 변경이 없는 경우가 있는데 사용자의 action을 통해서 호출되는게 아닌 경우에는 history.length가 변경이 되지 않는다. controller @RequestMapping(value = "/history", method = RequestMethod.GET) public String history() throws Exception { return "history.html"; } @RequestMapping(value = "/history2", m..