8:00 – 4:00 SR
- DB Backups
- Breaking out models from the scene. Figuring out what parts of THREE.js were needed to work took a bit of time but the results are good.
- Had a lot of trouble with “this” today. The lesson learned is that when a locally declared function is called from outside the class, there is no “this”. To get that to work you have to have the function AND the variable referenced in the prototype. If the variable is a reference, then it appears that you can get away with declaring it locally, but what really seems to be happening is that the same reference is being shared “globally” across all instances. If the variable is declared in the prototype, it’s unique. Here’s all of WebGLComponent. Note that mesh and dprintArray are declared in the prototype:
YUI.add('WebGLComponent', function (Y) {
"use strict";
// handy constants and shortcuts used in the module
var _LANG = Y.Lang;
var _NAME = 'WebGLComponent';
// private variables
// private function predefinitions. We can "publish" them at the end of this object
var _initializer;
var _initModel;
var _setPosition;
var _setScale;
var _update;
var _dprint;
var _dshow;
// private function definitions
/* The initializer method has several tasks. First, it should set any properties that need to be
initialized to objects or arrays. Then it will publish all the events this class will produce.
the cfg object is an arbitrary object such as {myValue:321, foo:'bar'} */
_initializer = function (cfg) {
//Y.log("--->The following config object was passed into the RemoteDataChart initializer.'"+cfg.myValue+"'");
this.dprintArray = new Array(100);
this.dprintArray.length = 0;
if (cfg.hasOwnProperty('objName')) {
this.set('objName', cfg.objName);
}
if (cfg.hasOwnProperty('timeScalar')) {
this.set('timeScalar', cfg.timeScalar);
}
this.initModel();
};
_initModel = function () {
var geometry = new THREE.CubeGeometry(1, 1, 1);
var material = new THREE.MeshPhongMaterial({color: 0xFFFFFF});
var mesh = new THREE.Mesh(geometry, material);
this.set('object3d', mesh);
this.mesh = mesh;
};
// setPosition - move the object to a new position
_setPosition = function (x, y, z) {
if (this.mesh) {
this.mesh.position.set(x, y, z);
}
};
//setScale - scale the object
_setScale = function (x, y, z) {
if (this.mesh) {
this.mesh.scale.set(x, y, z);
}
};
_update = function (elapsed) {
var rate = this.get('timeScalar');
var angle;
if (this.mesh) {
this.mesh.rotation.x += rate * elapsed;
this.mesh.rotation.y += rate * elapsed;
this.mesh.rotation.z += rate * elapsed;
angle = this.mesh.rotation.x;
this.dprint("angle = "+angle.toFixed(2));
}
};
_dprint = function(str) {
this.dprintArray.push(this.get('objName')+": "+str);
};
_dshow = function(dpa) {
var i;
for(i =0; i < this.dprintArray.length; i++){
dpa.push(this.dprintArray.shift());
}
this.dprintArray.length = 0;
};
// publish the global prototype
Y.WebGLComponent = Y.Base.create(
_NAME, // the name of this module (for debugging
Y.Base, // the class we are extending (can be Widget too)
[], // any extensions that we want to properties or methods (e.g. ArrayList)
// Instance members are the properties and methods that go into the class prototype, those that
// each instance will get a copy and usually need to be references by 'this'
{
// prototype variables
mesh: null,
dprintArray: null,
// prototype methods
initializer: _initializer,
initModel: _initModel,
update: _update,
setPosition: _setPosition,
setScale: _setScale,
dprint: _dprint,
dshow: _dshow
},
// Attributes - accessed through this.get('attrName') and this.set('attrName', value).
// Note that we can do "type" checking here with validators
{
ATTRS: {
timeScalar:{
value: 1.0
},
objName:{
value: "unset"
},
object3d:{
value: null
}
}
}
);
}, '0.1', {
requires: ['base-build', 'node', 'event'],
skinnable: false
});
viztales 
You must be logged in to post a comment.