How to use in babylon.js "variables" and "this"?

[hulahula]

Hello every body  I have  question about using variables and "this". I am  autodidact and I really like code and  last 2 week I am  trying make "simple" game but  I am stuck. Here is my question : 

If I create js file and make there function:

function Box(scene){
this.scene = scene;

this.box = BABYLON.Mesh.CreateBox("box", 0.32, this.scene);
this.boxMat = new BABYLON.StandardMaterial("mat",this.scene);
this.boxMat.diffuseColor = new BABYLON.Color3(10,1,1);
this.box.material = this.boxMat;

};

And I have other js file whit other function  which contains mesh like a sphere for example  and now I want to use "this.box.position.x " in function  where is  the sphere. Is it possible ? 

I tried  like function call() but it didn´t worked. I treid search in google  some exampels and without success.

 Sorry for my bad English.  Have a nice evening .

[Senglean]

Hello, sorry for my bad english too  

In javascript 'this' is referring to the current scope. Now to understand what a scope is, scope is the space between {  } , in your example the box mesh only exists in the Box function scope. 

I think you need better app structure in order to achieve things easily. Structure in javascript can be achieved in many ways. The following is one approach I use a lot. In this example both the sphere and box meshes belongs to the scope of MyApp and can be used from any prototype function of class MyApp. 

var MyApp = (function(){
    
    //constructor
    function MyApp(){

        this.box = this.createBox();
        this.sphere = this.createSphere();

    }
    
    MyApp.prototype.createBox = function(){
        
        this.box = //create mesh
      
    };
        
    MyApp.prototype.createSphere = function(){
      
        this.sphere = //create mesh
        
    };
    
    MyApp.prototype.anotherFunction = function(){
            
        //here you have both the box and spehere mesh
        
    }
    
    return MyApp; // returning the constructor
    
})();
        
        
        
// use the app as follows
        
        
var app = new MyApp();
        
app.anotherFunction();

 

 

 

[Spankied]

    var Scene = new BABYLON.Scene(engine);
    
    class Box {
        constructor (scene){

            this.scene = scene;

            this.box = BABYLON.MeshBuilder.CreateBox("box", {height: 2, width: 3, depth: 3}, this.scene);
            this.boxMat = new BABYLON.StandardMaterial("mat",this.scene);
            this.boxMat.diffuseColor = new BABYLON.Color3(10,1,1);
            this.box.material = this.boxMat;

            this.box.position.x += .2;

            console.log(this.box.position.x)
        }
    }

    new Box(Scene);

 

Here is how I would use this.box.position.x

https://www.babylonjs-playground.com/#WQ8M9K

 

Check the console.

 

[brianzinn]

Since it's in another JS file then you can't use "this" from the other file.  I have expanded a bit on the PG from Spankied.  Look at the mesh() "property", that's one way to get access to a "this.box" variable from another JS file - from the instance of the Box class.
https://www.babylonjs-playground.com/#WQ8M9K#1


 

[hulahula]

Thank you very much guys   @Senglean similar methode I use too but this look better. 

@brianzinn and if I use get mesh() function will be work  if i apply on mesh intersectsMesh() ? .

 

[brianzinn]

@Alenvei - Yes, so you could do this in the other JS file, which needs access to the box instance:

var sphereAndSquareIntesect = this.sphere.intersectsMesh(box.mesh)

The syntax from spankied looks better, but make sure ES2015 is okay for you, if you need to support older browsers; if you are not using something like babel (https://babeljs.io/), otherwise the syntax from senglean is more compatible with older browsers.

[hulahula]

Oh ok. Thank you very much @brianzinn It is very helpful for my project 

[Pryme8]

On 11/19/2017 at 8:11 PM, brianzinn said:

Since it's in another JS file then you can't use "this" from the other file.  

you can if you pass the scope, but you would need to give it a different namespace than 'this' because it can not be overwritten.

[hulahula]

can you please show me  @Pryme8 some example for my better understanding?

[Pryme8]

Sure thing.
https://playground.babylonjs.com/#M091VI

[brianzinn]

35 minutes ago, Pryme8 said:

would need to give it a different namespace than 'this' because it can not be overwritten

'this' can be overwritten on functions with bind (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_objects/Function/bind).  There's so much trickery in javascript and other ways to get 'this' from another file like inheritance or mixins, but trying to keep it simple

[hulahula]

Thank you very much @Pryme8 , @brianzinn, @Spankied and @Senglean. I learned  lot of from you  

 

[Pryme8]

43 minutes ago, brianzinn said:

'this' can be overwritten on functions with bind (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_objects/Function/bind).  There's so much trickery in javascript and other ways to get 'this' from another file like inheritance or mixins, but trying to keep it simple

yeah, but that is asking for trouble unless you have a reason to reset your scope chain, which might at some point be useful thanks for the info.