Subversion Repositories Applications.papyrus

Compare Revisions

Ignore whitespace Rev 2149 → Rev 2150

/trunk/api/js/dojo1.0/dojox/gfx3d/tests/test_cube.html
New file
0,0 → 1,50
<html>
<head>
<title>Cube of dojox.gfx3d.</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
@import "../../../dojo/resources/dojo.css";
@import "../../../dijit/tests/css/dijitTests.css";
</style>
<!--
The next line should include Microsoft's Silverligth.js, if you plan to use the silverlight backend
<script type="text/javascript" src="Silverlight.js"></script>
-->
<script type="text/javascript" src="../../../dojo/dojo.js" djConfig="isDebug: true"></script>
<script type="text/javascript">
dojo.require("dojox.gfx3d");
dojo.require("dojox.gfx.utils");
 
makeObjects = function(){
var surface = dojox.gfx.createSurface("test", 500, 500);
var view = surface.createViewport();
view.setLights([{direction: {x: -10, y: -5, z: 5}, color: "white"}],
{color:"white", intensity: 2}, "white");
var m = dojox.gfx3d.matrix;
var l = view.createCube({bottom: {x: 0, y: 0, z: 0}, top: {x: 100, y: 100, z: 100}})
.setFill({type: "plastic", finish: "dull", color: "lime"});
var camera = [m.cameraRotateXg(20), m.cameraRotateYg(20), m.cameraTranslate(-200, -200, 0)];
view.applyCameraTransform(camera);
view.render();
//dojo.byId("out1").value = dojo.byId("test").innerHTML;
//dojo.byId("out2").value = dojox.gfx.utils.toJson(surface, true);
};
 
dojo.addOnLoad(makeObjects);
 
</script>
</head>
<body>
<h1>Cube Test</h1>
<div id="test" style="width: 500px; height: 500px;"></div>
<!--
<p><button onclick="makeObjects();">Go</button></p>
<p><textarea id="out1" cols="40" rows="5"></textarea></p>
<p><textarea id="out2" cols="40" rows="5"></textarea></p>
-->
<p>That's all Folks!</p>
</body>
</html>
/trunk/api/js/dojo1.0/dojox/gfx3d/tests/test_rotate.html
New file
0,0 → 1,123
<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" >
<head>
<title>Rotate test of dojox.gfx3d.</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
@import "../../../dojo/resources/dojo.css";
@import "../../../dijit/tests/css/dijitTests.css";
@import "../../../dijit/themes/tundra/tundra.css";
</style>
<script type="text/javascript" src="../../../dojo/dojo.js" djConfig="isDebug: true"></script>
<script type="text/javascript">
 
dojo.require("dojox.gfx3d");
 
var angles = {x: 0, y: 0, z: 0};
var cube = null;
var view = null;
 
rotate = function(){
var m = dojox.gfx3d.matrix;
 
if(dojo.byId('rx').checked){
angles.x += 10;
}
if(dojo.byId('ry').checked){
angles.y += 10;
}
if(dojo.byId('rz').checked){
angles.z += 10;
}
var t = m.normalize([
m.cameraRotateXg(angles.x),
m.cameraRotateYg(angles.y),
m.cameraRotateZg(angles.z),
]);
cube.setTransform(t);
cube.invalidate();
view.render();
}
 
makeObjects = function(){
var surface = dojox.gfx.createSurface("test", 500, 500);
view = surface.createViewport();
var c = {bottom: {x: 0, y: 0, z: 0}, top: {x: 100, y: 100, z: 100}};
var xaxis = [
{x: 0, y: 0, z: 0},
{x: 200, y: 0, z: 0}
];
 
var yaxis = [
{x: 0, y: 0, z: 0},
{x: 0, y: 200, z: 0}
];
var zaxis = [
{x: 0, y: 0, z: 0},
{x: 0, y: 0, z: 200}
];
 
var m = dojox.gfx3d.matrix;
 
view.createEdges(xaxis).setStroke({color: "red", width: 1});
view.createEdges(yaxis).setStroke({color: "green", width: 1});
view.createEdges(zaxis).setStroke({color: "blue", width: 1});
 
cube = view.createCube(c).setStroke({color: "lime", width: 1});
 
var camera = dojox.gfx3d.matrix.normalize([
m.cameraRotateXg(20),
m.cameraRotateYg(30),
m.cameraTranslate(-100, -100, 0)
]);
 
view.applyCameraTransform(camera);
view.render();
window.setInterval(rotate, 200);
 
// add the click event handler
dojo.connect(dojo.byId("conservative"), "onclick", drawWithConservative);
dojo.connect(dojo.byId("chart"), "onclick", drawWithChart);
};
 
draw = function(title, drawer){
dojo.byId("drawer").innerHTML = title;
view.setDrawer(drawer);
};
 
drawWithConservative = function(){
draw("Conservative", dojox.gfx3d.drawer.conservative);
};
 
drawWithChart = function(){
draw("Chart", dojox.gfx3d.drawer.chart);
};
 
dojo.addOnLoad(makeObjects);
 
