Typescript class problem (C# developers could help ;)
Hey there,
So I am having a problem with typescript. I am still a newb with TS so be gentle..
I have script "app.ts" like this :
And then I have a another script "box.ts" like this :
I have omitted a bunch of irrelevant code to keep the post short but if you would like to see the full code just say the word.
The problem :
The box I am instantiating works great and the Update method gets called every 30 ms but I get an error when I press left that says the mesh property is undefined. However when I access the mesh property from the app.ts script it works and is defined. So I am thinking the problem must be in "box.ts" at
I know this is a long shot but maybe there is someone here that can point me in the right direction. Typescript is very similar to C# so..
Thanks i advance for any sort of reply.
-Kobus
So I am having a problem with typescript. I am still a newb with TS so be gentle..
I have script "app.ts" like this :
function init ()
{
// Create box
var box = new Box();
box.AddToScene(scene);
}
init();And then I have a another script "box.ts" like this :
class Box {
keyboard;
mesh: THREE.Mesh;
constructor (){
// Set up input
this.keyboard = new THREEx.KeyboardState();
// Create mesh
this.mesh = new THREE.Mesh(
new THREE.BoxGeometry(1, 1, 1),
new THREE.MeshBasicMaterial({color: 0xff00ff})
);
// Initiate update loop
setInterval(this.Update, 30);
}
Update () {
if (this.keyboard.pressed("left"))
{
this.mesh.position.x -= 0.01;
}
}
public AddToScene (scene : THREE.Scene){
scene.add(this.mesh);
}
}I have omitted a bunch of irrelevant code to keep the post short but if you would like to see the full code just say the word.
The problem :
The box I am instantiating works great and the Update method gets called every 30 ms but I get an error when I press left that says the mesh property is undefined. However when I access the mesh property from the app.ts script it works and is defined. So I am thinking the problem must be in "box.ts" at
this.mesh.position.x -= 0.01;
I know this is a long shot but maybe there is someone here that can point me in the right direction. Typescript is very similar to C# so..
Thanks i advance for any sort of reply.
-Kobus
Comments
Been a while since I have used ThreeJS. AFIK (could be wrong) Mesh object does not have any transform attributes. You need to set it as a child of an Object3D.
Then you can adjust the position and rotations.
In plain JS it would look a bit like this
var obj = new THREE.Object3D();
obj.add(mesh)
obj.position.x +=0.001;
etc
Hope that helps
Maybe its a scoping issue? Hard to really diagnose without full sourcecode to play with.
@shanemarks Ive attached the full source to this post. Perhaps you can figure out whats going on ?
I don't know ThreeJS at all, but based on the snippets in the first post I'd expect mesh to be _ something_ addressable. The typescript seems correct. Hopefully @shanemarks has some more insight :)
var boxObject; function Box() { // Set up input this.keyboard = new THREEx.KeyboardState(); // Create mesh this.mesh = new THREE.Mesh(new THREE.BoxGeometry(1, 1, 1), new THREE.MeshBasicMaterial({ color: 0xff00ff })); boxObject = this.mesh; // Initiate update loop setInterval(this.Update, 30); } Box.prototype.Update = function () { if (this.keyboard.pressed("left")) { boxObject.position.x -= 0.01; //(boxObject.position.x - 0.01); // -= 0.01; } };Anyway I set up a simple project to try and locate the problem. Ive narrowed it down to some problem with setInterval();
This works :
// Box.ts \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ class Box { position: number = 0; constructor(){ this.position = 10; this.LogPosition(); } LogPosition (){ console.log(this.position); } } // App.ts \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ /// <reference path="Box.ts" /> var myInstance = new Box();but this gives a undefined :
// Box.ts \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ class Box { position: number = 0; constructor(){ this.position = 10; setInterval(this.LogPosition, 30); } LogPosition (){ console.log(this.position); } } // App.ts \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ /// <reference path="Box.ts" /> var myInstance = new Box();I solved your issue. It is indeed a scoping issue. This is quite a common problem inside javascript (and presumably typescript).
I edited the plain javascript to illustrate this.
Notice how I am creating a reference to "this" called "_this" and then referring to it in your setInterval function. This is because the value of "this" is referring to the closure and not the object you have defined. This article explains it better than I can:
http://javascriptplayground.com/blog/2012/04/javascript-variable-scope-this/
private Update = () => { }@shanemarks I think I understand whats happening but I will need to reread the link you posted again to make sure.
@petrc Thanks ! Its the first time ive seen anything like that would you mind explaining what that definition does that is different from the normal one. Is it simply a way to force the typescript compiler to transpile the TS into the way @shanemarks wrote it ?