-
Notifications
You must be signed in to change notification settings - Fork 125
/
LimitStickTravelDemo.html
133 lines (104 loc) · 3.42 KB
/
LimitStickTravelDemo.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
<!DOCTYPE html><html>
<title> Limit Stick-Travel Demo </title>
<body>
<div id="help" style="position:fixed; left:40%; top:4%; color:grey;">
virtualjoystick.js Limit Stick-Travel Demo
</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,
limitStickTravel: true,
stickRadius : 50
});
var renderer = new THREE.WebGLRenderer();
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 = "Cube position X: " + cube.position.x.toFixed(1);
debugText2.innerHTML = "Cube position Y: " + cube.position.y.toFixed(1);
}
function onWindowResize(){
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
</script>
</body>
</html>