Unable to load a pcd file using a get request from node server inside inside javascript code using threejs

Questions
1

I am trying to load a sample pcd file from my server to load it in scene inside 3d canvas in threejs . I have a get request which reads the pcd file and sends it.

const express = require('express')
const fs = require('fs')
const router = new express.Router()

router.get('/api/pcd', async (req, res) => {
  try {
    try {
      let _path = 'simple.pcd'
      if (fs.existsSync(_path)) {
        fs.readFile(_path, 'utf8', (err, data) => {

          res.send(data)
        })
      }
    } catch (e) {
      console.log('error')
    }
  } catch (e) {
    res.status(500).send(e)
  }
})

module.exports = router

Inside the javascript code using pcd loader tried to load the point cloud inside the scene.

var self = this
var loader = new THREE.PCDLoader()
      // load a resource
      loader.load(
        'http://localhost:8081/api/pcd',
        function(mesh) {
          self.scene.add(mesh)
          var center = mesh.geometry.boundingSphere.center
          console.log(center)

          self.controls.target.set(center.x, center.y, center.z)
          self.controls.update()
        },
        function(xhr) {
          console.log((xhr.loaded / xhr.total) * 100 + '% loaded')
        },
        function(error) {
          console.log(error)
        }
      )

But this is the error which is coming up. please help.

TypeError: geometry.setAttribute is not a function

 at THREE.PCDLoader.parse (PCDLoader.js:361)

 at Object.onLoad (PCDLoader.js:32)

 at XMLHttpRequest.<anonymous> (three.js:34275)

This the code used as reference https://github.com/mrdoob/three.js/blob/79edf22a345079dc6cf5d8c6ad38ee22e9edab3c/examples/webgl_loader_pcd.html

This is the pcd file https://github.com/mrdoob/three.js/blob/79edf22a345079dc6cf5d8c6ad38ee22e9edab3c/examples/models/pcd/ascii/simple.pcd

I tried this with simple.pcd inside the public folder, and this program is inside public/umd folder, still am getting the same error. geometry.setAttribute

var loader = new THREE.PCDLoader()
      // load a resource
      loader.load(
        'simple.pcd',
        function(mesh) {
          self.scene.add(mesh)
          var center = mesh.geometry.boundingSphere.center
          console.log(center)

          self.controls.target.set(center.x, center.y, center.z)
          self.controls.update()
        },
        function(xhr) {
          console.log((xhr.loaded / xhr.total) * 100 + '% loaded')
        },
        function(error) {
          console.log(error)
        }
      )
2

Do you mind sharing your express app as a GitHub repository?

1 Like
3

GitHub - super21z/express_pcd this is my express app.

i tried with this url i saw from other thread still dint work :frowning:
https://raw.githubusercontent.com/mrdoob/three.js/4b18dbe78bec6067cd98e66539efe1b157f5635f/examples/models/pcd/ascii/simple.pcd

var loader = new THREE.PCDLoader()
      // load a resource
      loader.load(
     'https://raw.githubusercontent.com/mrdoob/three.js/4b18dbe78bec6067cd98e66539efe1b157f5635f/examples/models/pcd/ascii/simple.pcd',
        function(mesh) {
          self.scene.add(mesh)
          var center = mesh.geometry.boundingSphere.center
          console.log(center)

          self.controls.target.set(center.x, center.y, center.z)
          self.controls.update()
        },
        function(xhr) {
          console.log((xhr.loaded / xhr.total) * 100 + '% loaded')
        },
        function(error) {
          console.log(error)
        }
      )

for this im getting

Infinity% loaded
2urdf-viewer-element.js:355 TypeError: geometry.setAttribute is not a function
    at THREE.PCDLoader.parse (PCDLoader.js:361)
    at Object.onLoad (PCDLoader.js:32)
    at XMLHttpRequest.<anonymous> (three.js:34275)
5

test1
test1543×612 69.9 KB

it loads it when im using get request from my express app and after 100 % im getting error. im new to three and nodejs sorry if im asking stupid questions.

6

Can you please ensure that the version of PCDLoader and three.js are from the same release? I realize now that this could be the root cause of your problem. BufferGeometry.setAttribute() was introduced with r110. If you use PCDLoader from this release (or newer) but with an older three.js version, this exact runtime error will occur.

1 Like
7

Hi mugen , i used new version of three.js and it worked but my express app is still not able to load the file.

test3
test3519×507 86.9 KB

var loader = new THREE.PCDLoader()
      // load a resource
      loader.load(
        // resource URL
        'http://localhost:8081/api/pcd',
        // called when the resource is loaded
        function(mesh) {
          console.log(mesh)

          self.scene.add(mesh)
          var center = mesh.geometry.boundingSphere.center
          console.log(center)

          self.controls.target.set(center.x, center.y, center.z)
          self.controls.update()
        },
        // called when loading is in progresses
        function(xhr) {
          console.log((xhr.loaded / xhr.total) * 100 + '% loaded')
        },
        // called when loading has errors
        function(error) {
          console.log(error)
        }
      )

const express = require('express')
const fs = require('fs')
const router = new express.Router()

router.get('/api/pcd', async (req, res) => {
  try {
    try {
      let _path = 'Zaghetto.pcd'
      if (fs.existsSync(_path)) {
        fs.readFile(_path, 'utf8', (err, data) => {
          console.log('hello')

          console.log(data)

          res.send(data)
        })
      }
    } catch (e) {
      console.log('error')
    }
  } catch (e) {
    res.status(500).send(e)
  }
})

module.exports = router

How can i fix this.

8

Warnings like .addAttribute() has been renamed to .setAttribute() means there is still a version mismatch. Please ensure that no such warnings are logged like in the official PCDLoader demo:

https://threejs.org/examples/webgl_loader_pcd

1 Like