diff options
Diffstat (limited to 'includes/js/dojox/gfx3d/tests/test_camerarotate_shaded.html')
| -rw-r--r-- | includes/js/dojox/gfx3d/tests/test_camerarotate_shaded.html | 97 |
1 files changed, 97 insertions, 0 deletions
diff --git a/includes/js/dojox/gfx3d/tests/test_camerarotate_shaded.html b/includes/js/dojox/gfx3d/tests/test_camerarotate_shaded.html new file mode 100644 index 0000000..e9c0312 --- /dev/null +++ b/includes/js/dojox/gfx3d/tests/test_camerarotate_shaded.html @@ -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> |