Tutorials Home What's New Top Rated Submit myTutes Random!

Lighting on 3D Objects
Author: Mr10 | Website: http://www.mr10.net |

Page 3
«prev 1 2 3 4 5 6 next»

In-depth: The Math

We'll have to calculate a number of things:

• the angle of the facets on the z-axis
• the angle of the facets on the xy-axis
• the angle of the light source on the z-axis - the light source has a fixed distance: the radius of the sphere
• the angle of the light source on the xy-axis
• the whiteness of each facet - depending on both angle (50%) and distance (50%) of the light source
• the path the light source will follow in 'automatic' mode

Calculating the facet angles

To save me some serious paper filling calculations I've built in an angle detector (it's the lower left button). Just drag point1 and point2 parallel with the desired angle ;-)
The front and side view can be accesed with the top right button.
The use of atan is discussed in the next topic. The formula code is on the angle detection line mc:

onClipEvent (enterFrame) {
 //place the line between mcs point1 and point2
 //notice the width and height of this line are 100
 this._x = _root.angledetect.point1._x;
 this._y = _root.angledetect.point1._y;
 this._xscale = (_root.angledetect.point2._x-_root.angledetect.point1._x);
 this._yscale = (_root.angledetect.point2._y-_root.angledetect.point1._y);
 // Math.atan for angles
 xa= this._width;
 ya= this._height;
 _parent.angle=(Math.atan(ya/xa))/(Math.PI/180);
 // -------------------------------
 // make less decimals and calculate angle2
 _parent.angle=(int(_parent.angle*100))/100
 _parent.point1.angle= _parent.angle
 _parent.point2.angle= 90 - _parent.angle
 // -------------------------------
}

The light source angle on the xy-axis

We'll use Math.atan to calculate this angle: we know A and B (distance base to light source on x and on y):

xt= xm - xb;
yt= ym - yb;

xb and yb are the base coordinates, xm and ym the coordinates of the light source.

_root.DgrMouseX=int(Math.atan(yt/xt) / _root.convrad);

convrad= math.PI/180

This function gives a flash angle, further on we'll recalculate this angle to an angle between 0 and 360 degrees.

The light source angle on the z axis

The fixed distance of the light source lets us calculate the angle it has. We know that side (C) will be the radius of the sphere, in this case 180. We calculate A (DeltaX) by using pythagoras on xt and yt.

_root.DeltaX=Math.sqrt(xt*xt+yt*yt);

Then we use the Math.acos on A and C to calculate the z-angle:

_root.DgrMouseZ=(Math.acos(_root.DeltaX/180))/_root.convrad);

Flash and angles

Flash treats degrees a little different than we're used to, so we'll re-calculate them to something more handable:

if(xt <0 && yt> 0){
 _root.DgrMouseX += 270;
} else if(xt <0 && yt <= 0){
 _root.DgrMouseX += 270;
} else if(xt>= 0 && yt <= 0){
 _root.DgrMouseX += 90;
} else if(xt>= 0 && yt>= 0){
 _root.DgrMouseX += 90;
}

This'll return any angle to one between 0 and 360 degrees counting from 0 at the top clockwise to 360.

On to the whiteness!

Each facet calculates it's own whiteness. The whiteness is done by setting the _alpha of a white facet MC over the background of the object.
Each facet has 2 variables: FacetX (its xy-angle) and FacetZ (its z-angle).
We'll use the Math.cos function so that one side of the object is lit (cos(x)=1) and the other side is not (cos(x)=-1).

function SinMouseX(AngleX) {
 return Math.cos(Math.PI/180 * (_root.DgrMouseX - AngleX));
}

AngleX= FacetX

This function sets the most fierce point at FacetX and the less fierce point at (FacetX - 180) degrees.
Then we set the _alpha. The ratio is 50% so z-angle and xy-angle have an equally strong influence:

function AlphaMouseX(Z,X) {
 return ((_root.DgrMouseZ/Z) * _root.ratio + X * (100 - _root.ratio));
}

Z= FacetZ

X= FacetX

«prev 1 2 3 4 5 6 next»

» Level Advanced

Added: : 2001-11-06 Rating: 8.18 Votes: 205 Hits: 10860

» Author

Mr10 stands for Maarten van de Voorde, Graphic Design student from Holland. Being in his forth year he hopes to be employed by January, but for now he has some sparetime to do some free-lance assignments while graduating.

» Download

Download the files used in this tutorial.

Download (99 kb)

Get conversion and unzipping tools for PC and Mac here!

» Forums
	More help? Search our boards for quick answers!

Please rate this tutorial, 10 is the top rating, you can also click the comments link to read/write a review.

10 9 8 7 6 5 4 3 2 1