PDA

View Full Version : JavaScript / HTML5 3D Modeling Help Needed | Objects rotate

JohnRock076
03-02-2012, 09:52 AM
Hi All.

I have a slight problem.

I am building a 3D Modeling framework in JavaScript that draws objects on a canvass (HTML5).

However, after object creation, I rotate it by 1 degree around any axis and then it seems to do a 90 degree rotation all by itself.

I have sat hours on end and can't seem to find what causes this. Maybe some fresh eyes will help?

Here the code that seems to give me all this uphill:

NB:This is just some of the code. See attached for all files needed!

function RotateObjectAboutY(ObjectToRotate, YRotationInDegrees)
{
YRotationInDegrees = (-1)*YRotationInDegrees;
pi = 3.14159;
YRotRads = (YRotationInDegrees/360)*(2*pi);
var CenterX = ObjectCenterX[ObjectToRotate];
var CenterY = ObjectCenterY[ObjectToRotate];
var CenterZ = ObjectCenterZ[ObjectToRotate];
var ObjectsFirstNode = ObjectFirstNode[ObjectToRotate];
var ObjectsLastNode = ObjectLastNode[ObjectToRotate];
var deltaY=0;
var deltaX=0;
var R=0;
var OldAngleRads=0;
var NewAngleRads=0;
for(var i = ObjectsFirstNode;i<= ObjectsLastNode;i++)
{
deltaX = (NodeWX[i] - CenterX);
deltaZ = (NodeWZ[i] - CenterZ);
R = Math.sqrt(Math.pow(deltaX,2) + Math.pow(deltaZ,2));
OldAngleRads = Math.atan2(deltaX, deltaZ);
NewAngleRads = OldAngleRads + YRotRads;
NodeWX[i] = CenterX + R*Math.cos(NewAngleRads);
NodeWZ[i] = CenterZ + R*Math.sin(NewAngleRads);
}
}
function DrawObject(id)
{
var Cam2NodeX = 0;
var Cam2NodeY = 0;
var Cam2NodeZ = 0;
var ipX = 0;
var ipY = 0;
var ipZ = 0;
var numerator = 0;
var denominator = 0;
var t = 0;
var Ctr2ipX = 0;
var Ctr2ipY = 0;
var Ctr2ipZ = 0;
var PX = 0;
var SCM = 0;
var PY = 0;
var xx1=0;
var yy1=0;
var xx2=0;
var yy2=0;
var ObjectToDraw = id;
var FirstNodeOfObject = ObjectFirstNode[ObjectToDraw];
var LastNodeOfObject = ObjectLastNode[ObjectToDraw];
var FirstLineOfObject = ObjectFirstLine[ObjectToDraw];
var LastLineOfObject = ObjectLastLine[ObjectToDraw];
Cam2CtrX = (VCtrX - CamX);
Cam2CtrY = (VCtrY - CamY);
Cam2CtrZ = (VCtrZ - CamZ);
var LenCam2Ctr = Math.sqrt(Math.pow(Cam2CtrX,2) + Math.pow(Cam2CtrY,2) + Math.pow(Cam2CtrZ,2));
var virtualXi = (-1)*(Cam2CtrZ);
var virtualXj = 0;
var virtualXk = Cam2CtrX;
var LenVirtualX = Math.sqrt(Math.pow(virtualXi,2) + Math.pow(virtualXj,2) + Math.pow(virtualXk,2));
virtualXi = virtualXi / LenVirtualX;
virtualXj = virtualXj / LenVirtualX;
virtualXk = virtualXk / LenVirtualX;
var virtualYi = (-1)*(virtualXk * Cam2CtrY);
var virtualYj = (virtualXk * Cam2CtrX) - (virtualXi * Cam2CtrZ);
var virtualYk = (virtualXi * Cam2CtrY);
var LenVirtualY = Math.sqrt(Math.pow(virtualYi,2) + Math.pow(virtualYj,2) + Math.pow(virtualYk,2));
virtualYi = virtualYi / LenVirtualY;
virtualYj = virtualYj / LenVirtualY;
virtualYk = virtualYk / LenVirtualY;
virtualXi = virtualXi / LenCam2Ctr;
virtualXj = virtualXj / LenCam2Ctr;
virtualXk = virtualXk / LenCam2Ctr;
virtualYi = virtualYi / LenCam2Ctr;
virtualYj = virtualYj / LenCam2Ctr;
virtualYk = virtualYk / LenCam2Ctr;
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
for(var i = FirstNodeOfObject;i<=LastNodeOfObject;i++)
{
Cam2NodeX = (NodeWX[i] - CamX);
Cam2NodeY = (NodeWY[i] - CamY);
Cam2NodeZ = (NodeWZ[i] - CamZ);
numerator = Math.pow(Cam2CtrX,2) + Math.pow(Cam2CtrY,2) + Math.pow(Cam2CtrZ,2);
denominator = (Cam2NodeX * Cam2CtrX) + (Cam2NodeY * Cam2CtrY) + (Cam2NodeZ * Cam2CtrZ);
t = (numerator / denominator);
ipX = CamX + Cam2NodeX*t;
ipY = CamY + Cam2NodeY*t;
ipZ = CamZ + Cam2NodeZ*t;
Ctr2ipX = (ipX - VCtrX);
Ctr2ipY = (ipY - VCtrY);
Ctr2ipZ = (ipZ - VCtrZ);
PX = (Ctr2ipX*virtualXi) + (Ctr2ipY*virtualXj) + (Ctr2ipZ*virtualXk);
SCM = 500 //Secondary Scale Multiplier.
NodeSX[i] = ScrCenterX + (SCM*ZoomFac * PX);
PY = (Ctr2ipX*virtualYi) + (Ctr2ipY*virtualYj) + (Ctr2ipZ*virtualYk);
NodeSY[i] = ScrCenterY - (SCM*ZoomFac * PY);
}
for(var i1 = FirstLineOfObject;i1<=LastLineOfObject;i1++)
{
xx1 = NodeSX[LineInode[i1]];
yy1 = NodeSY[LineInode[i1]];
xx2 = NodeSX[LineJnode[i1]];
yy2 = NodeSY[LineJnode[i1]];
context.beginPath();
context.moveTo(Math.round(xx1),Math.round(yy1));
context.lineTo(Math.round(xx2),Math.round(yy2));
context.strokeStyle = ObjectColor[ObjectToDraw];
context.lineWidth = 1;
context.lineCap = "butt";
context.stroke();
}
}
function CreateCone(ConeName, radius, numSides, coneheight, ConeColor)
{
var NC = NodeCount;
var pi = 3.14159;
var wedgeAngle = (2*pi)/numSides;
for(var i=1;i<=numSides;i++)
{
NodeWX[NC + i] = radius*Math.cos((i-1)*wedgeAngle);
NodeWY[NC + i] = 0;
NodeWZ[NC + i] = radius*Math.sin((i-1)*wedgeAngle);
}
NodeWX[NC + numSides + 1] = 0;
NodeWY[NC + numSides + 1] = coneheight;
NodeWZ[NC + numSides + 1] = 0;
var LC = LineCount;
for (var i=1;i<=(numSides-1);i++)
{
LineInode[LC + i] = (NC + i);
LineJnode[LC + i] = (NC + i + 1);
}
LineInode[LC + numSides] = (NC + numSides);
LineJnode[LC + numSides] = (NC + 1);
for(var i=1;i<=numSides;i++)
{
LineInode[LC + numSides + i] = (NC + i);
LineJnode[LC + numSides + i] = (NC + numSides + 1);
}
var OC = ObjectCount;
ObjectName[OC + 1] = ConeName;
ObjectColor[OC + 1] = ConeColor;
ObjectFirstNode[OC + 1] = (NC + 1);
ObjectLastNode[OC + 1] = (NC + numSides + 1);
ObjectFirstLine[OC + 1] = (LC + 1);
ObjectLastLine[OC + 1] = (LC + 2*numSides);
ObjectVisible[OC + 1] = 1;
ObjectLineThickness[OC + 1] = 1;
ObjectType[OC + 1] = CurrentGroupName;
ObjectDeviceType[OC + 1] = CurrentDeviceName;
ObjectCenterX[OC + 1] = 0;
ObjectCenterY[OC + 1] = coneheight/2;
ObjectCenterZ[OC + 1] = 0;
NodeCount = NodeCount + numSides + 1;
LineCount = LineCount + 2*numSides;
ObjectCount = ObjectCount + 1;
}

ANY help in this would be super.

Many thanks in advance!

JohnRock076
03-05-2012, 10:44 AM
Any one looked at this yet??