</script>
</head>
<body class="tundra">
<h1>Pilot Test</h1>
<p>There are two drawers(well, the name is quite misleading, it means draw-er) in dojox.gfx3d, conservative and chart:</p>
<ul>
<li><em>conservative</em> drawer is a pessimist, it assumes that the movement, transformation of objects would take a big fat impact to the viewport, so it not only render the modified objects, but also reorder all the underlying 2D shapes and redraw them.</li>
<li> <em>chart</em> drawer is an optimist, it assumes the change of the objects does not take effect on the z-order, this is most likely true in chart application. It only render and then draw the modified objects.</li>
</ul>
<p>The cube is in the center (0, 0, 0): The color of X, Y, Z axes are red, green, blue as the reference. The cube would rotate around X, Y, Z or their combination, it is up to you.</p>
<p>Current Drawer: <strong id="drawer">Conservative</strong></p>
<form>
<input id="conservative" type="button" value="Draw with conservative"/>
<input id="chart" type="button" value="Draw with chart"/><br />
<input id="rx" type="checkbox" name="rotateX" checked="true" value="on"/>
<label for="rx"> Rotate around X-axis</label> <br/>
<input id="ry" type="checkbox" name="rotateY" checked="false" value="off"/>
<label for="ry"> Rotate around Y-axis</label> <br/>
<input id="rz" type="checkbox" name="rotateZ" checked="false" value="off"/>
<label for="rz"> Rotate around Z-axis</label> <br/>
</form>
 
<div id="test" style="width: 500px; height: 500px;"></div>
<p>That's all Folks!</p>
</body>
</html>
/trunk/api/js/dojo1.0/dojox/gfx3d/tests/test_camerarotate_shaded.html
New file
0,0 → 1,97
<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" >
<head>
<title>Camera rotate of dojox.gfx3d.</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
@import "../../../dojo/resources/dojo.css";
@import "../../../dijit/tests/css/dijitTests.css";
@import "../../../dijit/themes/tundra/tundra.css";
</style>
<script type="text/javascript" src="../../../dojo/dojo.js" djConfig="isDebug: false"></script>
<script type="text/javascript" src="../object.js"></script>
<script type="text/javascript" src="../scheduler.js"></script>
<script type="text/javascript">
 
dojo.require("dojox.gfx3d");
 
var angles = {x: 30, y: 30, z: 0};
var cube = null;
var view = null;
 
rotate = function() {
var m = dojox.gfx3d.matrix;
 
if(dojo.byId('rx').checked){
angles.x += 1;
}
if(dojo.byId('ry').checked){
angles.y += 1;
}
if(dojo.byId('rz').checked){
angles.z += 1;
}
var t = m.normalize([
m.cameraTranslate(-300, -200, 0),
m.cameraRotateXg(angles.x),
m.cameraRotateYg(angles.y),
m.cameraRotateZg(angles.z)
]);
console.debug(t);
view.setCameraTransform(t);
view.render();
}
 
makeObjects = function(){
var surface = dojox.gfx.createSurface("test", 500, 500);
view = surface.createViewport();
 
view.setLights([{direction: {x: -10, y: -5, z: 5}, color: "white"}],
{color:"white", intensity: 2}, "white");
 
var c = {bottom: {x: 0, y: 0, z: 0}, top :{x: 100, y: 100, z: 100}};
var xaxis = [{x: 0, y: 0, z: 0}, {x: 200, y: 0, z: 0}];
var yaxis = [{x: 0, y: 0, z: 0}, {x: 0, y: 200, z: 0}];
var zaxis = [{x: 0, y: 0, z: 0}, {x: 0, y: 0, z: 200}];
 
var m = dojox.gfx3d.matrix;
 
view.createEdges(xaxis).setStroke({color: "red", width: 1});
view.createEdges(yaxis).setStroke({color: "green", width: 1});
view.createEdges(zaxis).setStroke({color: "blue", width: 1});
// setStroke({color: "lime", width: 1}).
cube = view.createCube(c).setFill({ type: "plastic", finish: "dull", color: "lime" });
 
var camera = dojox.gfx3d.matrix.normalize([
m.cameraTranslate(-300, -200, 0),
m.cameraRotateXg(angles.x),
m.cameraRotateYg(angles.y),
m.cameraRotateZg(angles.z),
]);
 
view.applyCameraTransform(camera);
view.render();
window.setInterval(rotate, 50);
};
 
dojo.addOnLoad(makeObjects);
 
</script>
</head>
<body class="tundra">
<h1>Camera rotate</h1>
<p>The cube is in the center (0, 0, 0): The color of X, Y, Z axes are red, green, blue. The view renders all the objects
in each frame, the <em>conservative</em> drawer is used.</p>
<form>
<input id="rx" type="checkbox" name="rotateX" checked="true" value="on"/>
<label for="rx"> Rotate around X-axis</label> <br/>
<input id="ry" type="checkbox" name="rotateY" checked="false" value="off"/>
<label for="ry"> Rotate around Y-axis</label> <br/>
<input id="rz" type="checkbox" name="rotateZ" checked="false" value="off"/>
<label for="rz"> Rotate around Z-axis</label> <br/>
</form>
 
<div id="test" style="width: 500px; height: 500px;"></div>
<p>That's all Folks!</p>
</body>
</html>
/trunk/api/js/dojo1.0/dojox/gfx3d/tests/test_orbit.html
New file
0,0 → 1,50
<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" >
<head>
<title>Orbit test of dojox.gfx3d.</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
@import "../../../dojo/resources/dojo.css";
@import "../../../dijit/tests/css/dijitTests.css";
</style>
<script type="text/javascript" src="../../../dojo/dojo.js" djConfig="isDebug: true"></script>
<script type="text/javascript">
 
