<html>
<head>
	<title>3dhtml Example :: MouseCube3D :: Source</title>
	<link rel=stylesheet type="text/css" href="../nmspecial.css">
</head>
<body bgcolor="#ffffff" text="#000000">
<pre>
<span class="symbol">&lt;</span>!--
<span class="comment">/*
 * 3dhtml Example :: MouseCube3D
 * Version 1.0, 20/11/2001
 * 
 * Copyright (c) 2001 by Netzministerium.de
 * Written by Till Nagel and René Sander.
 * Distributed under the terms of the GNU Lesser General Public. (See licence.txt for details)
 */</span>
--<span class="symbol">&gt;</span>
<span class="symbol">&lt;</span>html<span class="symbol">&gt;</span>
<span class="symbol">&lt;</span>head<span class="symbol">&gt;</span>

<span class="symbol">&lt;</span><span class="predefinedidentifier">title</span><span class="symbol">&gt;</span>3dhtml Example :: MouseCube3D<span class="symbol">&lt;</span><span class="symbol">/</span><span class="predefinedidentifier">title</span><span class="symbol">&gt;</span>
<span class="symbol">&lt;</span>!-- helper libs --<span class="symbol">&gt;</span>
<span class="symbol">&lt;</span>script language<span class="symbol">=</span><span class="string">&quot;JavaScript&quot;</span> <span class="predefinedidentifier">src</span><span class="symbol">=</span><span class="string">&quot;../js/LyrObj.js&quot;</span><span class="symbol">&gt;</span><span class="symbol">&lt;</span><span class="symbol">/</span>script<span class="symbol">&gt;</span>
<span class="symbol">&lt;</span>script language<span class="symbol">=</span><span class="string">&quot;JavaScript&quot;</span> <span class="predefinedidentifier">src</span><span class="symbol">=</span><span class="string">&quot;../js/ColorUtil.js&quot;</span><span class="symbol">&gt;</span><span class="symbol">&lt;</span><span class="symbol">/</span>script<span class="symbol">&gt;</span>
<span class="symbol">&lt;</span>!-- core 3dhtml lib --<span class="symbol">&gt;</span>
<span class="symbol">&lt;</span>script language<span class="symbol">=</span><span class="string">&quot;JavaScript&quot;</span> <span class="predefinedidentifier">src</span><span class="symbol">=</span><span class="string">&quot;../js/3dhtml.js&quot;</span><span class="symbol">&gt;</span><span class="symbol">&lt;</span><span class="symbol">/</span>script<span class="symbol">&gt;</span>
<span class="symbol">&lt;</span>!-- modulators --<span class="symbol">&gt;</span>
<span class="symbol">&lt;</span>script language<span class="symbol">=</span><span class="string">&quot;JavaScript&quot;</span> <span class="predefinedidentifier">src</span><span class="symbol">=</span><span class="string">&quot;../js/MouseModulator.js&quot;</span><span class="symbol">&gt;</span><span class="symbol">&lt;</span><span class="symbol">/</span>script<span class="symbol">&gt;</span>
<span class="symbol">&lt;</span>!-- materials --<span class="symbol">&gt;</span>
<span class="symbol">&lt;</span>script language<span class="symbol">=</span><span class="string">&quot;JavaScript&quot;</span> <span class="predefinedidentifier">src</span><span class="symbol">=</span><span class="string">&quot;../js/materials.js&quot;</span><span class="symbol">&gt;</span><span class="symbol">&lt;</span><span class="symbol">/</span>script<span class="symbol">&gt;</span>

<span class="symbol">&lt;</span>script language<span class="symbol">=</span><span class="string">&quot;javascript&quot;</span><span class="symbol">&gt;</span>
<span class="symbol">&lt;</span>!-- <span class="comment">// (c) 2001 Till Nagel, till@netzministerium.de &amp; Rene Sander, rene@netzministerium.de</span>

<span class="comment">// ---------------------------------------------------------------------------</span>

<span class="comment">// creates cube model with ColorRectMaterial blending from white to black</span>
<span class="reservedword">var</span> cubeModel <span class="symbol">=</span> <span class="reservedword">new</span> Model(<span class="string">&quot;cube&quot;</span>, createColorRectMaterial(<span class="reservedword">new</span> Color(<span class="string">&quot;000000&quot;</span>), <span class="reservedword">new</span> Color(<span class="string">&quot;ffffff&quot;</span>), <span class="string">&quot;images/space.gif&quot;</span>))<span class="symbol">;</span>

<span class="comment">// defines model points.</span>
<span class="comment">// The model's points have to be defined before the respective code is written into the document.</span>
cubeModel.setPoints(createCubeModelPoints())<span class="symbol">;</span>


<span class="comment">// ---------------------------------------------------------------------------</span>

