1 | <html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" > |
---|
2 | <head> |
---|
3 | <title>Triangles test of dojox.gfx3d.</title> |
---|
4 | <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> |
---|
5 | <style type="text/css"> |
---|
6 | @import "../../../dojo/resources/dojo.css"; |
---|
7 | @import "../../../dijit/tests/css/dijitTests.css"; |
---|
8 | </style> |
---|
9 | <script type="text/javascript" src="../../../dojo/dojo.js" data-dojo-config="isDebug: true"></script> |
---|
10 | <script type="text/javascript"> |
---|
11 | |
---|
12 | dojo.require("dojox.gfx3d"); |
---|
13 | |
---|
14 | makeObjects = function(){ |
---|
15 | var surface = dojox.gfx.createSurface("test", 500, 500); |
---|
16 | var view = surface.createViewport(); |
---|
17 | var points = [ |
---|
18 | {x: 0, y: 0, z: 150}, |
---|
19 | {x: 50, y: 0, z: 0}, |
---|
20 | {x: 0, y: 50, z: 0}, |
---|
21 | {x: 0, y: 0, z: 150}, |
---|
22 | {x: 50, y: 0, z: 0}, |
---|
23 | {x: 0, y: -50, z: 0} |
---|
24 | ]; |
---|
25 | var fan = [ |
---|
26 | {x: 0, y: 0, z: 150}, |
---|
27 | {x: 50, y: 0, z: 0}, |
---|
28 | {x: 0, y: 50, z: 0}, |
---|
29 | {x: -50, y: 0, z: 0}, |
---|
30 | {x: 0, y: -50, z: 0} |
---|
31 | ]; |
---|
32 | var strip = [ |
---|
33 | {x: 0, y: -50, z: 0}, |
---|
34 | {x: 0, y: 0, z: 150}, |
---|
35 | {x: 50, y: 0, z: 0}, |
---|
36 | {x: 0, y: 50, z: 0} |
---|
37 | ]; |
---|
38 | |
---|
39 | var m = dojox.gfx3d.matrix; |
---|
40 | var normal = view.createTriangles(points) |
---|
41 | .setStroke({color: "blue", width: 1}) |
---|
42 | .setFill("#ccc") |
---|
43 | .applyTransform(dojox.gfx3d.matrix.translate({x: 0, y: 0, z: 10})); |
---|
44 | |
---|
45 | view.createTriangles(strip, "strip") |
---|
46 | .setStroke({color: "red", width: 1}) |
---|
47 | .setFill("#ccc") |
---|
48 | .applyTransform(dojox.gfx3d.matrix.translate({x: 150, y: 0, z: 10})); |
---|
49 | |
---|
50 | view.createTriangles(fan, "fan") |
---|
51 | .setStroke({color: "lime", width: 1}) |
---|
52 | .setFill("#ccc") |
---|
53 | .applyTransform(dojox.gfx3d.matrix.translate({x: 300, y: 0, z: 10})); |
---|
54 | |
---|
55 | var camera = dojox.gfx3d.matrix.normalize([ |
---|
56 | m.cameraRotateXg(-30), |
---|
57 | m.cameraRotateYg(-10), |
---|
58 | m.cameraTranslate(-50, -100, 0) |
---|
59 | ]); |
---|
60 | |
---|
61 | view.applyCameraTransform(camera); |
---|
62 | view.render(); |
---|
63 | }; |
---|
64 | |
---|
65 | mdebug = function(matrix){ |
---|
66 | var m = dojox.gfx3d.matrix.normalize(matrix); |
---|
67 | console.debug("xx: " + m.xx + ", xy: " + m.xy + " | xz:" + m.xz + " | dx:" + m.dx); |
---|
68 | console.debug("yx: " + m.yx + ", yy: " + m.yy + " | yz:" + m.yz + " | dy:" + m.dy); |
---|
69 | console.debug("zx: " + m.zx + ", zy: " + m.zy + " | zz:" + m.zz + " | dz:" + m.dz); |
---|
70 | }; |
---|
71 | |
---|
72 | |
---|
73 | dojo.addOnLoad(makeObjects); |
---|
74 | |
---|
75 | </script> |
---|
76 | </head> |
---|
77 | <body> |
---|
78 | <h1>Path3d Test</h1> |
---|
79 | <div id="test" style="width: 500px; height: 500px;"></div> |
---|
80 | <p>That's all Folks!</p> |
---|
81 | </body> |
---|
82 | </html> |
---|