EASEL.js

canvas

loader / pcd

What this shows

Load a Point Cloud Data file with PCDLoader, center it, and orbit around its colored points.

Side by side with the three.js r186 original: webgl_loader_pcd.html

Differences from three.js

  • The default file is ascii/simple.pcd instead of binary/Zaghetto.pcd because EASEL's PCDLoader only parses ASCII PCD data.
  • The type selector is omitted; binary/Zaghetto.pcd, binary/Zaghetto_8bit.pcd, and binary_compressed/pcl_logo.pcd are binary PCD files that EASEL's PCDLoader cannot parse.
  • EASEL point size is an integer pixel radius, so the size slider is converted to a radius from the camera distance once per frame and clamps to at least one pixel; all points share that radius instead of attenuating individually.
EASEL (Canvas2D)
This example needs a canvas-capable browser.

Loading scene…

three.js r186 (WebGL)
This example needs a canvas-capable browser.

Loading scene…

Loading scene…

Key API excerpt

import * as EASEL from "@xsyetopz/easel";


const geometry = new EASEL.PCDLoader().parse(pcdText);
geometry.center();
geometry.rotateX(Math.PI);
const points = new EASEL.Points(
  geometry,
  new EASEL.PointsMaterial({ size: 1, vertexColors: true }),
);

scene.add(points);

const orbit = new EASEL.OrbitControls(camera, canvas);
orbit.minDistance = 0.5;
orbit.maxDistance = 10;