EASEL.js

canvas

interactive / raycasting / points

What this shows

Three 12,800-point clouds (non-indexed, indexed, and indexed with a draw group) circle past the camera while the pointer raycasts them and drops shrinking red spheres at each hit.

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

Differences from three.js

  • EASEL point size is an integer pixel radius without size attenuation, so the 0.05-unit points (under one pixel wide in three.js at this size) become 1-pixel-radius discs, about 3 pixels wide, that do not scale with distance.
  • EASEL Geometry has no addGroup, so the third cloud is indexed like the second and skips the draw-group call.
  • Points and spheres are rasterized on the CPU without anti-aliasing.
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.Geometry();
geometry.setAttribute("position", new EASEL.Attribute(positions, 3));
geometry.setAttribute("color", new EASEL.Attribute(colors, 3));
const cloud = new EASEL.Points(
  geometry,
  new EASEL.PointsMaterial({ size: 1, vertexColors: true }),
);

const raycaster = new EASEL.Raycaster();

raycaster.pointsThreshold = 0.1;

camera.applyMatrix4(rotateY);
camera.updateMatrixWorld();

raycaster.setFromCamera(pointer, camera);
const hit = raycaster.intersectObjects([cloud], false)[0];
if (hit !== undefined) sphere.position.copy(hit.point);

renderer.prepare(scene, camera);
renderer.render(scene, camera);