How to use PCDLoader under Vue.js syntax?

I just followed the sample codehere and convert this example into Vue.js syntax.

My code is here.

However, the debug info shows
TypeError: Cannot read property ‘scene’ of undefined
in PCDLoader.

It seems that PCDLoader needs a global variable ‘scene’ to work correctly.
However, I only wanna declare it inside one component of Vue.js.
How can I fix this issue?

The runtime errors occurs in your onLoad callback function. If you want to use this inside the callback, use an arrow function. Remember that an arrow function does not have its own this. The this value of the enclosing lexical scope is used which allows a valid access to scene.

loader.load('https://raw.githubusercontent.com/mrdoob/three.js/4b18dbe78bec6067cd98e66539efe1b157f5635f/examples/models/pcd/ascii/simple.pcd', (points) => {
    this.scene.add(points)
    var center = points.geometry.boundingSphere.center
    this.controls.target.set(center.x, center.y, center.z)
    this.controls.update()
})

@Mugen87 Thanks for your kind reply.

I pre-assign this to variable by:
var self = this

Then,

self.scene.add(points)
          var center = points.geometry.boundingSphere.center
          self.controls.target.set(center.x, center.y, center.z)
          self.controls.update()

I use PCDLoader in My Vue(ES6) project,and followed the sample codehere ,but it error.
Cannot read property ‘1’ of null.
PCDheader.data=result2[1]
I put my .pcd file in ‘public’

Can you please share your PCD file in this topic?

thank you for your kind reply…I’ve found the reason,I wrote the reference path of the file wrong,You can’t use ‘public / person. PCD’ in the public folder and change it to ‘person. PCD’. That’s OK

1 Like