<span class="comment">// modulator to rotate the model dependent on mouse interactions</span>
<span class="reservedword">var</span> myMouseModulator <span class="symbol">=</span> <span class="reservedword">new</span> MouseModulator(<span class="string">&quot;myMouseModulator&quot;</span>, <span class="numeric">0</span>)<span class="symbol">;</span>


<span class="comment">// ---------------------------------------------------------------------------</span>

<span class="functionheader">function<span class="functionheadername"> initOnLoad</span><span class="functionheaderargs">()</span> {</span>
	fixNetscape()<span class="symbol">;</span>
	
	<span class="comment">// creates and inits matrix to initialize the model</span>
	<span class="reservedword">var</span> initMatrix <span class="symbol">=</span> <span class="reservedword">new</span> Matrix()<span class="symbol">;</span>
	initMatrix.scale(<span class="numeric">50</span>, <span class="numeric">50</span>, <span class="numeric">50</span>)<span class="symbol">;</span>
	
	<span class="comment">// &gt;&gt; begin to work with the model etc.</span>

	<span class="comment">// initializes model</span>
	cubeModel.transform(initMatrix)<span class="symbol">;</span>
	
	<span class="comment">// &gt;&gt; first draw of the model (recommended)</span>
	cubeModel.draw()<span class="symbol">;</span>
	
	<span class="comment">// starts animation</span>
	animate()<span class="symbol">;</span>
<span class="braces">}</span>

<span class="comment">/*
 * The main animate method. Calls itself repeatedly.
 */</span>
<span class="functionheader">function<span class="functionheadername"> animate</span><span class="functionheaderargs">()</span> {</span>
	<span class="reservedword">var</span> delay <span class="symbol">=</span> <span class="numeric">10</span><span class="symbol">;</span>
	
	<span class="comment">// animates cube model ----------------------------------------</span>

	<span class="comment">// animates the modulator to spin the cube</span>
	myMouseModulator.animate()<span class="symbol">;</span>
	<span class="comment">// transforms the cube depending on mouse movements.</span>
	cubeModel.transform(myMouseModulator.getMatrix())<span class="symbol">;</span>
	
	<span class="comment">// updates display</span>
	cubeModel.draw()<span class="symbol">;</span>
	
	<span class="comment">// calls itself with an delay to decouple client computer speed from the animation speed.</span>
	<span class="comment">// result: the animation is as fast as possible.</span>
	<span class="libraryfunction">setTimeout</span>(<span class="string">&quot;animate()&quot;</span>, delay)<span class="symbol">;</span>
<span class="braces">}</span>


<span class="comment">// event handling</span>
<span class="predefinedtype">document</span>.onmousemove <span class="symbol">=</span> mouseMoveHandler<span class="symbol">;</span>
<span class="predefinedtype">document</span>.onmousedown <span class="symbol">=</span> mouseDownHandler<span class="symbol">;</span>
<span class="predefinedtype">document</span>.onmouseup <span class="symbol">=</span> mouseUpHandler<span class="symbol">;</span>
<span class="reservedword">if</span> (ns <span class="symbol">|</span><span class="symbol">|</span> ns6) <span class="predefinedtype">document</span>.<span class="reservedword">captureEvents(Event.MOUSEMOVE | Event.MOUSEDOWN | Event.MOUSEUP)</span><span class="symbol">;</span>

<span class="comment">/*
 * The mouse handlers in this document must call the modulator's handlers.
 * To be able to use a mouse modulator and to do your own stuff.
 */</span>
<span class="functionheader">function<span class="functionheadername"> mouseMoveHandler</span><span class="functionheaderargs">(e)</span> {</span>
	<span class="comment">// calls move handler of the mouse modulator</span>
	myMouseModulator.move(e)<span class="symbol">;</span>

	<span class="comment">/*
	// other stuff, e.g.
	if (ns || ie) {
		mouseX = (ns) ? e.pageX : event.x;
		mouseY = (ns) ? e.pageY : event.y;
	}
	*/</span>

	<span class="reservedword">return</span> !ie<span class="symbol">;</span>
<span class="braces">}</span>

<span class="functionheader">function<span class="functionheadername"> mouseDownHandler</span><span class="functionheaderargs">(e)</span> {</span>
	<span class="comment">// calls down handler of the mouse modulator</span>
	myMouseModulator.down(e)<span class="symbol">;</span>
<span class="braces">}</span>

<span class="functionheader">function<span class="functionheadername"> mouseUpHandler</span><span class="functionheaderargs">(e)</span> {</span>
	<span class="comment">// calls up handler of the mouse modulator</span>
	myMouseModulator.up(e)<span class="symbol">;</span>
<span class="braces">}</span>



<span class="comment">// ---------------------------------------------------------------------------</span>

