[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의 `<canvas>` 요소와 WebGL을 사용하여 복잡한 3D 그래픽을 렌더링할 수 있습니다.

 

3. Point Cloud 데이터를 Three.js로 시각화하기

아래는 byte 형식의 Point Cloud 데이터를 웹에서 시각화하는 소스 코드입니다

 

kotlin

fun byteArrayToPcdDataFloat(byteArray: ByteArray): FloatArray {
    // ByteArray 크기는 3 * 4 = 12의 배수여야 합니다. (각 좌표는 Float로 표현되므로 4 바이트)
    var floatList = ArrayList<Float>()
    for (i in 0 until byteArray.size / 24) {
        var x = 0.0f
        var y = 0.0f
        var z = 0.0f

        try {
            x = ByteBuffer.wrap(byteArray, i*24 + 4, 4).order(ByteOrder.LITTLE_ENDIAN).float
            y = ByteBuffer.wrap(byteArray, i*24 + 8, 4).order(ByteOrder.LITTLE_ENDIAN).float
            z = ByteBuffer.wrap(byteArray, i*24 + 12, 4).order(ByteOrder.LITTLE_ENDIAN).float
            //z = ByteBuffer.wrap(byteArray, i*24 + 16, 4).order(ByteOrder.LITTLE_ENDIAN).float
        } catch (e: Exception) {
            e.printStackTrace()
        }

        floatList.add(x)
        floatList.add(y)
        floatList.add(z)
    }

    return floatList.toFloatArray()
}

 

javascript

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script type="importmap">
    {
      "imports": {
        "three": "https://cdn.jsdelivr.net/npm/three@0.166.1/build/three.module.js",
        "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.166.1/examples/jsm/"
      }
    }
</script>
<script type="module">
    import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

    // Create the scene and a camera
    var scene = new THREE.Scene();
    var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 7000);
    //camera.position.z = 1;

    // Create the renderer
    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    // OrbitControls 추가 (카메라 컨트롤을 위해)
    const controls = new OrbitControls(camera, renderer.domElement);

    // Function to create point cloud from Float32Array
    function createPointCloud(float32Array) {
        // Create geometry
        var geometry = new THREE.BufferGeometry();
        geometry.setAttribute('position', new THREE.Float32BufferAttribute(float32Array, 3));

        // Create material
        const material = new THREE.PointsMaterial({ color: 0x888888, size: 10 });

        // Create the point cloud
        var points = new THREE.Points(geometry, material);
        scene.add(points);

        // 포인트 클라우드 중심 계산 및 카메라 위치 조정
        const center = new THREE.Vector3();
        geometry.computeBoundingBox();
        geometry.boundingBox.getCenter(center);
        points.position.sub(center);
        camera.position.set(center.x, center.y, center.z + 1000); // 중심으로부터 뒤로 물러난 위치에 카메라 설정
        camera.lookAt(center);


        // Animation loop
        function animate() {
            requestAnimationFrame(animate);
            controls.update();
            renderer.render(scene, camera);
        }

        animate();

        // 윈도우 크기 변경에 따른 반응형 처리
        window.addEventListener('resize', () => {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize(window.innerWidth, window.innerHeight);
        });
    }

    var xhr = new XMLHttpRequest();
    xhr.open('GET', '/getPtcImgData', true);

    xhr.onload = function (e) {
        if (xhr.status === 200) {
            var res = xhr.response;
            var arrayBuffer = res.replaceAll("[", "").replaceAll("]", "").split(',');

            let newArr = arrayBuffer.map((value, index) => {
                if (isNaN(value)) {
                    console.log("isNaN");
                    return undefined;
                }
                return value;
            })
            var float32Array = new Float32Array(newArr);
            createPointCloud(float32Array);
        }
    }

    xhr.send()
</script>

이와 같이 Three.js와 Point Cloud 데이터를 사용하여 웹에서 3D 이미지를 시각화할 수 있습니다. 이를 통해 보다 생동감 있는 웹 경험을 제공할 수 있습니다.