Loads point clouds using Potree
For A-Frame.
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. | 1 |
minimumNodePixelSize | Pixel size of a point within a node. The lower the more points will be shown. | 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.
Property | Description |
---|---|
model-loaded | The point cloud had been loaded into the scene |
model-error | The point cloud could not be loaded loading |
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>
<a-entity potree-loader="
src: https://cdn.rawgit.com/potree/potree/develop/pointclouds/lion_takanawa;
pointBudget: 1;
pointSize: 1;
pointColorType: rgb;
minimumNodePixelSize: 50;
"
position="-1 -1 -5"
rotation="-85 0 0"
></a-entity>
</a-scene>
</body>
Install via npm:
npm install aframe-potree-loader-component
Then require and use.
require('aframe');
require('aframe-potree-loader-component');
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.