-
Notifications
You must be signed in to change notification settings - Fork 124
/
Copy pathstationarybase.html
140 lines (111 loc) · 3.67 KB
/
stationarybase.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
133
134
135
136
137
138
139
140
<!DOCTYPE html>
<title> Stationary Base Demo </title>
</head>
<body>
<div id="help0" style="position:fixed; left:40%; top:4%; color:white;">
virtualjoystick.js Stationary-Base Demo
</div>
<div id="help1" style="position:fixed; left:40%; top:8%; color:grey;">
Desktop: Press W A S D keys, or Click/Drag Mouse to move the cube
</div>
<div id="help2" style="position:fixed; left:40%; top:12%; color:grey;">
Mobile: Hold finger down and slow Swipe to move the cube
</div>
<div id="debug1" style="position:fixed; left:5%; top:4%; color:grey;">
Debug Info
</div>
<div id="debug2" style="position:fixed; left:5%; top:8%; color:grey;">
Debug Info
</div>
<script src="http://threejs.org/build/three.min.js"></script>
<script src="http://jeromeetienne.github.io/threex.keyboardstate/threex.keyboardstate.js"></script>
<script src="../virtualjoystick.js"></script>
<script>
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
var clock = new THREE.Clock();
var keyboard = new THREEx.KeyboardState();
var joystick = new VirtualJoystick({
mouseSupport : true,
stationaryBase : true,
baseX : 200,
baseY : 200
});
var renderer = new THREE.WebGLRenderer();
renderer.setClearColor('rgb(20,20,20)', 1);
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
window.addEventListener('resize', onWindowResize, false);
var cubeGeometry = new THREE.CubeGeometry(20,20,20);
var cubeMaterial = new THREE.MeshLambertMaterial({ color: 'rgb(0,255,0)' });
var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
scene.add(cube);
var sphereGeometry = new THREE.SphereGeometry(5);
var sphereMaterial = new THREE.MeshBasicMaterial({ color: 'rgb(255,255,0)' });
var sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
scene.add(sphere);
var light = new THREE.PointLight( 'rgb(255,255,255)', 1, 0 );
scene.add(light);
var sunRiseFlag = true;
var sunHeight = 0;
var frameTime = 0;
camera.position.y = 40;
camera.position.z = 160;
cube.rotation.x = 0.4;
cube.rotation.y = 0.6;
var debugText1 = document.getElementById("debug1");
var debugText2 = document.getElementById("debug2");
animate();
function animate(){
requestAnimationFrame(animate);
frameTime = clock.getDelta();
if(sunRiseFlag == true){
sunHeight = sunHeight + 60 * frameTime;
}
if(sunRiseFlag == false){
sunHeight = sunHeight - 60 * frameTime;
}
if(sunHeight > 150){
sunHeight = 150;
sunRiseFlag = false;
}
if(sunHeight < 0){
sunHeight = 0;
sunRiseFlag = true;
}
light.position.set(50,sunHeight,50);
sphere.position = light.position;
if( keyboard.pressed("D") ){
cube.position.x = cube.position.x + 60 * frameTime;
}
if( keyboard.pressed("A") ){
cube.position.x = cube.position.x - 60 * frameTime;
}
if( keyboard.pressed("W") ){
cube.position.y = cube.position.y + 60 * frameTime;
}
if( keyboard.pressed("S") ){
cube.position.y = cube.position.y - 60 * frameTime;
}
if( joystick.right() ){
cube.position.x = cube.position.x + 60 * frameTime;
}
if( joystick.left() ){
cube.position.x = cube.position.x - 60 * frameTime;
}
if( joystick.up() ){
cube.position.y = cube.position.y + 60 * frameTime;
}
if( joystick.down() ){
cube.position.y = cube.position.y - 60 * frameTime;
}
renderer.render( scene, camera );
debugText1.innerHTML = "Base X: " + joystick._baseX;
debugText2.innerHTML = "Base Y: " + joystick._baseY;
}
function onWindowResize(){
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
</script></body>