📄 appendix-e.html
字号:
<HTML>
<HEAD>
<META name=vsisbn content="1571690433"><META name=vstitle content="Black Art of Java Game Programming"><META name=vsauthor content="Joel Fan"><META name=vsimprint content="Sams"><META name=vspublisher content="Macmillan Computer Publishing"><META name=vspubdate content="11/01/96"><META name=vscategory content="Web and Software Development: Programming, Scripting, and Markup Languages: Java"><TITLE>Black Art of Java Game Programming:3D Transforms (Calin Tenitchi)</TITLE>
<!-- HEADER --><STYLE type="text/css"> <!-- A:hover { color : Red; } --></STYLE><META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW"><script><!--function displayWindow(url, width, height) { var Win = window.open(url,"displayWindow",'width=' + width +',height=' + height + ',resizable=1,scrollbars=yes'); if (Win) { Win.focus(); }}//--></script><SCRIPT><!--function popUp(url) { var Win = window.open(url,"displayWindow",'width=400,height=300,resizable=1,scrollbars=yes'); if (Win) { Win.focus(); }}//--></SCRIPT><script language="JavaScript1.2"><!--function checkForQuery(fm) { /* get the query value */ var i = escape(fm.query.value); if (i == "") { alert('Please enter a search word or phrase'); return false; } /* query is blank, dont run the .jsp file */ else return true; /* execute the .jsp file */}//--></script></HEAD><BODY>
<TABLE border=0 cellspacing=0 cellpadding=0>
<tr>
<td width=75 valign=top>
<img src="1571690433.gif" width=60 height=73 alt="Black Art of Java Game Programming" border="1">
</td>
<td align="left">
<font face="arial, helvetica" size="-1" color="#336633"><b>Black Art of Java Game Programming</b></font>
<br>
<font face="arial, helvetica" size="-1"><i>by Joel Fan</i>
<br>
Sams, Macmillan Computer Publishing
<br>
<b>ISBN:</b> 1571690433<b> Pub Date:</b> 11/01/96</font>
</td>
</tr>
</table>
<P>
<!--ISBN=1571690433//-->
<!--TITLE=Black Art of Java Game Programming//-->
<!--AUTHOR=Joel Fan//-->
<!--AUTHOR=Eric Ries//-->
<!--AUTHOR=Calin Tenitchi//-->
<!--PUBLISHER=Macmillan Computer Publishing//-->
<!--IMPRINT=Sams//-->
<!--APPENDIX=E//-->
<!--PAGES=865-898//-->
<!--UNASSIGNED1//-->
<!--UNASSIGNED2//-->
<CENTER>
<TABLE BORDER>
<TR>
<TD><A HREF="ewtoc.html">Table of Contents</A></TD>
</TR>
</TABLE>
</CENTER>
<P><BR></P>
<H2><A NAME="Heading1"></A><FONT COLOR="#000077">Appendix E:<BR>3D Transforms
</FONT></H2>
<P>This chapter provides supplemental information to augment your understanding of the math and 3D concepts introduced in Chapter 11, Into the Third Dimension, and Chapter 12, Building 3D Applets with App3Dcore.
</P>
<P>We will kick-start the process of understanding 3D by making 3D rotations with an informal discussion of rotating points from 2D to 3D.</P>
<P><FONT SIZE="+1"><B>Rotating Points in 3D</B></FONT></P>
<P>The step from rotating a two-dimensional point in a plane to rotating a three-dimensional point in a volume is not as painful as it first might seem. When working in two dimensions, we use a coordinate system that is made of two axes, x and y. These two axes make a plane that can be compared to a piece of paper. This plane is called the “x-y plane”, since it is defined by the two principal axes, as shown in Figure E-1.
</P>
<P><A NAME="Fig1"></A><A HREF="javascript:displayWindow('images/ape-01.jpg',348,276 )"><IMG SRC="images/ape-01t.jpg"></A>
<BR><A HREF="javascript:displayWindow('images/ape-01.jpg',348,276)"><FONT COLOR="#000077"><B>Figure E-1</B></FONT></A> A two-dimensional coordinate system</P>
<P>A point can be placed anywhere within the bounds of the plane by simply specifying x and y and then rotated by “turning” the whole plane. Imagine putting your hand on the paper and then turning it. What you should see is that the axes remain in the same position while the point follows the paper. Listing E-1 gives the formula for rotating a point in the x-y plane.
</P>
<P><B>Listing E-1</B> Rotating a point by theta radians counterclockwise in an x-y plane</P>
<!-- CODE SNIP //-->
<PRE>
Xnew = X*Math.cos(theta)-Y*Math.sin(theta)
Ynew = X*Math.sin(theta)+Y*Math.cos(theta)
</PRE>
<!-- END CODE SNIP //-->
<P>Moving to the third dimension is done by adding the z-axis. This new axis turns the two-dimensional plane into a volume, and points can be placed anywhere within it by specifying the x, y, and z coordinates. The difference between 2D and 3D is that the z-axis introduces two new principal planes: the y-z and z-x planes.
</P>
<P>The point shown in Figure E-2 can be rotated by turning any of the three principal planes. A full 3D rotation is done by rotating one plane at a time by a specified angle.</P>
<P><A NAME="Fig2"></A><A HREF="javascript:displayWindow('images/ape-02.jpg',349,349 )"><IMG SRC="images/ape-02t.jpg"></A>
<BR><A HREF="javascript:displayWindow('images/ape-02.jpg',349,349)"><FONT COLOR="#000077"><B>Figure E-2</B></FONT></A> A 3D coordinate system</P>
<P>Another way of looking at rotation in 3D is to imagine that you grab one of the axes with your thumb and index finger and turn it. You should “see” that the points rotate about the axis that you are turning while the other axes stand still. Looking at Figure E-1 again, you could also imagine that there is a z-axis pointing out from the paper and that a rotation in two dimensions is done by turning it. Therefore, you could think of a two-dimensional rotation as rotation about an imaginary z-axis.
</P>
<P><FONT SIZE="+1"><B><I>A 3D Rotation Step by Step</I></B></FONT></P>
<P>Let’s go through the three steps that will rotate a point about all three axes.
</P>
<P><B>Step 1. Rotating About the Z-Axis</B></P>
<P>This rotation is done in the x-y plane, and it is exactly the same as in the two-dimensional case. The source coordinates X and Y are transformed to Xa and Ya while Z remains the same. This is shown in Figure E-3.
</P>
<P><A NAME="Fig3"></A><A HREF="javascript:displayWindow('images/ape-03.jpg',510,347 )"><IMG SRC="images/ape-03t.jpg"></A>
<BR><A HREF="javascript:displayWindow('images/ape-03.jpg',510,347)"><FONT COLOR="#000077"><B>Figure E-3</B></FONT></A> Rotating about the z-axis or in the x-y plane</P>
<P ALIGN="CENTER"><IMG SRC="images/ape-01d.jpg"></P>
<P>The resulting point <I>Xa</I>, <I>Ya</I>, <I>Za</I> will be used as the source point for the next rotation.</P>
<P><B>Step 2. Rotating About the X-Axis</B></P>
<P>The next rotation would be about the x-axis. What we actually do is rotate the point in the y-z plane. Another way of looking at it is as a two-dimensional rotation, but with <I>Y</I> and <I>Z</I> as principal axes (see Figure E-4).</P>
<P><A NAME="Fig4"></A><A HREF="javascript:displayWindow('images/ape-04.jpg',132,57 )"><IMG SRC="images/ape-04t.jpg"></A>
<BR><A HREF="javascript:displayWindow('images/ape-04.jpg',132,57)"><FONT COLOR="#000077"><B>Figure E-4</B></FONT></A> Rotation about the x-axis or in the y-z plane (two ways of looking at it)</P>
<P ALIGN="CENTER"><IMG SRC="images/ape-02d.jpg"></P>
<P><B>Step 3. Rotating About the Y-Axis</B></P>
<P>Using the resulting point from the last operation, the final transformation is made in the same way as described above, and the full 3D rotation is complete, as shown in Figure E-5 and Listing E-2.
</P>
<!-- CODE SNIP //-->
<PRE>
x<SUB><I>c</I></SUB>=x<SUB><I>b</I></SUB>·cos<I>c</I>+z<SUB><I>b</I></SUB>·sin<I>c</I>
y<SUB><I>c</I></SUB>=y<SUB><I>b</I></SUB>
z<SUB><I>c</I></SUB>=-x<SUB><I>b</I></SUB>·sin<I>c</I>+z<SUB><I>b</I></SUB>·cos<I>c</I>
</PRE>
<!-- END CODE SNIP //-->
<P><B>Listing E-2</B> Rotating a point in 3D</P>
<!-- CODE //-->
<PRE>
//-- X,Y,Z will be rotated by a,b,c radians about all principal
//-- axis. The result will be stored in Xnew, Ynew, Znew.
//-- rotate the point in x-y-plane and store the result in
//-- Xa,ya,Za.
Xa = X*Math.cos(a)-Y*Math.sin(a);
Ya = X*Math.sin(a)+Y*Math.cos(a);
Za = Z; //-- z coordinate is not affected by this rotation
//-- rotate the resulting point in the y-z-plane
Xb = X; //-- x coordinate is not affected by this rotation
Yb = Y*Math.cos(b)-Z*Math.sin(b);
Zb = Y*Math.sin(b)+Z*Math.cos(b);
//-- rotate the resulting point in the z-x-plane
Xc = X*Math.cos(c)+Z*Math.sin(c);
Yc = Y; //-- z coordinate is not affected by this rotation
Zc = -X*Math.sin(c)+Z*Math.cos(c);
Xnew = Xc;
Ynew = Yc;
Znew = Zc;
</PRE>
<!-- END CODE //-->
<P><A NAME="Fig5"></A><A HREF="javascript:displayWindow('images/ape-05.jpg',144,62 )"><IMG SRC="images/ape-05t.jpg"></A>
<BR><A HREF="javascript:displayWindow('images/ape-05.jpg',144,62)"><FONT COLOR="#000077"><B>Figure E-5</B></FONT></A> Rotation in the z-x plane</P>
<P><FONT SIZE="+1"><B><I>Creating a Rotating Points Applet</I></B></FONT></P>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -