-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathrotundus.html
132 lines (93 loc) · 3.64 KB
/
rotundus.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
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
<html>
<head>
<!-- Plug in leap motion to see the magic happen -->
<title> Rotundus </title>
<script type="text/javascript" src="leap.js"></script>
<script src="script.js"></script>
<script src="three.min.js"></script>
<style>
* {
margin: 0px;
padding: 0px;
font-family: Century Gothic;
}
#floater {
float: left;
background-color: black;
border: 2px solid white;
color: white;
padding: 20px;
width: 350px;
position: absolute;
margin: 5px;
}
#turnTableRightText.
#turnTableLeftText {
font-size: 2em;
}
#gameDiv {
width: 400px;
height: 500px;
margin: 0;
background-color: black;
}
</style>
</head>
<body>
<script type="text/javascript">
var musicOrLeap = true;
// Ball stuff
var radius = 5;
var xposDiv = document.getElementById("xposDiv");
var yposDiv = document.getElementById("yposDiv");
var zposDiv = document.getElementById("zposDiv");
var xposRot = 0.001;
var yposRot = 0.001;
var zpos = 0.001;
if(musicOrLeap){
}
/* Three JS Stuff */
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
var geometry = new THREE.SphereGeometry(2,20,20);
var material = new THREE.MeshBasicMaterial({color: 0x33CC33, wireframe: true, vertexColors: 0x01AD12, wireframeLinewidth: 4, wireFrameColor: 'red'});
var cube = new THREE.Mesh(geometry, material);
scene.add(cube);
var geometry3 = new THREE.SphereGeometry(2.5,20,20);
var material3 = new THREE.MeshBasicMaterial({color: 0xFF9900, wireframe: true, vertexColors: 0x01AD12, wireframeLinewidth: 3, wireFrameColor: 'red'});
var cube2 = new THREE.Mesh(geometry3, material3);
scene.add(cube2);
var geometry2 = new THREE.SphereGeometry(1.8,30,30);
var material2 = new THREE.MeshBasicMaterial({color: 0x800000, wireframe: true, vertexColors: 0x01AD12, wireframeLinewidth: 10, wireFrameColor: 'green'});
var sphereInside = new THREE.Mesh(geometry2, material2);
scene.add(sphereInside);
var geometry3 = new THREE.SphereGeometry(3,20,20);
var material3 = new THREE.MeshBasicMaterial({color: 0x0099FF, wireframe: true, vertexColors: 0x01AD12, wireframeLinewidth: 2, wireFrameColor: 'red'});
var sphereOutside = new THREE.Mesh(geometry3, material3);
scene.add(sphereOutside);
var geometry4 = new THREE.SphereGeometry(4,20,20);
var material4 = new THREE.MeshBasicMaterial({color: 0xAA3618, wireframe: true, vertexColors: 0x01AD12, wireframeLinewidth: 1, wireFrameColor: 'red'});
var sphereAgain = new THREE.Mesh(geometry4, material4);
scene.add(sphereAgain);
var geometry5 = new THREE.SphereGeometry(5,20,20);
var material5 = new THREE.MeshBasicMaterial({color: 0xAA00AA, wireframe: true, vertexColors: 0x01AD12, wireframeLinewidth: 1, wireFrameColor: 'red'});
var sphereAgain5 = new THREE.Mesh(geometry5, material5);
scene.add(sphereAgain5);
camera.position.z = 5;
var render = function () {
requestAnimationFrame(render);
cube.rotation.y += 0.6;
cube2.rotation.x += 0.6;
sphereOutside.rotation.z += zpos;
sphereAgain.rotation.x += xposRot/100;
sphereAgain5.rotation.y += yposRot/100;
renderer.render(scene, camera);
};
render();
/* ------------ */
</script>
</body>
</html>