dojo.require("dojox.gfx3d");
 
makeObjects = function(){
var surface = dojox.gfx.createSurface("test", 500, 500);
var view = surface.createViewport();
var m = dojox.gfx3d.matrix;
 
view.createOrbit({center: {x: 0, y: 0, z: 0}, radius: 80})
.setStroke({color: "blue", width: 1});
 
var camera = dojox.gfx3d.matrix.normalize([
m.cameraRotateXg(60),
m.cameraRotateYg(30),
m.cameraRotateZg(0),
m.cameraTranslate(-300, -100, 0)
]);
 
view.applyCameraTransform(camera);
view.render();
};
 
mdebug = function(matrix){
var m = dojox.gfx3d.matrix.normalize(matrix);
console.debug("xx: " + m.xx + ", xy: " + m.xy + " | xz:" + m.xz + " | dx:" + m.dx);
console.debug("yx: " + m.yx + ", yy: " + m.yy + " | yz:" + m.yz + " | dy:" + m.dy);
console.debug("zx: " + m.zx + ", zy: " + m.zy + " | zz:" + m.zz + " | dz:" + m.dz);
};
 
dojo.addOnLoad(makeObjects);
 
</script>
</head>
<body>
<h1>Orbit Test</h1>
<p>Test how orbit looks like in 3D</p>
<div id="test" style="width: 500px; height: 500px;"></div>
<p>That's all Folks!</p>
</body>
</html>
/trunk/api/js/dojo1.0/dojox/gfx3d/tests/test_vector.html
New file
0,0 → 1,59
<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" >
<head>
<title>Dojo 3D Vector</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
@import "../../../dojo/resources/dojo.css";
@import "../../../dijit/tests/css/dijitTests.css";
</style>
<script type="text/javascript" src="../../../dojo/dojo.js" djConfig="isDebug: true"></script>
<script type="text/javascript">
 
dojo.require("dojox.gfx3d.vector");
 
pdebug = function(point){
console.debug("x: " + point.x + ", y: " + point.y + ", z: " + point.z);
};
 
dojo.addOnLoad(function(){
var m = dojox.gfx3d.vector;
console.debug("test crossProduct...");
c = m.crossProduct(1, 2, 3, 4, 5, 6);
pdebug(c);
a = {x: 1, y: 2, z: 3};
b = {x: 4, y: 5, z: 6};
c = m.crossProduct(a, b);
pdebug(c);
 
console.debug("test dotProduct...");
c = m.dotProduct(1, 2, 3, 4, 5, 6);
console.debug(c);
a = {x: 1, y: 2, z: 3};
b = {x: 4, y: 5, z: 6};
c = m.dotProduct(a, b);
console.debug(c);
 
console.debug("test sum/substract...");
a = {x: 10, y: 5, z: 8};
b = {x: 1, y: 15, z: 2};
console.debug(m.sum(a, b));
console.debug(m.substract(a, b));
 
console.debug("test normalize...");
c = {x: 0, y: 17, z: -2};
d = m.normalize(a, b, c);
e = m.normalize([a, b, c]);
console.debug(d);
console.debug( "expecting 0:", m.dotProduct(d, m.substract(b, a)));
console.debug(e);
console.debug( "expecting 0:", m.dotProduct(e, m.substract(b, a)));
 
});
 
</script>
</head>
<body>
<h1>dojox.gfx3d.vector test</h1>
<p>Please check the debug console for test results.</p>
</body>
</html>
/trunk/api/js/dojo1.0/dojox/gfx3d/tests/test_drawer.html
New file
0,0 → 1,92
<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" >
<head>
<title>Pilot test of dojox.gfx3d.</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
@import "../../../dojo/resources/dojo.css";
@import "../../../dijit/tests/css/dijitTests.css";
@import "../../../dijit/themes/tundra/tundra.css";
</style>
<script type="text/javascript" src="../../../dojo/dojo.js" djConfig="isDebug: true"></script>
<script type="text/javascript">
 
dojo.require("dojox.gfx3d");
 
var angles = {x: 0, y: 0, z: 0};
var view = null;
var cube = null;
 
function moveMe(){
var p = dojo.byId("action");
var m = dojox.gfx3d.matrix;
if(p.value == "Move to Back!"){
console.debug(p.value);
p.value = "Move to Front!";
cube.setTransform(m.translate(20, 0, -120))
}else{
p.value = "Move to Back!";
cube.setTransform(m.translate(50, 0, 150))
}
cube.invalidate();
view.render();
};
 
makeObjects = function(){
var surface = dojox.gfx.createSurface("test", 500, 500);
view = surface.createViewport();
var c = { bottom: {x: 0, y: 0, z: 0}, top :{x: 100, y: 100, z: 100} };
var xaxis = [{x: 0, y: 0, z: 0}, {x: 200, y: 0, z: 0}];
var yaxis = [{x: 0, y: 0, z: 0}, {x: 0, y: 200, z: 0}];
var zaxis = [{x: 0, y: 0, z: 0}, {x: 0, y: 0, z: 200}];
 
var m = dojox.gfx3d.matrix;
 
view.createEdges(xaxis).setStroke({color: "red", width: 1});
view.createEdges(yaxis).setStroke({color: "green", width: 1});
view.createEdges(zaxis).setStroke({color: "blue", width: 1});
 
view.createCube(c)
.setFill({type: "plastic", finish: dojox.gfx3d.lighting.finish.dull, color: "blue"})
.setStroke({color: "black", width: 1});
 
cube = view.createCube(c)
.setTransform(m.translate(50, 50, 150))
.setFill({type: "plastic", finish: dojox.gfx3d.lighting.finish.dull, color: "lime"})
.setStroke({color: "black", width: 1});
 
var camera = dojox.gfx3d.matrix.normalize([
m.cameraRotateXg(60),
m.cameraRotateYg(30),
m.cameraTranslate(-200, -300, 0)
]);
 
view.applyCameraTransform(camera);
view.setLights([{direction: {x: 10, y: 7, z: 5}, color: "white"}],
{color:"white", intensity: 2}, "white");
view.render();
 
// add the click event handler
dojo.connect(dojo.byId("action"), "onclick", moveMe);
};
 
