Uncaught TypeError: Cannot read property 'camera' of undefine

Help & Support
#1

Am getting an Uncaught TypeError: Cannot read property ‘camera’ of undefined

sample link of project: https://playcanvas.com/editor/scene/1175698

var Button = pc.createScript('button');

Button.attributes.add('imageEntity', {type: 'entity', description: 'image element'});
Button.attributes.add('cameraEntity', {type: 'entity', description: 'camera'});
//initialize
Button.prototype.initialize = function() {
    
    var scale = new pc.Vec3(0, 0, 0);
    
    this.imageEntity = false;    
    this.entity.button.on('click', function(event) {
        this.imageEntity = true;
        this.cameraEntity.camera.worldToScreen(this.worldObject.getPosition(), scale);
        
    });
    
};

Button.prototype.closeimage = function() {
  
    this.imageEntity.tween(this.imageEntity.getLocalPosition()).to(new pc.Vec3(3, 3, 3), 1.0, pc.SineOut).start();
    
};

Button.prototype.findCamera = function() {
    
    this.camera = this.app.root.findByName('Camera');
    this.cameraEntity.camera.clearColor = this.BG_color;
    
};
#2

this.cameraEntity is null. Have you assigned a camera entity to the script attribute in the Editor? Did you mean to do the following instead?

Button.prototype.findCamera = function() {
    
    this.camera = this.app.root.findByName('Camera');
    this.camera.camera.clearColor = this.BG_color;
    
};
#3

Thanks for replying @yaustar
Yes I have assigned the camera entity to the script attribute in the Editor as well.

Also the on(‘click’) is not working.

I’ve just tried this.camera.camera.clearColor = this.BG_color; But it seems its giving the same error of camera undefined.

#4

Can you share the project please?

Edit: Looks like you are missing the this scope in on click callback:

    this.entity.button.on('click', function(event) {
        this.imageEntity = true;
        this.cameraEntity.camera.worldToScreen(this.worldObject.getPosition(), scale);
        
    }, this); // Made the change to add `this` scope
#5

I’ve given the link in the first question itself as sample link of project :…

#6

Looking at the project, there are two main issues so far:

  1. The this scope issue that I explained here: Uncaught TypeError: Cannot read property 'camera' of undefine - #4 by yaustar
  2. this.worldObject is not defined anywhere in the script

I’ve fixed both of this issues here: https://playcanvas.com/editor/scene/1194397

There are other issues but I’m not sure about the intention/logic of the script so I leave them to you.

#7

Thank you so much @yaustar .

I just wanted to make the Image appear as 2d element, when the user clicks the button, hence used this.cameraEntity.camera.worldToScreen(this.worldObject.getPosition(), scale); but it seems the on click funtction itself isn’t working.

#8

What are you expecting this code to do as right now, it doesn’t do anything :sweat_smile:

#9

Am a newbie, sorry.

#10

I’ve changed the project a bit to reflect what you said about the image entity being turned on/off:
https://playcanvas.com/editor/scene/1194397