ThreeJS Points (Point Cloud) with Lighting using custom Shader Material

Questions
, ,
1

Coded using:

  • Using ThreeJS v0.130.1
  • Framework: Angular 12, but that’s not relevant to the issue.
  • Testing on Chrome browser.

I am building an application that gets more than 100K points. I use these points to render a THREE.Points object on the screen.

I found that default THREE.PointsMaterial does not support lighting (the points are visible with or without adding lights to the scene).

So I tried to implement a custom ShaderMaterial . But I could not find a way to add lighting to the rendered object.

Here is a sample of what my code is doing: Sample App on StackBlitz showing my current attempt In this code, I am using sample values for point cloud data, normals and color but everything else is similar to my actual application. I can see the 3D object, but need more proper lighting using normals.

I need help or guidance to implement the following:

  1. Add lighting to custom shader material. I have Googled and tried many things, no success so far.
  2. Using normals, show the effects of lighting (In this sample code, the normals are fixed to Y-axis direction, but I am calculating them based on some vector logic in actual application). So calculating normals is already done, but I want to use them to show light shine/shading effect in the custom shader material.

And in this sample, color attribute is set to fixed red color, but in actual application I am able to apply colors using UV range from a texture to color attribute.

Please advise how/if I can get lighting based on normals for Point Cloud. Thanks.

Note: I looked at this Stackoveflow question but it only deals with changing the alpha/transparency of points and not lighting.

2

Did you ever figure this out? Need something for a similar application. Have a colored 3D point cloud of a mountain and want to have a sun and moon changing the colors.

3

@pawan your color attribute is setting all points to the same color.

I am doing something very similar. The issue I am having is to get the color data from the point cloud I am loading then connecting it to every point being rendered.

@ianwatts I’ve posted something similar to this.