mdebug = function(matrix){
var m = dojox.gfx3d.matrix.normalize(matrix);
console.debug("xx: " + m.xx + ", xy: " + m.xy + " | xz:" + m.xz + " | dx:" + m.dx);
console.debug("yx: " + m.yx + ", yy: " + m.yy + " | yz:" + m.yz + " | dy:" + m.dy);
console.debug("zx: " + m.zx + ", zy: " + m.zy + " | zz:" + m.zz + " | dz:" + m.dz);
};
 
dojo.addOnLoad(makeObjects);
 
</script>
</head>
<body class="tundra">
<h1>Pilot Test</h1>
<p> The color of X, Y, Z axes are red, green, blue. One cube is in the center (0, 0, 0), click the button to move the other one back
and forth, using this to test <em>dojox.gfx3d.drawer.conservative</em></p>
<input id="action" type="button" value="Move to Back!"/>
 
<div id="test" style="width: 500px; height: 500px;"></div>
<p>That's all Folks!</p>
</body>
</html>
/trunk/api/js/dojo1.0/dojox/gfx3d/tests/test_matrix.html
New file
0,0 → 1,89
<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" >
<head>
<title>Dojo 3D Matrix</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
@import "../../../dojo/resources/dojo.css";
@import "../../../dijit/tests/css/dijitTests.css";
</style>
<script type="text/javascript" src="../../../dojo/dojo.js" djConfig="isDebug: true"></script>
<script type="text/javascript">
 
dojo.require("dojox.gfx3d");
 
mdebug = function(matrix){
var m = dojox.gfx3d.matrix.normalize(matrix);
console.debug("xx: " + m.xx + ", xy: " + m.xy + " | xz:" + m.xz + " | dx:" + m.dx);
console.debug("yx: " + m.yx + ", yy: " + m.yy + " | yz:" + m.yz + " | dy:" + m.dy);
console.debug("zx: " + m.zx + ", zy: " + m.zy + " | zz:" + m.zz + " | dz:" + m.dz);
};
 
pdebug = function(point){
console.debug("x: " + point.x + ", y: " + point.y + ", z: " + point.z);
};
 
dojo.addOnLoad(function(){
var m = dojox.gfx3d.matrix;
var a = new m.Matrix3D();
console.debug("identity");
mdebug(a);
a = m.rotateXg(30);
console.debug("rotateXg(30);");
mdebug(a);
a = m.rotateYg(45);
console.debug("rotateYg(45);");
mdebug(a);
a = m.rotateZg(90);
console.debug("rotateZg(90);");
mdebug(a);
a = [new m.Matrix3D(), new m.Matrix3D(), new m.Matrix3D()];
console.debug("identity");
mdebug(a);
a = [m.rotateXg(30), m.rotateXg(-30)];
console.debug("identity");
mdebug(a);
var b = m.multiplyPoint(a, 10, 10, 10);
pdebug(b);
b = m.multiplyPoint(a, 10, 5, 10);
pdebug(b);
b = m.multiplyPoint(a, 10, 15, 5);
pdebug(b);
 
a = [m.scale(1,1,2), m.rotateXg(45)];
console.debug("a = [m.scale(1,1,2), m.rotateXg(45)];");
mdebug(a);
a = [m.rotateXg(45), m.scale(1,1,2)];
console.debug("a = [m.rotateXg(45), m.scale(1,1,2)];");
mdebug(a);
 
a = [m.scale(2,1,2), m.rotateYg(45)];
console.debug("a = [m.scale(2,1,2), m.rotateYg(45)];");
mdebug(a);
a = [m.rotateYg(45), m.scale(2,1,2)];
console.debug("a = [m.rotateYg(45), m.scale(2,1,2)];");
mdebug(a);
 
a = [m.scale(1,2,1), m.invert(m.rotateZg(45))];
console.debug("[m.scale(1,2,1), m.invert(m.rotateZg(45))];");
mdebug(a);
a = [m.invert(m.rotateZg(45)), m.scale(1,2,1)];
console.debug("a = [m.invert(m.rotateZg(45)), m.scale(1,2,1)];");
mdebug(a);
 
a = [a, m.invert(a)];
console.debug("identity");
mdebug(a);
 
a = 5;
mdebug(a);
a = [2, m.scale(2,1,3)];
mdebug(a);
});
 
