1 | <!doctype html>
|
2 | <html>
|
3 | <head>
|
4 | <title>Graph 3D camera position</title>
|
5 |
|
6 | <style>
|
7 | body {font: 10pt arial;}
|
8 | td {font: 10pt arial}
|
9 | </style>
|
10 |
|
11 | <script type="text/javascript" src="../../dist/vis-graph3d.min.js"></script>
|
12 |
|
13 | <script type="text/javascript">
|
14 | var data = null;
|
15 | var graph = null;
|
16 |
|
17 | function custom(x, y) {
|
18 | return (Math.sin(x/50) * Math.cos(y/50) * 50 + 50);
|
19 | }
|
20 |
|
21 |
|
22 | function onCameraPositionChange() {
|
23 |
|
24 | var pos = graph.getCameraPosition();
|
25 | document.getElementById('horizontal').value = parseFloat(pos.horizontal.toFixed(3));
|
26 | document.getElementById('vertical').value = parseFloat(pos.vertical.toFixed(3));
|
27 | document.getElementById('distance').value = parseFloat(pos.distance.toFixed(3));
|
28 | }
|
29 |
|
30 |
|
31 | function setCameraPosition() {
|
32 | var horizontal = parseFloat(document.getElementById('horizontal').value);
|
33 | var vertical = parseFloat(document.getElementById('vertical').value);
|
34 | var distance = parseFloat(document.getElementById('distance').value);
|
35 | var pos = {
|
36 | horizontal: horizontal,
|
37 | vertical: vertical,
|
38 | distance: distance
|
39 | };
|
40 | graph.setCameraPosition(pos);
|
41 |
|
42 |
|
43 | onCameraPositionChange();
|
44 | }
|
45 |
|
46 |
|
47 | function drawVisualization() {
|
48 |
|
49 | data = new vis.DataSet();
|
50 |
|
51 | var steps = 50;
|
52 | var axisMax = 314;
|
53 | var axisStep = axisMax / steps;
|
54 | for (var x = 0; x < axisMax; x+=axisStep) {
|
55 | for (var y = 0; y < axisMax; y+=axisStep) {
|
56 | var value = custom(x,y);
|
57 | data.add([
|
58 | {x:x,y:y,z:value,t:0,style:value}
|
59 | ]);
|
60 | }
|
61 | }
|
62 |
|
63 |
|
64 | var options = {
|
65 | width: '600px',
|
66 | height: '600px',
|
67 | style: 'surface',
|
68 | showPerspective: true,
|
69 | showGrid: true,
|
70 | showShadow: false,
|
71 | keepAspectRatio: true,
|
72 | verticalRatio: 0.5
|
73 | };
|
74 |
|
75 |
|
76 | var container = document.getElementById('mygraph');
|
77 | graph = new vis.Graph3d(container, data, options);
|
78 |
|
79 | graph.on('cameraPositionChange', onCameraPositionChange);
|
80 | }
|
81 | </script>
|
82 |
|
83 | </head>
|
84 |
|
85 | <body onload="drawVisualization()">
|
86 | <h1>Graph 3d camera position</h1>
|
87 | <table>
|
88 | <tr>
|
89 | <td>Horizontal angle (0 to 2*pi)</td>
|
90 | <td><input type="text" id="horizontal" value="1.0"></td>
|
91 | </tr>
|
92 | <tr>
|
93 | <td>Vertical angle (0 to 0.5*pi)</td>
|
94 | <td><input type="text" id="vertical" value="0.5"></td>
|
95 | </tr>
|
96 | <tr>
|
97 | <td>Distance (0.71 to 5.0)</td>
|
98 | <td><input type="text" id="distance" value="1.7"></td>
|
99 | </tr>
|
100 | <tr>
|
101 | <td></td>
|
102 | <td><input type="button" value="Set" onclick="setCameraPosition();"></td>
|
103 | </tr>
|
104 | </table>
|
105 |
|
106 | <div id="mygraph"></div>
|
107 |
|
108 | <div id="info"></div>
|
109 | </body>
|
110 | </html>
|