-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
executable file
·147 lines (116 loc) · 4.18 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
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
141
142
143
144
145
146
147
<!--
This is based on the standard ThreeJS-based boilerplate for webVR
currently being used by the eleVR team.
It has oculus support for webVR browsers, support for the non-VR web,
and support for smartphone on google cardboard or similar VR device.
Currently attempting to add Vive support, which may come at the expense of the above.
Supported Navigation Controls [maybe]:
WASD + E/Q navigation support for rotation.
Arrow key navigation support for moving the location of the camera.
Gamepad joystick navigation controls.
Orientation control with a VR headset OR mobile phone.
Click to enter full-screen VR mode.
The boilerplate this is based on is based on Mozilla's boilerplate: https://github.com/MozVR/vr-web-examples/tree/master/threejs-vr-boilerplate
It has been developed with the help of a great many people including (but not limited to) Vi Hart, Andrew Lutomirski, Henry Segerman, and the Firefox webVR team.
-->
<!DOCTYPE html>
<html lang="en">
<head>
<title>webVR boilerplate</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<style>
body {
background-color: #000;
color: #fff;
margin: 0px;
padding: 0;
overflow: hidden;
}
</style>
</head>
<body></body>
<!--
three.js 3d library
-->
<script src="js/lib/three.min.js"></script>
<!--
PhoneVR acquires positional information from phone orientation. This is used by VRControls.js
VRControls.js acquires positional information from connected VR devices and applies the transformations to a three.js camera object.
-->
<script src="js/vr/PhoneVR.js"></script>
<script src="js/vr/VRControls.js"></script>
<!--
VREffect.js handles stereo camera setup and rendering.
-->
<script src="js/vr/VREffect.js"></script>
<script>
// Setup three.js WebGL renderer
var renderer = new THREE.WebGLRenderer( { antialias: true } );
// Append the canvas element created by the renderer to document body element.
document.body.appendChild( renderer.domElement );
//Create a three.js scene
var scene = new THREE.Scene();
//Create a three.js camera
var camera = new THREE.PerspectiveCamera( 110, window.innerWidth / window.innerHeight, 2, 10000 );
scene.add(camera);
//Apply VR headset positional data to camera.
var controls = new THREE.VRControls( camera );
controls.enableGamepad(false);
controls.enableWASD(false);
controls.enableArrows(false);
//Apply VR stereo rendering to renderer
var effect = new THREE.VREffect( renderer );
effect.setSize( window.innerWidth, window.innerHeight );
/*
Create, position, and add 3d objects
*/
var geometry = new THREE.DodecahedronGeometry(1);
var material = new THREE.MeshNormalMaterial();
var dodecahedron = new THREE.Mesh( geometry, material );
dodecahedron.position.z = -2;
scene.add(dodecahedron);
/*
Request animation frame loop function
*/
function animate() {
// Apply any desired changes for the next frame. In this case, we rotate our object.
dodecahedron.rotation.x += .003;
dodecahedron.rotation.y += .0008;
//Update VR headset position and apply to camera.
controls.update();
// Render the scene through the VREffect.
effect.render( scene, camera );
requestAnimationFrame( animate );
}
animate(); // Kick off animation loop
/*
Listen for click event to enter full-screen mode.
We listen for single click because that works best for mobile for now
*/
document.body.addEventListener( 'click', function(){
effect.setFullScreen( true );
})
/*
Listen for keyboard events
*/
function onkey(event) {
event.preventDefault();
if (event.keyCode == 90) { // z
controls.resetSensor(); //zero rotation
} else if (event.keyCode == 70 || event.keyCode == 13) { //f or enter
effect.setFullScreen(true) //fullscreen
}
};
window.addEventListener("keydown", onkey, true);
/*
Handle window resizes
*/
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
effect.setSize( window.innerWidth, window.innerHeight );
}
window.addEventListener( 'resize', onWindowResize, false );
</script>
</html>