</script>
</head>
<body>
<h1>dojox.gfx3d.matrix test</h1>
<p>Please check the debug console for test results.</p>
</body>
</html>
/trunk/api/js/dojo1.0/dojox/gfx3d/tests/test_camerarotate.html
New file
0,0 → 1,93
<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" >
<head>
<title>Camera rotate of dojox.gfx3d.</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
@import "../../../dojo/resources/dojo.css";
@import "../../../dijit/tests/css/dijitTests.css";
@import "../../../dijit/themes/tundra/tundra.css";
</style>
<script type="text/javascript" src="../../../dojo/dojo.js" djConfig="isDebug: false"></script>
<script type="text/javascript" src="../object.js"></script>
<script type="text/javascript" src="../scheduler.js"></script>
<script type="text/javascript">
 
dojo.require("dojox.gfx3d");
 
var angles = {x: 30, y: 30, z: 0};
var cube = null;
var view = null;
 
rotate = function() {
var m = dojox.gfx3d.matrix;
 
if(dojo.byId('rx').checked){
angles.x += 1;
}
if(dojo.byId('ry').checked){
angles.y += 1;
}
if(dojo.byId('rz').checked){
angles.z += 1;
}
var t = m.normalize([
m.cameraTranslate(-300, -200, 0),
m.cameraRotateXg(angles.x),
m.cameraRotateYg(angles.y),
m.cameraRotateZg(angles.z)
]);
console.debug(t);
view.setCameraTransform(t);
view.render();
}
 
makeObjects = function(){
var surface = dojox.gfx.createSurface("test", 500, 500);
view = surface.createViewport();
 
var c = {bottom: {x: 0, y: 0, z: 0}, top :{x: 100, y: 100, z: 100}};
var xaxis = [{x: 0, y: 0, z: 0}, {x: 200, y: 0, z: 0}];
var yaxis = [{x: 0, y: 0, z: 0}, {x: 0, y: 200, z: 0}];
var zaxis = [{x: 0, y: 0, z: 0}, {x: 0, y: 0, z: 200}];
 
var m = dojox.gfx3d.matrix;
 
view.createEdges(xaxis).setStroke({color: "red", width: 1});
view.createEdges(yaxis).setStroke({color: "green", width: 1});
view.createEdges(zaxis).setStroke({color: "blue", width: 1});
cube = view.createCube(c).setStroke({color: "lime", width: 1});
 
var camera = dojox.gfx3d.matrix.normalize([
m.cameraTranslate(-300, -200, 0),
m.cameraRotateXg(angles.x),
m.cameraRotateYg(angles.y),
m.cameraRotateZg(angles.z),
]);
 
view.applyCameraTransform(camera);
view.render();
window.setInterval(rotate, 50);
};
 
dojo.addOnLoad(makeObjects);
 
</script>
</head>
<body class="tundra">
<h1>Camera rotate</h1>
<p>The cube is in the center (0, 0, 0): The color of X, Y, Z axes are red, green, blue. The view renders all the objects
in each frame, the <em>conservative</em> drawer is used.</p>
<form>
<input id="rx" type="checkbox" name="rotateX" checked="true" value="on"/>
<label for="rx"> Rotate around X-axis</label> <br/>
<input id="ry" type="checkbox" name="rotateY" checked="false" value="off"/>
<label for="ry"> Rotate around Y-axis</label> <br/>
<input id="rz" type="checkbox" name="rotateZ" checked="false" value="off"/>
<label for="rz"> Rotate around Z-axis</label> <br/>
</form>
 
<div id="test" style="width: 500px; height: 500px;"></div>
<p>That's all Folks!</p>
</body>
</html>
/trunk/api/js/dojo1.0/dojox/gfx3d/tests/test_edges.html
New file
0,0 → 1,73
<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" >
<head>
<title>Edges test of dojox.gfx3d.</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
@import "../../../dojo/resources/dojo.css";
@import "../../../dijit/tests/css/dijitTests.css";
</style>
<script type="text/javascript" src="../../../dojo/dojo.js" djConfig="isDebug: true"></script>
<script type="text/javascript">
 
dojo.require("dojox.gfx3d");
 
makeObjects = function(){
var surface = dojox.gfx.createSurface("test", 500, 500);
var view = surface.createViewport();
var lines = [
{x: 100, y: 10, z: 5},
{x: 80, y: 80, z: 55},
{x: 120, y: 80, z: 75},
{x: 250, y: 92, z: 15},
{x: 200, y: 25, z: 5},
{x: 156, y: 40, z: 45}
];
 
var m = dojox.gfx3d.matrix;
var loop = view.createEdges(lines, "loop")
.setStroke({color: "blue", width: 1})
.applyTransform(dojox.gfx3d.matrix.translate({x: 0, y: 0, z: 0}));
 
var strip = view.createEdges(lines, "strip")
.setStroke({color: "red", width: 1})
.applyTransform(dojox.gfx3d.matrix.translate({x: 0, y: 100, z: 0}));
 
var normal = view.createEdges(lines)
.setStroke({color: "lime", width: 1})
.applyTransform(dojox.gfx3d.matrix.translate({x: 0, y: 200, z: 0}));
 
var camera = dojox.gfx3d.matrix.normalize([
m.cameraRotateZg(20),
//m.cameraRotateYg(30),
//m.cameraRotateXg(50),
m.cameraTranslate(0, 0, 0)
]);
 
view.applyCameraTransform(camera);
view.render();
};
 
