Skip to content

mattrei/aframe-potree-loader-component

Repository files navigation

aframe-potree-loader-component

Version License

Loads point clouds using Potree

For A-Frame.

API

Properties

Property Description Default Value
src Url to the PointCloud files. Expects a cloud.json ''
pointSize Semantic size of a single point. The lower the more space is between the points, higher values result in low resolution objects. Has no performance impact. 1
minimumNodePixelSize Pixel size of a point within a node. The lower the more points will be shown per octree node. Has performance impact. 150
pointSizeType How to point adapts to the camera frustum. Either fixed, adaptive or adaptive
pointShape The shape of a single point. Either square, circle or sqaure
pointColorType Type of color of a single point in respect of the pointcloud. See for all possible values. 'rgb'

The initial position and rotation is specific for each point cloud and has to be set accordingly.

Scene Properties

Property Description Default Value
pointBudget Point Budget in millions of all pointclouds in your scene 1

Events

Property Description
model-loaded The point cloud had been loaded into the scene
model-error The point cloud could not be loaded loading

Notes on fidelity

Potree automatically adapts the point budget according to the underlying hardware, that said mobile devices are not so well suited for detailed point cloud representations.

Installation

Browser

Install and use by directly including the browser files:

<head>
  <title>My A-Frame Scene</title>
  <script src="https://aframe.io/releases/0.8.0/aframe.min.js"></script>
  <script src="https://unpkg.com/aframe-potree-loader-component/dist/aframe-potree-loader-component.min.js"></script>
</head>

<body>
  <a-scene potree-loader="pointBudget: 1;">
      <a-entity potree-loader="
        src: https://cdn.rawgit.com/potree/potree/develop/pointclouds/lion_takanawa;

        pointSize: 1;
        pointColorType: rgb;
        minimumNodePixelSize: 100;
        "
        position="-1 -1 -5"
        rotation="-85 0 0"
      ></a-entity>
  </a-scene>
</body>

npm

Install via npm:

npm install aframe-potree-loader-component

Then require and use.

require('aframe');
require('aframe-potree-loader-component');

Implementation notes

This is basically just a wrapper around PIX4D's three-potree-loader package. They did all the hard work (and saved myself lots of time) of extracting the core loading and rendering functionality of the Potree point cloud viewer. That's the spirit of open-source. We all build up on each other and adapt to certain needs, in that case point clouds within WebVR.