/**
* Created by Phil on 2/13/2015.
*/
///
///
///
///
module WebGLBaseClasses {
// The base class for objects that we will draw
export class ComponentBase {
typeString:string;
timeScalar:number;
objName:string;
calloutText:string;
toolTipText:string;
object3d:THREE.Mesh;
transformObject3d:THREE.Object3D;
localLight:THREE.PointLight;
webGLCanvas:CanvasBase;
canvasRGBATextArray:string[];
canvasTextFont:string;
canvasTextFontSize:number;
labelNode:any;
lineArray:any;
screenX:number;
screenY:number;
modelArray:any[];
diffuseHexColor:number;
isAnchor:boolean;
showHTMLLabels:boolean;
showCanvasLabels:boolean;
// setters/getters
getTypeString = ():string => {
return this.typeString;
};
setTimeScalar = (x:number):void => {
this.timeScalar = x;
};
getTimeScalar = ():number => {
return this.timeScalar;
};
setObjName = (x:string):void => {
this.objName = x;
};
getObjName = ():string => {
return this.objName;
};
setTooltipText = (x:string):void => {
this.toolTipText = x;
};
getTooltipText = ():string => {
return this.toolTipText;
};
setCalloutText = (x:string):void => {
this.calloutText = x;
};
getCalloutText = ():string => {
return this.calloutText;
};
setIsAnchor = (x:boolean):void => {
this.isAnchor = x;
};
getIsAnchor = ():boolean => {
return this.isAnchor;
};
setObject3d = (x:THREE.Mesh):void => {
this.object3d = x;
};
getObject3d = ():THREE.Mesh => {
return this.object3d;
};
setTransformObject3d = (x:THREE.Object3D):void => {
this.transformObject3d = x;
};
getTransformObject3d = ():THREE.Object3D => {
return this.transformObject3d;
};
setLocalLight = (x:THREE.PointLight):void => {
this.localLight = x;
};
getLocalLight = ():THREE.PointLight => {
return this.localLight;
};
setLabelNode = (x:any):void => {
this.labelNode = x;
};
getLabelNode = ():any => {
return this.labelNode;
};
setIsVisible = (x:boolean):void => {
this.getObject3d().visible = x;
};
getIsVisible = ():boolean => {
return this.getObject3d().visible;
};
setLineArray = (x:any[]):void => {
this.lineArray = x;
};
getLineArray = ():any[] => {
return this.lineArray;
};
setScreenX = (x:number):void => {
this.screenX = x;
};
getScreenX = ():number => {
return this.screenX;
};
setScreenY = (x:number):void => {
this.screenY = x;
};
getScreenY = ():number => {
return this.screenY;
};
setModelArray = (x:any[]):void => {
this.modelArray = x;
};
getModelArray = ():any[] => {
return this.modelArray;
};
setDiffuseHexColor = (x:number):void => {
this.diffuseHexColor = x;
};
getDiffuseHexColor = ():number => {
return this.diffuseHexColor;
};
setShowHTMLLabels = (x:boolean):void => {
this.showHTMLLabels = x;
};
getShowHTMLLabels = ():boolean => {
return this.showHTMLLabels;
};
setShowCanvasLabels = (x:boolean):void => {
this.showCanvasLabels = x;
};
getShowCanvasLabels = ():boolean => {
return this.showCanvasLabels;
};
setCanvasRGBATextArray = (x:string[]):void => {
this.canvasRGBATextArray = x;
};
getCanvasRGBATextArray = ():string[] => {
return this.canvasRGBATextArray;
};
setCanvasTextFont = (x:string):void => {
this.canvasTextFont = x;
};
getCanvasTextFont = ():string => {
return this.canvasTextFont;
};
setCanvasTextFontSize = (x:number):void => {
this.canvasTextFontSize = x;
};
getCanvasTextFontSize = ():number => {
return this.canvasTextFontSize;
};
setWebGLCanvas = (x:CanvasBase):void => {
this.webGLCanvas = x;
};
getWebGLCanvas = ():CanvasBase => {
return this.webGLCanvas;
};
// constructor
constructor() {
}
initializer = (cfg:any) => {
//Y.log("--->The following config object was passed into the RemoteDataChart initializer.'"+cfg.myValue+"'");
//Y.log(this.getTypeString()+": initializing");
if (cfg.hasOwnProperty('objName')) {
this.objName = cfg.objName;
this.toolTipText = "Tooltip for: " + cfg.objName;
}
if (cfg.hasOwnProperty('timeScalar')) {
this.timeScalar = cfg.timeScalar;
}
if (cfg.hasOwnProperty('diffuseHexColor')) {
this.diffuseHexColor = cfg.diffuseHexColor;
}
if (cfg.hasOwnProperty('showHTMLLabels')) {
this.showHTMLLabels = cfg.showHTMLLabels;
}
if (cfg.hasOwnProperty('showCanvasLabels')) {
this.showCanvasLabels = cfg.showCanvasLabels;
}
if (cfg.hasOwnProperty('canvasRGBATextArray')) {
this.canvasRGBATextArray = cfg.canvasRGBATextArray;
}
if (cfg.hasOwnProperty('object3D')) {
this.object3d = cfg.object3D;
}
if (cfg.hasOwnProperty('localLight')) {
this.localLight = cfg.localLight;
}
if (cfg.hasOwnProperty('tooltipText')) {
this.toolTipText = cfg.tooltipText;
}
if (cfg.hasOwnProperty('calloutText')) {
this.calloutText = cfg.calloutText;
}
this.transformObject3d = new THREE.Object3D();
// make a default model if needed.
if (!this.object3d) {
this.initModel();
}
if (this.calloutText === null) {
this.calloutText = this.objName;
}
if (this.toolTipText === null) {
this.toolTipText = this.objName;
}
// we know that the mesh has been set by now, but we want this to be done by all inheriting moduules
var o3d:THREE.Object3D = this.object3d;
o3d.userData = this;
o3d.name = this.objName;
o3d.matrixAutoUpdate = false;
var ll = this.localLight;
if (ll) {
o3d.add(ll);
}
this.modelArray = [];
};
initModel = ():void => {
var geometry = new THREE.CubeGeometry(1, 1, 1);
var material = new THREE.MeshPhongMaterial({color: this.getDiffuseHexColor()});
var mesh = new THREE.Mesh(geometry, material);
this.setObject3d(mesh);
};
public addModel = (model:ComponentBase):void => {
var wglc:CanvasBase = this.getWebGLCanvas();
model.setWebGLCanvas(wglc);
//model.addNodes(wglc.getTopNode());
var o3d:THREE.Object3D = model.getObject3d();
//var parentO3D = this.getObject3d();
var scene:THREE.Scene = this.getWebGLCanvas().getScene();
var m:ComponentBase[] = this.getModelArray();
if (scene && o3d) {
m.push(model);
scene.add(o3d);
}
};
public addLine = (material:THREE.LineBasicMaterial, tx:number, ty:number, tz:number):THREE.Line => {
var scene = this.getWebGLCanvas().getScene();
var o3d = this.getObject3d();
var pos:THREE.Vector3;
var line:THREE.Line = null;
var geometry:THREE.Geometry;
if (o3d && scene) {
var la = this.getLineArray();
if (la === null) {
la = [];
this.setLineArray(la);
}
pos = o3d.position;
geometry = new THREE.Geometry();
geometry.vertices.push(new THREE.Vector3(pos.x, pos.y, pos.z));
geometry.vertices.push(new THREE.Vector3(tx, ty, tz));
line = new THREE.Line(geometry, material);
la.push(line);
scene.add(line);
} else {
alert("WebGLComponent.addLine(): Unable to add line - scene or model is unset");
}
return line;
};
public checkModelName = (name:string):ComponentBase => {
var i:number;
var m:ComponentBase[];
var child:ComponentBase;
var result:ComponentBase;
if (this.getObjName() === name) {
return this;
} else {
m = this.getModelArray();
for (i = 0; i < m.length; i++) {
child = m[i];
result = child.checkModelName(name);
if (result) {
return result;
}
}
}
return null;
};
public checkModelUUid = (uuid:string):ComponentBase => {
var i:number;
var ma:ComponentBase[];
var child:ComponentBase;
var result:ComponentBase;
var o3d = this.getObject3d();
if (o3d.uuid === uuid) {
return this;
} else {
ma = this.getModelArray();
for (i = 0; i < ma.length; i++) {
child = ma[i];
result = child.checkModelUUid(uuid);
if (result) {
return result;
}
}
}
return null;
};
// setPosition - move the object to a new position
public setPosition = (x:number, y:number, z:number):void => {
var o3d = this.getTransformObject3d();
if (o3d) {
o3d.position.set(x, y, z);
}
};
//setScale - scale the object
public setScale = (x:number, y:number, z:number):void => {
var o3d = this.getTransformObject3d();
if (o3d) {
o3d.scale.set(x, y, z);
}
};
//setRotation - rotate the object
public setRotation = (x:number, y:number, z:number):void => {
var o3d = this.getTransformObject3d();
if (o3d) {
o3d.rotation.set(x, y, z, 'XYZ');
}
};
public dprintMatrix = (title:string, mat:THREE.Matrix4):void => {
var a:Float32Array = mat.elements;
var side:number = Math.round(Math.sqrt(a.length));
this.dprint(title);
var i:number;
var j:number;
var str:string;
for(i = 0; i < side; i++){
str = " ";
for(j = 0; j < side; j++){
str += a[i*side+j].toFixed(3)+" ";
}
this.dprint(str);
}
//this.dprint("mat side = "+side);
};
updateLinesBehavior = ():void =>{
var line:THREE.Line;
var vertices:THREE.Vector3[];
var i:number;
var linearray:THREE.Line[] = this.getLineArray();
var globalObj:THREE.Object3D = this.getObject3d();
if(linearray !== null){
for(i = 0; i < linearray.length; i++){
line = linearray[i];
vertices = line.geometry.vertices;
// update the line origin in global space.
vertices[0].x = globalObj.position.x;
vertices[0].y = globalObj.position.y;
vertices[0].z = globalObj.position.z;
line.geometry.verticesNeedUpdate = true;
}
}
};
updateChildrenBehavior = (dClock:number, elapsed:number):void => {
var modelArray:ComponentBase[] = this.getModelArray();
var i:number;
for(i = 0; i < modelArray.length; i++){
modelArray[i].behavior(dClock, elapsed); // send time and parent matrix to children
}
};
public behavior = (dClock:number, elapsed:number):void => {
var rate:number = this.getTimeScalar();
var localObj:THREE.Object3D = this.getTransformObject3d();
localObj.rotation.x += rate * dClock;
localObj.rotation.y += rate * dClock;
localObj.rotation.z += rate * dClock;
//localObj.position.x = Math.cos(rate * elapsed) * 2.0;
//localObj.position.z = Math.sin(rate * elapsed) * 2.0;
// handle lines from this object to other places
this.updateLinesBehavior();
// update Children
this.updateChildrenBehavior(dClock, elapsed);
};
public update = (parentMatrix:THREE.Matrix4):void => {
var worldFrameObj:THREE.Object3D = this.getObject3d();
var mat:THREE.Matrix4;
var localFrameObj:THREE.Object3D = this.getTransformObject3d();
localFrameObj.updateMatrix();
if (worldFrameObj) {
mat = new THREE.Matrix4();
mat.copy(localFrameObj.matrix);
//this.dprintMatrix("mat:",mat);
if(parentMatrix){
//this.dprintMatrix("localObj.matrix:",localFrameObj.matrix);
mat.multiplyMatrices(parentMatrix, localFrameObj.matrix);
//this.dprintMatrix("mat:",mat);
}
worldFrameObj.matrix.copy(mat);
worldFrameObj.matrix.decompose( worldFrameObj.position, worldFrameObj.quaternion, worldFrameObj.scale );
worldFrameObj.updateMatrix();
//this.dprintMatrix("mesh.matrix):",mesh.matrix);
}
//this.dprintMatrix("post updateMatrix:",mesh.matrix);
var i:number;
var model:ComponentBase[] = this.getModelArray();
// send the matrix containing all the transforms to the children
for(i = 0; i < model.length; i++){
model[i].update(worldFrameObj.matrix);
}
//this.dprint("model length = "+ m.length);
};
draw3D = (renderer:THREE.Renderer, scene:THREE.Scene):void => {
var mesh:THREE.Mesh = this.getObject3d();
var i:number;
var m:ComponentBase[] = this.getModelArray();
for(i = 0; i < m.length; i++){
m[i].draw3D (renderer, scene);
}
};
behavior2D = (overlayContext:CanvasRenderingContext2D):void => {
// default 2D behavior
var sx:number = this.getScreenX();
var sy:number = this.getScreenY();
var callout:string = this.getCalloutText();
var canvasHeight:number = overlayContext.canvas.height;
var use3D:boolean = this.getWebGLCanvas().getUse3D();
var fillString:string = "rgba(";
var carray:string[] = this.getCanvasRGBATextArray();
var i:number;
if (this.getShowCanvasLabels()) {
// uncomment to draw on the 2D canvas
/**/
if (!use3D) {
sy = canvasHeight - sy;
}
fillString += carray[0];
for (i = 1; i < carray.length; i++) {
fillString += ", " + carray[i];
}
fillString += ")";
overlayContext.font = this.getCanvasTextFont();
overlayContext.fillStyle = fillString;
overlayContext.fillText(callout, sx, sy);
}
/** TODO: Fix nodes so that HTML can be used
var topNode = this.getWebGLCanvas().getTopNode();
var clientHeight = this.getWebGLCanvas().getAdjHeight();
var lNode;
if (this.getShowHTMLLabels()) {
lNode = this.getLabelNode();
sx += topNode.getX();
if(!use3D) {
sy = topNode.getY() + clientHeight -sy;
}else {
sy += topNode.getY() + (clientHeight - canvasHeight);
}
lNode.setXY([sx, sy]);
}
/***/
};
drawLegend = (context:CanvasRenderingContext2D, x:number, y:number):void => {
var c:THREE.Color;
var r:number, g:number, b:number;
if (this.getObjName()) {
c = this.getObject3d().material.color;
context.fillStyle = 'rgba( 255, 255, 255, 1)'; // Set the letter color
context.fillText(this.getObjName(), x, y);
if (this.getWebGLCanvas().getSelectedModel() !== this) {
r = Math.round(c.r * 255);
g = Math.round(c.g * 255);
b = Math.round(c.b * 255);
context.fillStyle = "rgba( " + r + ", " + g + ", " + b + ", 1)"; // Set the letter color
}
//this.dprint("drawLegend: "); //+this.getObjName()+" ("+x+", "+y+")");
context.fillRect(x - 20, y - 10, 13, 13);
}
};
draw2D = (overlayContext:CanvasRenderingContext2D, camera:THREE.Camera):void => {
if(!overlayContext || !camera){
return;
}
var widthHalf:number = overlayContext.canvas.width/2.0;
var heightHalf:number = overlayContext.canvas.height/2.0;
var o3d:THREE.Object3D = this.getObject3d();
/*****/
var vector:THREE.Vector3 = new THREE.Vector3();
var projector:THREE.Projector = new THREE.Projector();
projector.projectVector( vector.setFromMatrixPosition( o3d.matrixWorld ), camera );
vector.x = ( vector.x * widthHalf ) + widthHalf;
vector.y = - ( vector.y * heightHalf ) + heightHalf;
this.setScreenX(vector.x);
this.setScreenY(vector.y);
this.behavior2D(overlayContext);
var i:number;
var m:ComponentBase[] = this.getModelArray();
for(i = 0; i < m.length; i++){
m[i].draw2D(overlayContext, camera);
}
};
public dprint = (str:string):void => {
var wglc = this.getWebGLCanvas();
if(wglc !== null) {
wglc.dprint(this.getObjName()+": "+str);
}
}
}
// The base class for the webGL 'canvas' has the scene, root object, basic lights and a camera
export class CanvasBase {
myScope:any;
myElements:any;
myAttrs:any;
showAxis:boolean;
showStage:boolean;
topNode:HTMLElement;
tooltipNode:HTMLElement;
adjMx:number;
adjMy:number;
unitMx:number;
unitMy:number;
typeString:string;
models:ComponentBase[];
doPicking:boolean;
isMouseMoving:boolean;
skyboxTexture:any;
use3D:boolean;
useDefaultLight:boolean;
useDprint:boolean;
showLegend:boolean;
root3dObj:THREE.Object3D;
controls:THREE.OrbitControls;
framesTillFreeze:number;
overlayContext:CanvasRenderingContext2D;
frameCount:number;
mouseX:number;
mouseY:number;
adjWidth:number;
adjHeight:number;
windowHalfX:number;
windowHalfY:number;
camera:THREE.PerspectiveCamera;
scene:THREE.Scene;
sphere:THREE.Mesh;
light:THREE.DirectionalLight;
renderer:THREE.WebGLRenderer;
redColor:THREE.Color;
greenColor:THREE.Color;
blueColor:THREE.Color;
whiteColor:THREE.Color;
greyColor:THREE.Color;
blackColor:THREE.Color;
// Create a root object to contain all other scene objects
root3dObject:THREE.Object3D;
// Create a projector to handle picking
projector:THREE.Projector;
selectedModel:ComponentBase;
dprintArray:string[];
public getTypeString = ():string => {
return this.typeString;
};
public getComponentArray = ():any[] => {
return this.models;
};
public setTopNode = (x:HTMLElement):void => {
this.topNode = x;
};
public getTopNode = ():HTMLElement => {
return this.topNode;
};
public setTooltipNode = (x:HTMLElement):void => {
this.tooltipNode = x;
};
public getTooltipNode = ():HTMLElement => {
return this.tooltipNode;
};
public setAdjWidth = (x:number):void => {
this.adjWidth = x;
};
public getAdjWidth = ():number => {
return this.adjWidth;
};
public setAdjHeight = (x:number):void => {
this.adjHeight = x;
};
public getAdjHeight = ():number => {
return this.adjHeight;
};
public setAdjMx = (x:number):void => {
this.adjMx = x;
};
public getAdjMx = ():number => {
return this.adjMx;
};
public setAdjMy = (x:number):void => {
this.adjMy = x;
};
public getAdjMy = ():number => {
return this.adjMy;
};
public setUnitMx = (x:number):void => {
this.unitMx = x;
};
public getUnitMx = ():number => {
return this.unitMx;
};
public setUnitMy = (x:number):void => {
this.unitMy = x;
};
public getUnitMy = ():number => {
return this.unitMy;
};
public setDoPicking = (x:boolean):void => {
this.doPicking = x;
};
public getDoPicking = ():boolean => {
return this.doPicking;
};
public setIsMouseMoving = (x:boolean):void => {
this.isMouseMoving = x;
};
public getIsMouseMoving = ():boolean => {
return this.isMouseMoving;
};
public setSkyboxTexture = (x:any):void => {
this.skyboxTexture = x;
};
public getSkyboxTexture = ():any => {
return this.skyboxTexture;
};
public setRenderer = (x:THREE.WebGLRenderer):void => {
this.renderer = x;
};
public getRenderer = ():THREE.WebGLRenderer => {
return this.renderer;
};
public setScene = (x:THREE.Scene):void => {
this.scene = x;
};
public getScene = ():THREE.Scene => {
return this.scene;
};
public setCamera = (x:THREE.PerspectiveCamera):void => {
this.camera = x;
};
public getCamera = ():THREE.Camera => {
return this.camera;
};
public setUse3D = (x:boolean):void => {
this.use3D = x;
};
public getUse3D = ():boolean => {
return this.use3D;
};
public setUseDefaultLight = (x:boolean):void => {
this.useDefaultLight = x;
};
public getUseDefaultLight = ():boolean => {
return this.useDefaultLight;
};
public setUseDprint = (x:boolean):void => {
this.useDprint = x;
};
public getUseDprint = ():boolean => {
return this.useDprint;
};
public setShowStage = (x:boolean):void => {
this.showStage = x;
};
public getShowStage = ():boolean => {
return this.showStage;
};
public setShowAxis = (x:boolean):void => {
this.showAxis = x;
};
public getShowAxis = ():boolean => {
return this.showAxis;
};
public setShowLegend = (x:boolean):void => {
this.showLegend = x;
};
public getShowLegend = ():boolean => {
return this.showLegend;
};
public setProjector = (x:THREE.Projector):void => {
this.projector = x;
};
public getProjector = ():THREE.Projector => {
return this.projector;
};
public setRoot3dObj = (x:THREE.Object3D):void => {
this.root3dObj = x;
};
public getRoot3dObj = ():THREE.Object3D => {
return this.root3dObj;
};
public setControls = (x:THREE.OrbitControls):void => {
this.controls = x;
};
public getControls = ():THREE.OrbitControls => {
return this.controls;
};
public setConditionalFreeze = (x:number):void => {
if (this.framesTillFreeze >= 0) {
this.framesTillFreeze = x;
}
};
public setIsFrozen = (x:number):void => {
this.framesTillFreeze = x;
};
public getIsFrozen = ():boolean => {
return this.framesTillFreeze === 0;
};
public popFreezeFrame = () => {
if (this.framesTillFreeze > 0) {
this.framesTillFreeze--;
}
};
public setSelectedModel = (x:ComponentBase):void => {
this.selectedModel = x;
};
public getSelectedModel = ():ComponentBase => {
return this.selectedModel;
};
constructor(scope:any, element:any, attrs:any) {
this.myScope = scope;
this.myElements = element;
this.myAttrs = attrs;
this.frameCount = 0;
this.mouseX = 0;
this.mouseY = 0;
this.adjWidth = scope.width;
this.adjHeight = scope.height;
this.windowHalfX = this.adjWidth / 2;
this.windowHalfY = this.adjHeight / 2;
this.showAxis = false;
this.showStage = false;
}
initializer = (initObj:any = {}):void => {
this.dprintArray = new Array(100);
this.showAxis = initObj.hasOwnProperty('showAxis') ? initObj.showAxis : false;
this.showStage = initObj.hasOwnProperty('showStage') ? initObj.showStage : false;
this.initGL();
this.initStage();
};
initGL = ():void => {
this.myElements[0].addEventListener('mousemove', this.onDocumentMouseMove, false);
this.redColor = new THREE.Color(0xff0000);
this.greenColor = new THREE.Color(0x00ff00);
this.blueColor = new THREE.Color(0x0000ff);
this.whiteColor = new THREE.Color(0xffffff);
this.whiteColor = new THREE.Color(0x000000);
this.greyColor = new THREE.Color(0x080808);
// Scene
this.scene = new THREE.Scene();
this.root3dObject = new THREE.Object3D();
this.scene.add(this.root3dObject);
this.projector = new THREE.Projector();
// camera
this.camera = new THREE.PerspectiveCamera(45, this.adjWidth / this.adjHeight, 0.1, 10000);
// Position is -20 along the Z axis and look at the origin
this.camera.position = new THREE.Vector3(0, 0, 20);
this.camera.lookAt(new THREE.Vector3(0, 0, 0));
/****/
this.renderer = new THREE.WebGLRenderer({antialias: true});
this.renderer.setClearColor(this.blackColor, 1);
this.renderer.setSize(this.adjWidth, this.adjHeight);
// element is provided by the angular directive
this.renderer.domElement.setAttribute("class", "glContainer");
this.myElements[0].appendChild(this.renderer.domElement);
//this.overlayNode = angular.element(divString);
var overlayElement:HTMLCanvasElement = document.createElement("canvas");
overlayElement.setAttribute("class", "overlayContainer");
this.myElements[0].appendChild(overlayElement);
this.overlayContext = overlayElement.getContext("2d");
this.renderer.clear();
};
initStage = ():void => {
var sphereGeometry = new THREE.SphereGeometry(5, 20, 20);
// This time we create a Phong shader material and provide a texture.
var sphereMaterial = new THREE.MeshPhongMaterial(
{
map: THREE.ImageUtils.loadTexture("assets/earth-day.jpg")
}
);
// Now make a THREE.Mesh using the geometry and a shader
this.sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
// And put it at the origin
this.sphere.position = new THREE.Vector3(0, 0, 0);
// Add it to the root object
this.root3dObject.add(this.sphere);
// Lighting
this.light = new THREE.DirectionalLight(0xffffff);
this.light.position.set(1, 1, 1);
this.scene.add(this.light);
this.scene.add(new THREE.AmbientLight(this.greyColor.getHex()));
var axisHelper:THREE.AxisHelper;
if (this.showAxis) {
axisHelper = new THREE.AxisHelper(5);
this.scene.add(axisHelper);
}
if (this.showStage) {
var gridXZ:THREE.GridHelper = new THREE.GridHelper(10, 1);
gridXZ.setColors(this.greenColor.getHex(), this.greenColor.getHex());
//gridXZ.position.set( 5,0,5 );
this.scene.add(gridXZ);
var gridXY:THREE.GridHelper = new THREE.GridHelper(10, 1);
gridXY.setColors(this.blueColor.getHex(), this.blueColor.getHex());
//gridXY.position.set( 5,0,5 );
gridXY.rotation.x = Math.PI / 2;
this.scene.add(gridXY);
var gridYZ:THREE.GridHelper = new THREE.GridHelper(10, 1);
gridYZ.setColors(this.redColor.getHex(), this.redColor.getHex());
//gridYZ.position.set( 5,0,5 );
gridYZ.rotation.z = Math.PI / 2;
this.scene.add(gridYZ);
}
};
onDocumentMouseMove = (event:MouseEvent):void => {
this.mouseX = ( event.clientX - this.windowHalfX );
this.mouseY = ( event.clientY - this.windowHalfY );
};
draw2D = (ctx:CanvasRenderingContext2D):void => {
var canvas:HTMLCanvasElement = ctx.canvas;
canvas.width = this.adjWidth;
canvas.height = this.adjHeight;
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.font = '12px "Times New Roman"';
ctx.fillStyle = 'rgba( 255, 255, 255, 1)'; // Set the letter color
ctx.fillText("Hello, framecount: " + this.frameCount, 10, 20);
};
render = ():void=> {
// do the 3D rendering
this.camera.lookAt(this.scene.position);
this.renderer.render(this.scene, this.camera);
this.frameCount++;
this.draw2D(this.overlayContext);
};
animate = () => {
this.sphere.rotation.y = this.frameCount * 0.01;
requestAnimationFrame(this.animate);
this.render();
};
public dprint = (str:string):void => {
if(this.dprintArray.indexOf(str) === -1) {
this.dprintArray.push(str);
}
}
}
}
module WGLA1_dirtv {
class WebGlRoot extends WebGLBaseClasses.CanvasBase {
constructor(scope:any, element:any, attrs:any) {
super(scope, element, attrs);
}
animate = () => {
this.sphere.rotation.y += (this.mouseX + 10) * 0.0001;
requestAnimationFrame(this.animate);
this.render();
};
}
// The webGL directive. Instantiates a webGlBase-derived class for each scope
export class ngWebgl {
private myDirective:ng.IDirective;
constructor() {
this.myDirective = null;
}
private linkFn = (scope:any, element:any, attrs:any) => {
//var rb:WebGLBaseClasses.RootBase = new WebGLBaseClasses.RootBase(scope, element, attrs);
var rb:WebGlRoot = new WebGlRoot(scope, element, attrs);
scope.webGlBase = rb;
var initObj:any = {
showStage: true
};
rb.initializer(initObj);
rb.animate();
};
public ctor = ():ng.IDirective => {
if (!this.myDirective) {
this.myDirective = {
restrict: 'AE',
scope: {
'width': '=',
'height': '=',
'fillcontainer': '=',
'scale': '=',
'materialType': '='
},
link: this.linkFn
}
}
return this.myDirective;
}
}
}