<span class="functionheader">function<span class="functionheadername"> createCubeModelPoints</span><span class="functionheaderargs">()</span> {</span>
	<span class="comment">// the cube model</span>
	<span class="reservedword">return</span> <span class="reservedword">new</span> <span class="predefinedtype">Array</span>(
		<span class="reservedword">new</span> Point3D( <span class="numeric">1</span>,  <span class="numeric">1</span>,  <span class="numeric">1</span>, <span class="numeric">0</span>),
		<span class="reservedword">new</span> Point3D( <span class="numeric">1</span>,  <span class="numeric">1</span>, -<span class="numeric">1</span>, <span class="numeric">0</span>),
		<span class="reservedword">new</span> Point3D( <span class="numeric">1</span>, -<span class="numeric">1</span>,  <span class="numeric">1</span>, <span class="numeric">0</span>),
		<span class="reservedword">new</span> Point3D( <span class="numeric">1</span>, -<span class="numeric">1</span>, -<span class="numeric">1</span>, <span class="numeric">0</span>),
		<span class="reservedword">new</span> Point3D(-<span class="numeric">1</span>,  <span class="numeric">1</span>,  <span class="numeric">1</span>, <span class="numeric">0</span>),
		<span class="reservedword">new</span> Point3D(-<span class="numeric">1</span>,  <span class="numeric">1</span>, -<span class="numeric">1</span>, <span class="numeric">0</span>),
		<span class="reservedword">new</span> Point3D(-<span class="numeric">1</span>, -<span class="numeric">1</span>,  <span class="numeric">1</span>, <span class="numeric">0</span>),
		<span class="reservedword">new</span> Point3D(-<span class="numeric">1</span>, -<span class="numeric">1</span>, -<span class="numeric">1</span>, <span class="numeric">0</span>)
	)<span class="symbol">;</span>
<span class="braces">}</span>

<span class="comment">// --&gt;</span>
<span class="symbol">&lt;</span><span class="symbol">/</span>script<span class="symbol">&gt;</span>
<span class="symbol">&lt;</span><span class="symbol">/</span>head<span class="symbol">&gt;</span>

<span class="symbol">&lt;</span>body onload<span class="symbol">=</span><span class="string">&quot;initOnLoad()&quot;</span> bottommargin<span class="symbol">=</span><span class="string">&quot;0&quot;</span> leftmargin<span class="symbol">=</span><span class="string">&quot;0&quot;</span> marginheight<span class="symbol">=</span><span class="string">&quot;0&quot;</span> marginwidth<span class="symbol">=</span><span class="string">&quot;0&quot;</span> rightmargin<span class="symbol">=</span><span class="string">&quot;0&quot;</span> topmargin<span class="symbol">=</span><span class="string">&quot;0&quot;</span> style<span class="symbol">=</span><span class="string">&quot;height:100%&quot;</span><span class="symbol">&gt;</span>

	<span class="symbol">&lt;</span>!-- layer to bugfix netscape --<span class="symbol">&gt;</span>
	<span class="symbol">&lt;</span>div id<span class="symbol">=</span><span class="string">&quot;fixnetscape&quot;</span> style<span class="symbol">=</span><span class="string">&quot;position:absolute;visibility:hidden&quot;</span><span class="symbol">&gt;</span><span class="symbol">&lt;</span><span class="symbol">/</span>div<span class="symbol">&gt;</span>
	
	<span class="symbol">&lt;</span>script language<span class="symbol">=</span><span class="string">&quot;JavaScript&quot;</span> <span class="predefinedidentifier">type</span><span class="symbol">=</span><span class="string">&quot;text/javascript&quot;</span><span class="symbol">&gt;</span>
	<span class="symbol">&lt;</span>!-- <span class="comment">// (c) 2001 Till Nagel, till@netzministerium.de &amp; Rene Sander, rene@netzministerium.de</span>
	
	<span class="comment">// MANDATORY: INSERTION OF HTML PART INTO PAGE</span>
	<span class="comment">// creates the HTML code representing the model's points</span>
	<span class="comment">// NB: This is written directly into the page from within the method	</span>
	cubeModel.createPointCode()<span class="symbol">;</span>
	<span class="comment">// --&gt;</span>
	<span class="symbol">&lt;</span><span class="symbol">/</span>script<span class="symbol">&gt;</span>

<span class="symbol">&lt;</span><span class="symbol">/</span>body<span class="symbol">&gt;</span>
<span class="symbol">&lt;</span><span class="symbol">/</span>html<span class="symbol">&gt;</span>

</pre>
<br>
Syntax highlighted by <a href="http://www.palfrader.org/code2html" target="_blank">Code2HTML</a>, v. 0.9, modified by <a href="http://www.netzministerium.de/" target="_blank">Netzministerium</a>, 2001.
</body>
</html>

Syntax highlighted by Code2HTML, v. 0.9, modified by Netzministerium, 2001.