Points as customLayerData

[JuliensLab]

Hi there,

Fantastic library! Thank you for this detailed work and documentation.

I'm trying to use Points instead of Spheres in your Custom Layer API (found here: https://github.com/vasturiano/globe.gl/blob/master/example/custom-layer/index.html).

I am replacing the original code (pasted here for convenience):

  .customLayerData(gData)
  .customThreeObject(d => new THREE.Mesh(
    new THREE.SphereBufferGeometry(d.radius),
    new THREE.MeshLambertMaterial({ color: d.color })
  ))
  .customThreeObjectUpdate((obj, d) => {
    Object.assign(obj.position, world.getCoords(d.lat, d.lng, d.alt));
  });

(function moveSpheres() {
  gData.forEach(d => d.lat += 0.2);
  world.customLayerData(world.customLayerData());
  requestAnimationFrame(moveSpheres);
})();

by my modified code:

  .customLayerData(gData)
  .customThreeObject(d => new THREE.Points(
    new THREE.BufferGeometry(),
    new THREE.PointsMaterial({ color: d.color, size: 100 })
  ))
  .customThreeObjectUpdate((obj, d) => {
    Object.assign(obj.position, world.getCoords(d.lat, d.lng, d.alt));
  });

(function moveSpheres() {
  gData.forEach(d => d.lat += 0.2);
  world.customLayerData(world.customLayerData());
  requestAnimationFrame(moveSpheres);
})();

The original code works perfect: the spheres are visible where expected. My modified code doesn't yield points. Nothing appears. I tried to change the size of the point. I checked as reference:

• https://threejs.org/docs/#api/en/objects/Points
• https://threejs.org/docs/#api/en/materials/PointsMaterial

So far, no success. I am wondering if you know why this is.

Thank you!

[vasturiano]

@JuliensLab thanks for reaching out.

It appears you're not assigning any vertices to your points geometry. That may be the reason why nothing is showing.

See this ThreeJs example: https://threejs.org/docs/#api/en/materials/PointsMaterial

Specifically this line:

geometry.setAttribute( 'position', new THREE.Float32BufferAttribute( vertices, 3 ) );