-
Notifications
You must be signed in to change notification settings - Fork 0
/
003-RuntimeConfiguration.html
115 lines (107 loc) · 3.89 KB
/
003-RuntimeConfiguration.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
<html>
<head>
<title>Runtime Configuration</title>
<meta charset="UTF-8">
<meta name="author" content="Alexoah YT">
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<!-------------------------------------------------------
BEGIN: needed to insert this block so the X3DOM will work.
-->
<script type="text/javascript" src="http://www.x3dom.org/download/x3dom.js"></script>
<link rel="stylesheet" type="text/css" href="http://www.x3dom.org/download/x3dom.css">
<!--
END: needed to insert this block so the X3DOM will work.
--------------------------------------------------------->
<!-------------------------------------------------------
BEGIN: function.
-->
<script>
// change the shape color.
function changeColor(currentCaller) {
var curColor = document.getElementById(currentCaller).getAttribute('diffuseColor');
switch(curColor) {
case '1 0 1':
curColor = '0 1 1';
break;
case '0 1 1':
curColor = '1 1 0';
break;
case '1 1 0':
curColor = '1 0 1';
break;
default:
curColor = '1 0 0';
}
document.getElementById(currentCaller).setAttribute('diffuseColor', curColor);
}
</script>
<!--
END: function.
--------------------------------------------------------->
<!-------------------------------------------------------
BEGIN: override some CSS.
-->
<link rel="stylesheet" type="text/css" href="./style/mainstyle.css">
<!-- BEGIN: this style will apply only in current file -->
<style>
body {
background-color: #EEEEEE;
}
.takenotice {
color: #FF0000;
}
x3d {
border: 2px solid darkblue;
background: rgba(128, 128, 128, 0.4);
}
</style>
<!-- END: this style will apply only in current file -->
<!--
END: override some CSS.
--------------------------------------------------------->
</head>
<body>
<h1>Runtime Configuration</h1>
<p>Now, some experiment with runtime default behavior ... by setting params.
<ul>
<li><em>The stat is activated.</em><br/>
Have you seen an additional box with some stats over there?</li><br/>
<li><em>The primitives are rendered in low quality.</em><br/>
When you try to zoom in / out the objects, you'll notice the quality difference if you compare them with the objects from previous page <a class="takenotice" href="002-OverrideCSSFunction.html">002-OverrideCSSFunction</a>.</li>
</ul><p/>
<p>Stat window is no longer needed? The stat window has somehow disappeared and you want to display it again? Or are you not even sure which one the stat window is?<br/>
Try clicking the object area first, then press the space bar to toggle the visibility of the stat window.<br/><br/>
<!-- using percent for width, just in case the browser needs to be resized -->
<x3d width="100%" height="400px" showStat="true" showLog="false" primitiveQuality="low" showProgress="false">
<scene>
<!-- the order for translation is 'x y z' -->
<transform translation='0 0 0'>
<shape onclick="changeColor('box');">
<appearance>
<material id="box" diffuseColor='1 0 1'></material>
</appearance>
<box></box>
</shape>
</transform>
<transform translation='2.5 0 0'>
<shape onclick="changeColor('cone');">
<appearance>
<material id="cone" diffuseColor='0 1 1'></material>
</appearance>
<cone></cone>
</shape>
</transform>
<transform translation='-2.5 0 0'>
<shape onclick="changeColor('sphere');">
<appearance>
<material id="sphere" diffuseColor='1 1 0'></material>
</appearance>
<sphere></sphere>
</shape>
</transform>
</scene>
</x3d>
<hr noshade>
<p id="footer_github"><sup><img class="emoji" title=":octocat:" alt=":octocat:" src="https://github.githubassets.com/images/icons/emoji/octocat.png" height="20" width="20" align="absmiddle"> Created by <a href="http://github.com/alexoah">@alexoah</a> at GitHub.</sup></p>
</body>
</html>