mdebug = function(matrix){
var m = dojox.gfx3d.matrix.normalize(matrix);
console.debug("xx: " + m.xx + ", xy: " + m.xy + " | xz:" + m.xz + " | dx:" + m.dx);
console.debug("yx: " + m.yx + ", yy: " + m.yy + " | yz:" + m.yz + " | dy:" + m.dy);
console.debug("zx: " + m.zx + ", zy: " + m.zy + " | zz:" + m.zz + " | dz:" + m.dz);
};
 
 
dojo.addOnLoad(makeObjects);
 
</script>
</head>
<body>
<h1>Edges Test</h1>
<p> Test of the Edges, there are three modes</p>
<ul>
<li>none, any two vertice pair form one edge, lime</li>
<li>strip, vertices are connected by edges. red</li>
<li>loop, the same as strip, close the path, blue</li>
</ul>
<div id="test" style="width: 500px; height: 500px;"></div>
<p>That's all Folks!</p>
</body>
</html>
/trunk/api/js/dojo1.0/dojox/gfx3d/tests/test_polygon.html
New file
0,0 → 1,44
<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" >
<head>
<title>Polygon test of dojox.gfx3d.</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
@import "../../../dojo/resources/dojo.css";
@import "../../../dijit/tests/css/dijitTests.css";
</style>
<script type="text/javascript" src="../../../dojo/dojo.js" djConfig="isDebug: true"></script>
<script type="text/javascript">
 
dojo.require("dojox.gfx3d");
 
makeObjects = function(){
var surface = dojox.gfx.createSurface("test", 500, 500);
var view = surface.createViewport();
var poly = [{x: 0, y: 0, z: 0}, {x: 0, y: 100, z: 0}, {x: 100, y: 100, z: 0}, {x: 100, y: 0, z: 0}];
var m = dojox.gfx3d.matrix;
t = view.createPolygon(poly)
.setStroke({color: "blue", width: 1})
.setFill("#cc0");
var camera = dojox.gfx3d.matrix.normalize([
m.cameraRotateXg(30),
m.cameraRotateYg(30),
//m.cameraRotateZg(15),
m.cameraTranslate(-0, 0, 0)
]);
 
view.applyCameraTransform(camera);
view.render();
};
 
dojo.addOnLoad(makeObjects);
 
</script>
</head>
<body>
<h1>Polygon Test</h1>
<div id="test" style="width: 500px; height: 500px;"></div>
<p>That's all Folks!</p>
</body>
</html>
/trunk/api/js/dojo1.0/dojox/gfx3d/tests/test_overlap.html
New file
0,0 → 1,69
<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" >
<head>
<title>Test of dojox.gfx3d.scheduler</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
@import "../../../dojo/resources/dojo.css";
@import "../../../dijit/tests/css/dijitTests.css";
</style>
<script type="text/javascript" src="../../../dojo/dojo.js" djConfig="isDebug: true"></script>
<script type="text/javascript">
 
dojo.require("dojox.gfx3d");
var view = null;
 
makeObjects = function(){
var surface = dojox.gfx.createSurface("test", 500, 500);
view = surface.createViewport();
var tas = [
[{x: 100, y: 0, z: 0}, {x: 100, y: 100, z: 0}, {x: 50, y: 50, z: 50}],
[{x: 100, y: 0, z: 0}, {x: 100, y: 100, z: 0}, {x: 0, y: 70, z: 50}]
];
var fills = ["#0cc", "#c0c"];
 
var m = dojox.gfx3d.matrix;
for(var i = 0; i < tas.length; i++){
console.debug(fills[i]);
view.createPolygon(tas[i])
.setStroke({color: "blue", width: 1})
.setFill(fills[i]);
}
var camera = dojox.gfx3d.matrix.normalize([m.cameraTranslate(0, -300, 0)]);
 
view.applyCameraTransform(camera);
view.render();
// set up the click handlers.
dojo.connect(dojo.byId("bsp"), "onclick", renderWithBSP);
dojo.connect(dojo.byId("zorder"), "onclick", renderWithZOrder);
};
 
render = function(title, render){
dojo.byId("render").innerHTML = title;
view.setScheduler(render);
view.invalidate();
view.render();
};
 
renderWithBSP = function(){
render("BSP", dojox.gfx3d.scheduler.bsp);
};
 
renderWithZOrder = function(){
render("ZOrder", dojox.gfx3d.scheduler.zOrder);
};
 
dojo.addOnLoad(makeObjects);
 
</script>
</head>
<body>
<h1>Scheduler Test</h1>
<p>There are two schedulers available in dojox.gfx3d, zOrder and BSP. zOrder is much simpler, and it performs quite well in most cases, it may fail in some rare cases, for example: two triangles share the same two vertice, and have the same Z value of the third vertex, in this case, they have the same z-order. They are rendered in arbitary order. In this case, BSP is the rescure.</p>
<p>Current render: <strong id="render">default</strong></p>
<p><button id="bsp">BSP</button>&nbsp;<button id="zorder">zOrder</button></p>
<div id="test" style="width: 500px; height: 500px;"></div>
<p>That's all Folks!</p>
</body>
</html>
/trunk/api/js/dojo1.0/dojox/gfx3d/tests/test_triangles.html
New file
0,0 → 1,82
<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" >
<head>
<title>Triangles test of dojox.gfx3d.</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
@import "../../../dojo/resources/dojo.css";
@import "../../../dijit/tests/css/dijitTests.css";
</style>
<script type="text/javascript" src="../../../dojo/dojo.js" djConfig="isDebug: true"></script>
<script type="text/javascript">
 
