-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
109 lines (109 loc) · 8.31 KB
/
index.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>VirtualKnot</title>
<script src="https://aframe.io/releases/0.2.0/aframe.min.js"></script>
<script src="https://code.jquery.com/jquery-2.1.1.js"></script>
<script src="https://rawgit.com/ngokevin/aframe-text-component/master/dist/aframe-text-component.min.js"></script>
<script src="knot.js"></script>
</head>
<body>
<a-scene>
<!-- cam -->
<a-entity id="camera" rotation="0 0 0" position="0 0 5">
<a-camera>
<a-entity cursor="maxDistance:10000" position="0 0 -1" material="color:pink" geometry="primitive:ring; radiusInner:.005; radiusOuter:.01"></a-entity>
</a-camera>
</a-entity>
<!-- #knot -->
<a-entity id="knot">
<a-entity id="knott" geometry="primitive:torusKnot; p:" + pVal + "; q:" + qVal+ ";" position="0 0 0" rotation="0 0 0" material="color:#D5573B"></a-entity>
</a-entity>
<!-- up and down movement buttons -->
<a-entity>
<a-entity class="switchTag" id="upKnot" geometry="primitive:plane" scale=".7 .7 .7" position ="-5.5 1 0" material="src:url(https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-arrow-up-b-128.png)"</a-entity>
</a-entity>
<a-entity>
<a-entity class="switchTag" id="downKnot" geometry="primitive:plane" scale=".7 .7 .7" position ="-5.5 -1 0" material="src:url(https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-arrow-down-b-128.png)"</a-entity>
</a-entity>
<a-entity class="colortext switchColor" position="-6 0 0" material="color:#F7CAC9" scale=".4 .4 .4" text="text:Elevator"></a-entity>
<!-- color buttons -->
<a-entity>
<a-entity class="switchTag" id="upColor" geometry="primitive:plane" scale=".7 .7 .7" position ="-4.5 1 0" material="src:url(https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-arrow-up-b-128.png)"</a-entity>
</a-entity>
<a-entity>
<a-entity class="switchTag" id="downColor" geometry="primitive:plane" scale=".7 .7 .7" position ="-4.5 -1 0" material="src:url(https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-arrow-down-b-128.png)"</a-entity>
</a-entity>
<a-entity class="colortext switchColor" position="-4.75 0 0" material="color:#F7CAC9" scale=".4 .4 .4" text="text:Color"></a-entity>
<!-- knot p and q val buttons -->
<a-entity>
<a-entity class="switchTag" id="upP" geometry="primitive:plane" scale=".7 .7 .7" position ="-3.5 1 0" material="src:url(https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-arrow-up-b-128.png)"</a-entity>
</a-entity>
<a-entity>
<a-entity class="switchTag" id="downP" geometry="primitive:plane" scale=".7 .7 .7" position ="-3.5 -1 0" material="src:url(https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-arrow-down-b-128.png)"</a-entity>
</a-entity>
<a-entity>
<a-entity class="switchTag" id="upQ" geometry="primitive:plane" scale=".7 .7 .7" position ="-2.5 1 0" material="src:url(https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-arrow-up-b-128.png)"</a-entity>
</a-entity>
<a-entity>
<a-entity class="switchTag" id="downQ" geometry="primitive:plane" scale=".7 .7 .7" position ="-2.5 -1 0" material="src:url(https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-arrow-down-b-128.png)"</a-entity>
</a-entity>
<!-- to have button descriptions for the knot's p and q value -->
<a-entity class="vals pValText switchColor" position="-3.75 0 0" material="color:#F7CAC9" scale=".4 .4 .4" text="text:pVal"></a-entity>
<a-entity class="vals qValText switchColor" position="-2.75 0 0" material="color:#F7CAC9" scale=".4 .4 .4" text="text:qVal"></a-entity>
<!-- radius button and descriptions -->
<a-entity class="vals radiusText switchColor" position="2.15 0 0" material="color:#F7CAC9" scale=".3 .3 .3" text="text:radius"></a-entity>
<a-entity>
<a-entity class="switchTag switchUp" id="upRadius" geometry="primitive:plane" scale=".7 .7 .7" position ="2.5 1 0" material="src:url(https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-arrow-up-b-128.png)"</a-entity>
</a-entity>
<a-entity>
<a-entity class="switchTag switchDown" id="downRadius" geometry="primitive:plane" scale=".7 .7 .7" position ="2.5 -1 0" material="src:url(https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-arrow-down-b-128.png)"</a-entity>
</a-entity>
<!-- rotation buttons and description -->
<!-- up and down rotation tags -->
<a-entity class="vals rotationText switchColor" position="3.5 .3 0" material="color:#F7CAC9" scale=".25 .25 .25" rotation="0 0 -90" text="text:rotation"></a-entity>
<a-entity class="vals rotationText switchColor" position="3.4 .47 0" material="color:#F7CAC9" scale=".25 .25 .25" rotation="0 0 0" text="text:up"></a-entity>
<a-entity class="vals rotationText switchColor" position="3.35 -.6 0" material="color:#F7CAC9" scale=".25 .25 .25" rotation="0 0 0" text="text:down"></a-entity>
<!-- left and right rotation tags -->
<a-entity class="vals rotationText switchColor" position="4.5 .3 0" material="color:#F7CAC9" scale=".25 .25 .25" rotation="0 0 -90" text="text:rotation"></a-entity>
<a-entity class="vals rotationText switchColor" position="4.4 .47 0" material="color:#F7CAC9" scale=".25 .25 .25" rotation="0 0 0" text="text:left"></a-entity>
<a-entity class="vals rotationText switchColor" position="4.35 -.6 0" material="color:#F7CAC9" scale=".25 .25 .25" rotation="0 0 0" text="text:right"></a-entity>
<!-- z rotation tags -->
<a-entity class="vals rotationText switchColor" position="5.4 .47 0" material="color:#F7CAC9" scale=".25 .25 .25" rotation="0 0 0" text="text:zup"></a-entity>
<a-entity class="vals rotationText switchColor" position="5.35 -.6 0" material="color:#F7CAC9" scale=".25 .25 .25" rotation="0 0 0" text="text:zdown"></a-entity>
<a-entity class="vals rotationText switchColor" position="5.5 .3 0" material="color:#F7CAC9" scale=".25 .25 .25" rotation="0 0 -90" text="text:rotation"></a-entity>
<!-- whole rotation number -->
<a-entity class="vals rotationNumber switchColor" position="3 1.75 0" material="color:#F7CAC9" scale=".6 .6 .6" rotation="0 0 0" text="text:rotation"></a-entity>
<!-- rotation buttons -->
<!-- up and down rotation -->
<a-entity>
<a-entity class="switchTag switchUp" id="upRotation" geometry="primitive:plane" scale=".7 .7 .7" position ="3.5 1 0" material="src:url(https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-arrow-up-b-128.png)"</a-entity>
</a-entity>
<a-entity>
<a-entity class="switchTag switchDown" id="downRotation" geometry="primitive:plane" scale=".7 .7 .7" position ="3.5 -1 0" material="src:url(https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-arrow-down-b-128.png)"</a-entity>
</a-entity>
<!-- left and right rotation -->
<a-entity>
<a-entity class="switchTag switchUp" id="leftRotation" geometry="primitive:plane" scale=".7 .7 .7" position ="4.5 1 0" material="src:url(https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-arrow-up-b-128.png)"</a-entity>
</a-entity>
<a-entity>
<a-entity class="switchTag switchDown" id="rightRotation" geometry="primitive:plane" scale=".7 .7 .7" position ="4.5 -1 0" material="src:url(https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-arrow-down-b-128.png)"</a-entity>
</a-entity>
<!-- z rotations -->
<a-entity>
<a-entity class="switchTag switchUp" id="zUpRotation" geometry="primitive:plane" scale=".7 .7 .7" position ="5.5 1 0" material="src:url(https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-arrow-up-b-128.png)"</a-entity>
</a-entity>
<a-entity>
<a-entity class="switchTag switchDown" id="zDownRotation" geometry="primitive:plane" scale=".7 .7 .7" position ="5.5 -1 0" material="src:url(https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-arrow-down-b-128.png)"</a-entity>
</a-entity>
<a-entity>
<a-entity class="switchTag switchUp" id="dim" geometry="primitive:plane" scale=".7 .7 .7" position ="-.5 2.5 0" material="src:url(https://cdn0.iconfinder.com/data/icons/rcons-basic/16/lightbulb-512.png)"</a-entity>
</a-entity>
<a-entity>
<a-entity class="switchTag" id="lit" geometry="primitive:plane" scale=".7 .7 .7" position =".5 2.5 0" material="src:url(https://cdn2.iconfinder.com/data/icons/social-messaging-productivity-1/128/refresh-512.png)"</a-entity>
</a-entity>
<a-sky color="#777DA7"></a-sky>
</a-scene>
</body>
</html>