point cloud with colormap

[sbonaretti]

Hi,

I am new to pythreejs. I am trying to render a point cloud with a colormap. I am looking at the few available examples in pythreejs and I am trying to translate from the examples in threejs, but I have two main issues:

1. My points are rendered as squares instead of spheres. Any suggestions on why this happens? Here is my code:

from pythreejs import *
# --points----------------------
ptsCoord = np.array([[-1.0, -1.0,  0.0],
                     [ 1.0, -1.0,  0.0],
                     [ 1.0,  1.0,  0.0],
                    ], dtype=np.float32)
pts = BufferAttribute(
      array=ptsCoord,
      )
geometry = BufferGeometry(
           attributes={'position': pts
                      })

material = PointsMaterial(color='red', 
                          size=1)
pointCloud = Points(
             geometry = geometry, 
             material = material
             )

# --rendering----------------------
c = PerspectiveCamera(
    position=[0, 5, 5], 
    up=[0, 1, 0],
    children=[DirectionalLight(color='white', position=[3, 5, 1], intensity=0.5)])

scene = Scene(
        children=[pointCloud, c, AmbientLight(color='#777777')])

renderer = Renderer(camera=c, 
                    scene=scene, 
                    controls=[OrbitControls(controlling=c)])
display(renderer)

2. I am trying to associate a different color to a each point, similarly to what done in this example: https://github.com/mrdoob/three.js/blob/master/examples/webgl_geometry_colors_lookuptable.html (although I want to render a point cloud, not a mesh). How do I instantiate a lut in pythreejs? I get module 'pythreejs.pythreejs' has no attribute 'Lut'. Any suggestions on how to implement this?

Thanks a lot!

[vidartf]

1. The example you link in pt 2 also has square points. What you probably want is to give it a texture for the map property of the material. E.g. something disc shaped.

2. The Lut code is part of the example, and is available here: https://github.com/mrdoob/three.js/blob/master/examples/js/math/Lut.js . It is just a utility for builing a vertex attribute called 'color', as used here:

geometry.addAttribute( 'color', new THREE.BufferAttribute( new Float32Array( lutColors ), 3 ) );

If you are using a BufferGeometry I would use the examples for that on how to add an attribute, and add an attribute color from e.g. a numpy array that you fill with the wanted colors.

Hope this helps!

[vidartf]

Closing as answered. If you have any remaining questions, feel free to keep commenting!

[nlgranger]

For those looking to integrate the javascript line above in python, here is how to do it:

def pcl_plot(pts, colors):
    pts = BufferAttribute(array=np.asarray(pts, dtype=np.float32))
    colors = BufferAttribute(array=np.asarray(colors, dtype=np.float32))
    geometry = BufferGeometry(attributes={'position': pts, 'color': colors})
    material = PointsMaterial(vertexColors='VertexColors', size=0.1)
    pcl = Points(
        geometry=geometry,
        material=material)
    return pcl