dojo.require("dojox.gfx3d");
 
makeObjects = function(){
var surface = dojox.gfx.createSurface("test", 500, 500);
var view = surface.createViewport();
var points = [
{x: 0, y: 0, z: 150},
{x: 50, y: 0, z: 0},
{x: 0, y: 50, z: 0},
{x: 0, y: 0, z: 150},
{x: 50, y: 0, z: 0},
{x: 0, y: -50, z: 0}
];
var fan = [
{x: 0, y: 0, z: 150},
{x: 50, y: 0, z: 0},
{x: 0, y: 50, z: 0},
{x: -50, y: 0, z: 0},
{x: 0, y: -50, z: 0}
];
var strip = [
{x: 0, y: -50, z: 0},
{x: 0, y: 0, z: 150},
{x: 50, y: 0, z: 0},
{x: 0, y: 50, z: 0}
];
 
var m = dojox.gfx3d.matrix;
var normal = view.createTriangles(points)
.setStroke({color: "blue", width: 1})
.setFill("#ccc")
.applyTransform(dojox.gfx3d.matrix.translate({x: 0, y: 0, z: 10}));
 
view.createTriangles(strip, "strip")
.setStroke({color: "red", width: 1})
.setFill("#ccc")
.applyTransform(dojox.gfx3d.matrix.translate({x: 150, y: 0, z: 10}));
 
view.createTriangles(fan, "fan")
.setStroke({color: "lime", width: 1})
.setFill("#ccc")
.applyTransform(dojox.gfx3d.matrix.translate({x: 300, y: 0, z: 10}));
 
var camera = dojox.gfx3d.matrix.normalize([
m.cameraRotateXg(-30),
m.cameraRotateYg(-10),
m.cameraTranslate(-50, -100, 0)
]);
 
view.applyCameraTransform(camera);
view.render();
};
 
mdebug = function(matrix){
var m = dojox.gfx3d.matrix.normalize(matrix);
console.debug("xx: " + m.xx + ", xy: " + m.xy + " | xz:" + m.xz + " | dx:" + m.dx);
console.debug("yx: " + m.yx + ", yy: " + m.yy + " | yz:" + m.yz + " | dy:" + m.dy);
console.debug("zx: " + m.zx + ", zy: " + m.zy + " | zz:" + m.zz + " | dz:" + m.dz);
};
 
 
dojo.addOnLoad(makeObjects);
 
</script>
</head>
<body>
<h1>Path3d Test</h1>
<div id="test" style="width: 500px; height: 500px;"></div>
<p>That's all Folks!</p>
</body>
</html>
/trunk/api/js/dojo1.0/dojox/gfx3d/tests/test_cylinder.html
New file
0,0 → 1,66
<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" >
<head>
<title>Cylinder test of dojox.gfx3d.</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
@import "../../../dojo/resources/dojo.css";
@import "../../../dijit/tests/css/dijitTests.css";
</style>
<script type="text/javascript" src="../../../dojo/dojo.js" djConfig="isDebug: true"></script>
<script type="text/javascript" src="../lighting.js"></script>
<script type="text/javascript" src="../gradient.js"></script>
<script type="text/javascript" src="../object.js"></script>
<script type="text/javascript">
 
dojo.require("dojox.gfx3d");
 
makeObjects = function(){
var surface = dojox.gfx.createSurface("test", 500, 400);
var view = surface.createViewport();
view.setLights([
{direction: {x: 0, y: 0, z: -10}, color: "white"},
{direction: {x: 10, y: 0, z: -10}, color: "#444"}
], {color: "white", intensity: 2}, "white");
 
var m = dojox.gfx3d.matrix;
view.createCylinder({})
.setTransform([m.translate(150, 250, 0), m.rotateZg(60), m.rotateXg(-60)])
.setStroke("black")
.setFill({type: "plastic", finish: "glossy", color: "red"});
view.createCylinder({})
.setTransform([m.translate(150, 100, 0), m.rotateZg(45), m.rotateXg(-135)])
.setStroke("black")
.setFill({type: "plastic", finish: "shiny", color: "yellow"});
 
view.createCylinder({})
.setTransform([m.translate(250, 200, 0), m.rotateZg(-30), m.rotateXg(-30)])
.setStroke("black")
.setFill({type: "plastic", finish: "dull", color: "lime"});
 
//var camera = m.normalize([m.cameraRotateXg(15), m.cameraRotateYg(15), m.cameraTranslate(-200, -300, 0)]);
//var camera = m.normalize([m.cameraRotateXg(15), m.cameraRotateYg(15)]);
var camera = m.normalize({});
 
view.applyCameraTransform(camera);
view.render();
};
 
mdebug = function(matrix){
var m = dojox.gfx3d.matrix.normalize(matrix);
console.debug("xx: " + m.xx + ", xy: " + m.xy + " | xz:" + m.xz + " | dx:" + m.dx);
console.debug("yx: " + m.yx + ", yy: " + m.yy + " | yz:" + m.yz + " | dy:" + m.dy);
console.debug("zx: " + m.zx + ", zy: " + m.zy + " | zz:" + m.zz + " | dz:" + m.dz);
};
 
dojo.addOnLoad(makeObjects);
 
