Best Way to display a points as small spheres on the screen

Help Developers
1

  • Objective: I have an large list of XYZ points I want to display on the screen. Ideally, I’d also be able to color the object color, but that’s more luxury than a need. I achieved this by simply extending MeasurementsExtension and making a custom method that sets the startPoint of the active measurement.

  • Issue: Not sure how to get the large plane layering to not show. Currently running this script shows the points and what seems like a blue circular blob at the bottom of the points, which makes it hard to see the points.

  • Current Approach:

export class CustomMeasurementExtension extends MeasurementsExtension {

  public async addPointData(point: Vector3, debug: boolean = false) {
   
/*The method is janky workaround to getting this point display functionality to work */
    if (debug){
      console.log("addPointData", point);
    }

    // Create a new measurement
    this._activeMeasurement = this.startMeasurement();

    if (!this._activeMeasurement) {
      throw new Error('Failed to create measurement');
    }

    this._activeMeasurement.isVisible = true;
    this._activeMeasurement.state = 1; // MeasurementState.DANGLING_START

    this._activeMeasurement?.startPoint.copy(point);
    this._activeMeasurement?.startNormal.set(0, 0, 1);
    await this._activeMeasurement?.update();



  }
2

Hi @Leul_Tesfaye

There’s no need to use a fake measurement just display points, although I appreciate the resourcefulness! :winking_spockle:

You can use the underlying functionality that the measurements use to render their gizmo directly. I’ve made this live example that shows how. The points are billboarded just like the ones the measurements use.

Let us know if you need more help

Cheers

1 Like