Using Potree from code written in TypeScript 1

Intro

In this time, I will try loading point cloud data by Potree.

potree/potree: WebGL point cloud viewer for large datasets - GitHub

Because I want to use TypeScript in my project, I will start by using Potree from code written in TypeScript.
I will use Express for the server-side code.

Sample project

potree-sample - GitHub

Building Potree

Because Potree isn't officially published on npm, so I have to build it myself.
To do this, I clone the repository and execute "npm install" and "npm run build".

After the build is complete, I will copy three folders from the directory into my project.

potree          <-the root directory of the Potree repository
    Ｌbuild     <-build files
    Ｌlibs      <-dependencies
    Ｌresources <-sample point cloud data

Adding d.ts

To use Potree from TypeScript code, I should create a type definition file.

For now, I'm not defining the complete types, but only defining the variables and functions that I will use in this time.

ts/types/potree/index.d.ts

namespace Potree {
    const PointSizeType = {
        FIXED: 0,
        ATTENUATED: 1,
        ADAPTIVE: 2
    };
    const PointShape = {
        SQUARE: 0,
        CIRCLE: 1,
        PARABOLOID: 2
    };

    class Viewer {
        scene: Scene;
        constructor(element: HTMLElement);

        setPointBudget(budget: number): void;
        loadPointCloud(path: string, name: string, callback?: (e: PointCloudEventVariable) => void): void;
        setEDLEnabled(enabled: boolean): void;
        setFOV(fov: number): void;
        setBackground(color: string): void;
        fitToScreen(): void;
        loadSettingsFromURL(): void;
    }

    class PointCloudEventVariable {
        pointcloud: PointCloud;
    }
    class PointCloud {
        position: THREE.Vector3;
        scale: THREE.Vector3;
        material: PointCloudMaterial;
    }
    class Scene {
        addPointCloud(pointcloud: PointCloud): void;
    }
    class PointCloudMaterial {
        size: number;
        pointSizeType: PointSizeType;
        shape: PointShape;
    }
    function loadPointCloud(
        path: string,
        name: string,
        callback: (e: PointCloudEventVariable) => void
    ): void;
}

Because the Potree script files are loaded as external scripts, I can't use "import" like "import * as Potree from 'potree'".

Also, I can't write like "Viewer()" directly, I have to call it with "Potree." added, like "Potree.Viewer()".

Loading point cloud data

Potree can load a laz file.
But I have to convert it by PotreeConverter first.

I will get a laz file from 静岡県 - 掛川城オープンデータ化プロジェクト - データセット.

After finishing converting it, I can load it like below.

potreeAccessor.ts

export class PotreeAccessor {
    private viewer: Potree.Viewer;
    private scene: (Potree.Scene|null) = null;

    public constructor() {
        this.viewer = new Potree.Viewer(document.getElementById("potree_render_area") as HTMLElement);
        this.viewer.setEDLEnabled(false);
        this.viewer.setFOV(60);
        this.viewer.setPointBudget(1_000_000);
        this.viewer.loadSettingsFromURL();
        this.viewer.setBackground("skybox");
        Potree.loadPointCloud("./resources/PotreeData/metadata.json", "KakegawaCastle", e => {
            this.scene = this.viewer.scene;
            const pointcloud = e.pointcloud;

            const material = pointcloud.material;
            material.size = 1;
            material.pointSizeType = Potree.PointSizeType.ADAPTIVE;
            material.shape = Potree.PointShape.CIRCLE;

            this.scene.addPointCloud(pointcloud);
            this.viewer.fitToScreen();
        });
    }
}

Blog