</script>
</head>
<body>
<h1>Cylinder Test</h1>
<div id="test" style="width: 500px; height: 400px;"></div>
<p>That's all Folks!</p>
</body>
</html>
/trunk/api/js/dojo1.0/dojox/gfx3d/tests/test_quads.html
New file
0,0 → 1,78
<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" >
<head>
<title>Quads test of dojox.gfx3d.</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
@import "../../../dojo/resources/dojo.css";
@import "../../../dijit/tests/css/dijitTests.css";
</style>
<script type="text/javascript" src="../../../dojo/dojo.js" djConfig="isDebug: true"></script>
<script type="text/javascript">
 
dojo.require("dojox.gfx3d");
 
makeObjects = function(){
var surface = dojox.gfx.createSurface("test", 500, 500);
var view = surface.createViewport();
var strip = [
{x: 50, y: 0, z: 0},
{x: 70, y: 0, z: 60},
{x: 0, y: 70, z: 60},
{x: 0, y: 50, z: 0},
{x: -50, y: 0, z: 0},
{x: -70, y: 0, z: 60},
{x: 0, y: -70, z: 60},
{x: 0, y: -50, z: 0}
];
 
var normal = [
{x: 50, y: 0, z: 0},
{x: 70, y: 0, z: 60},
{x: 0, y: 70, z: 60},
{x: 0, y: 50, z: 0},
{x: 0, y: 70, z: 60},
{x: 0, y: 50, z: 0},
{x: -50, y: 0, z: 0},
{x: -70, y: 0, z: 60}
];
 
var m = dojox.gfx3d.matrix;
view.createQuads(normal)
.setStroke({color: "blue", width: 1})
.setFill("#f00")
.applyTransform(dojox.gfx3d.matrix.translate({x: 0, y: 500, z: 10}));
 
view.createQuads(strip, "strip")
.setStroke({color: "red", width: 1})
.setFill("#0f0")
.applyTransform(dojox.gfx3d.matrix.translate({x: 0, y: 200, z: 10}));
 
var camera = dojox.gfx3d.matrix.normalize([
m.cameraRotateXg(30),
m.cameraRotateYg(30),
m.cameraRotateXg(50),
m.cameraTranslate(-100, -100, 0)
]);
 
view.applyCameraTransform(camera);
view.render();
};
 
mdebug = function(matrix){
var m = dojox.gfx3d.matrix.normalize(matrix);
console.debug("xx: " + m.xx + ", xy: " + m.xy + " | xz:" + m.xz + " | dx:" + m.dx);
console.debug("yx: " + m.yx + ", yy: " + m.yy + " | yz:" + m.yz + " | dy:" + m.dy);
console.debug("zx: " + m.zx + ", zy: " + m.zy + " | zz:" + m.zz + " | dz:" + m.dz);
};
 
 
dojo.addOnLoad(makeObjects);
 
</script>
</head>
<body>
<h1>Quads Test</h1>
<div id="test" style="width: 500px; height: 500px;"></div>
<p>That's all Folks!</p>
</body>
</html>
/trunk/api/js/dojo1.0/dojox/gfx3d/tests/test_scene.html
New file
0,0 → 1,66
<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" >
<head>
<title>Scene test of dojox.gfx3d.</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
@import "../../../dojo/resources/dojo.css";
@import "../../../dijit/tests/css/dijitTests.css";
</style>
<script type="text/javascript" src="../../../dojo/dojo.js" djConfig="isDebug: true"></script>
<script type="text/javascript">
 
dojo.require("dojox.gfx3d");
 
var view = null;
 
makeObjects = function(){
var surface = dojox.gfx.createSurface("test", 500, 500);
view = surface.createViewport();
var c = {bottom: {x: 0, y: 0, z: 0}, top: {x: 100, y: 100, z: 100}};
var m = dojox.gfx3d.matrix;
 
var sc1 = view.createScene();
sc1.createCube(c).setStroke({color: "blue", width: 1});
 
var sc2 = view.createScene();
sc2.createCube(c).setStroke({color: "red", width: 1}).setFill("lime");
 
var poly = [{x: 0, y: 0, z: 0}, {x: 0, y: 100, z: 0}, {x: 100, y: 100, z: 0}, {x: 100, y: 0, z: 0}];
sc2.createPolygon(poly)
.setStroke({color: "blue", width: 1})
.setTransform(dojox.gfx3d.matrix.translate(50, 20, 30))
.setFill("yellow");
 
sc2.setTransform(dojox.gfx3d.matrix.translate(100, 200, 30))
var camera = dojox.gfx3d.matrix.normalize([
m.cameraRotateXg(30),
m.cameraRotateYg(60),
m.cameraTranslate(0, 0, 0)
]);
 
view.applyCameraTransform(camera);
view.render();
 
// set up the click handlers.
dojo.connect(dojo.byId("rotate"), "onclick", rotate);
};
 
rotate = function() {
view.applyCameraTransform(dojox.gfx3d.matrix.rotateXg(10));
view.invalidate();
view.render();
};
 
dojo.addOnLoad(makeObjects);
 
</script>
</head>
<body>
<h1>Scene Test</h1>
<p>Test the setTransform of the Scene. the lime cube and yellow polygon are grouped in one Scene, and they are moved in one shot.</p>
<p>Test Viewport.invalidate with Scene. <input id="rotate" type="button" value="Rotate around Z-Axis"/></p>
<div id="test" style="width: 500px; height: 500px;"></div>
<p>That's all Folks!</p>
</body>
</html>