EASEL.js

canvas

loader / xyz

What this shows

Parse an XYZ point-cloud helix with XYZLoader and spin it as a centered Points object.

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

Differences from three.js

  • EASEL PointsMaterial.size is an integer pixel radius without distance attenuation, so the 0.1 world-unit point size becomes a fixed 1-pixel radius.
  • Points are drawn as aliased square pixels because EASEL has no antialiasing.
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.XYZLoader().parse(helixText);
geometry.center();

const vertexColors = geometry.hasAttribute("color") === true;
const material = new EASEL.PointsMaterial({ size: 1, vertexColors });
const points = new EASEL.Points(geometry, material);

scene.add(points);

const delta = timer.update().delta;
points.rotation.x += delta * 0.2;
points.rotation.y += delta * 0.5;
renderer.prepare(scene, camera);
renderer.render(scene, camera);