Rendering OBJ and CPD issues

I managed to render a OBJ (exported from a IFC) by adding some lights, but still wondering if there’s a proper light configuration to uniformly light the scene or I might be missing some color information.

Here you can see how the model is rendered in an online viewer vs my script.

On the other hand, I’m still unable to see any of my PCD cloud points (exported from XYZ), even despite of the lights. Not sure if it might be some incompatibility issue, but I can correctly render the PCD in other 3rd party tools.

Next you can find an html file of my tests, one of my ifc models (and the obj export) and a reduced PCD. Any tip in the right direction would be much appreciated.

tests.html (5.0 KB)
Proof of concept - Wall.ifc (20.0 KB)
Proof of concept - Wall.mtl (363 Bytes)
Proof of concept - Wall.obj (4.3 KB)


The problem is how the FIELDS value is defined in your PCD file. It looks like so:

FIELDS Scalar_field_#3 Scalar_field_#2 Scalar_field x y z _

Normally the loader expects e.g. this pattern:

FIELDS x y z

Can you please verify first if your PCD file actually conforms to the standard? E.g. # is intended to mark a comment. I’m not sure it’s valid to use it in field identifiers.

Thanks @Mugen87 for the quick response. I’m kind of noob so couldn’t really tell wether or not this is standard format. I got the pcd file exporting a .xyz source with Cloud Compare. The xyz rows look like this.-

2.867840 -8.631088 -1.587943 -5.274897 2.828050 1.904140

Any other tool you would recommend to export to pcd?

I only have found xyz2pcd which is a small wrapper around the PCL library.

Thanks @Mugen87, I was aware of that one but never managed to get it work, will give it another try just in case.

Just in case someone might find it useful:

  • Regarding the cloud point, I just manually parsed my .xyz and render it. Looks something like this.-

    var geometry = new THREE.BufferGeometry();
    geometry.setAttribute( 'position', new THREE.Float32BufferAttribute( positions, 3 ) ); 
    geometry.setAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3 ) );
    var material = new THREE.PointsMaterial( { size: 1, vertexColors: true } );
    points = new THREE.Points( geometry, material );
    scene.add( points );
  • I managed to see my model just playing around with the lights and the scale.-

    sceneObjloader.load(sceneObj, function (obj) {
          obj.traverse( function (child) {
              if ( child instanceof THREE.Mesh ) {
          model = obj;
      }, undefined, function (error) {
    var light = new THREE.HemisphereLight( 0xffffff, 0x444444, 1.0 );
    scene.add( light );
1 Like