Skip to content

Commit 24127b9

Browse files
mrdoobmrdoob
committed
Updated WebVR examples using WebVR.js.
1 parent 88ae45d commit 24127b9

File tree

4 files changed

+96
-199
lines changed

4 files changed

+96
-199
lines changed

‎examples/webvr_cubes.html

Lines changed: 35 additions & 87 deletions
Original file line numberDiff line numberDiff line change
@@ -7,56 +7,38 @@
77
<style>
88
body {
99
font-family: Monospace;
10-
background-color: #f0f0f0;
10+
background-color: #101010;
11+
color: #fff;
1112
margin: 0px;
1213
overflow: hidden;
1314
}
14-
15-
.menu {
16-
position: fixed;
17-
bottom: 20px;
18-
left: 20px;
19-
}
20-
21-
.button {
22-
display: inline-block;
23-
padding: 8px;
24-
color: #FFF;
25-
background-color: #555;
26-
}
27-
28-
.button.enabled {
29-
background-color: rgb(18, 140, 36);
30-
}
31-
32-
.button:hover {
33-
cursor: pointer;
34-
background-color: rgb(18, 36, 70);
35-
}
36-
37-
.button.error {
38-
pointer-events: none;
39-
background-color: red;
15+
a {
16+
color: #f00;
4017
}
41-
4218
</style>
4319
</head>
4420
<body>
45-
<div class="menu">
46-
<div class="button full-screen">Start VR Mode</div>
47-
</div>
4821

4922
<script src="../build/three.min.js"></script>
23+
24+
<script src="js/WebVR.js"></script>
5025
<script src="js/effects/VREffect.js"></script>
5126
<script src="js/controls/VRControls.js"></script>
5227
<script src="js/libs/stats.min.js"></script>
5328

5429
<script>
5530

31+
if ( WEBVR.isLatestAvailable() === false ) {
32+
33+
document.body.appendChild( WEBVR.getMessage() );
34+
35+
}
36+
37+
//
38+
5639
var container, stats;
5740
var camera, scene, raycaster, renderer;
58-
var vrEffect;
59-
var vrControls;
41+
var effect, controls;
6042

6143
var cubes = [];
6244
var INTERSECTED;
@@ -79,27 +61,29 @@
7961
info.innerHTML = '<a href="http://threejs.org" target="_blank">three.js</a> webgl - interactive cubes';
8062
container.appendChild( info );
8163

82-
camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 10000 );
83-
8464
scene = new THREE.Scene();
8565

66+
camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 10000 );
67+
scene.add( camera );
68+
8669
crosshair = new THREE.Mesh(
8770
new THREE.RingGeometry( 0.5, 1, 32 ),
8871
new THREE.MeshBasicMaterial( {
89-
color: 0x00bb00,
90-
transparent: true,
91-
opacity: 0.5
72+
color: 0xffffff,
73+
opacity: 0.5,
74+
transparent: true
9275
} )
9376
);
94-
scene.add( crosshair );
77+
crosshair.position.z = - 40;
78+
camera.add( crosshair );
9579

9680
var light = new THREE.DirectionalLight( 0xffffff, 1 );
9781
light.position.set( 1, 1, 1 ).normalize();
9882
scene.add( light );
9983

10084
var geometry = new THREE.BoxGeometry( 20, 20, 20 );
10185

102-
for ( var i = 0; i < 2000; i ++ ) {
86+
for ( var i = 0; i < 200; i ++ ) {
10387

10488
var object = new THREE.Mesh( geometry, new THREE.MeshLambertMaterial( { color: Math.random() * 0xffffff } ) );
10589

@@ -123,40 +107,21 @@
123107
raycaster = new THREE.Raycaster();
124108

125109
renderer = new THREE.WebGLRenderer( { antialias: true } );
110+
renderer.setClearColor( 0x101010 );
126111
renderer.setPixelRatio( window.devicePixelRatio );
112+
renderer.setSize( window.innerWidth, window.innerHeight );
113+
renderer.sortObjects = false;
114+
container.appendChild( renderer.domElement );
127115

128-
var fullScreenButton = document.querySelector( '.full-screen' );
129-
130-
if ( navigator.getVRDisplays === undefined && navigator.getVRDevices === undefined ) {
131-
132-
fullScreenButton.innerHTML = 'Your browser doesn\'t support WebVR';
133-
fullScreenButton.classList.add( 'error' );
116+
controls = new THREE.VRControls( camera );
117+
effect = new THREE.VREffect( renderer );
134118

135-
} else {
119+
if ( WEBVR.isAvailable() === true ) {
136120

137-
fullScreenButton.classList.add( 'enabled' );
121+
document.body.appendChild( WEBVR.getButton( effect ) );
138122

139123
}
140124

141-
vrControls = new THREE.VRControls( camera );
142-
vrEffect = new THREE.VREffect( renderer, function ( error ) {
143-
144-
fullScreenButton.innerHTML = error;
145-
fullScreenButton.classList.add( 'error' );
146-
147-
} );
148-
149-
fullScreenButton.onclick = function() {
150-
151-
vrEffect.setFullScreen( true );
152-
153-
};
154-
155-
renderer.setClearColor( 0xf0f0f0 );
156-
renderer.setSize( window.innerWidth, window.innerHeight );
157-
renderer.sortObjects = false;
158-
container.appendChild( renderer.domElement );
159-
160125
stats = new Stats();
161126
stats.domElement.style.position = 'absolute';
162127
stats.domElement.style.top = '0';
@@ -173,7 +138,7 @@
173138
camera.aspect = window.innerWidth / window.innerHeight;
174139
camera.updateProjectionMatrix();
175140

176-
vrEffect.setSize( window.innerWidth, window.innerHeight );
141+
effect.setSize( window.innerWidth, window.innerHeight );
177142

178143
}
179144

@@ -216,26 +181,9 @@
216181

217182
}
218183

219-
vrControls.update();
220-
221-
crosshair.quaternion.copy( camera.quaternion );
222-
crosshair.position.set( 0, 0, 0 );
223-
224-
if ( INTERSECTED ) {
225-
226-
crosshair.translateZ(
227-
-scene.position.distanceTo( INTERSECTED.position ) +
228-
INTERSECTED.geometry.boundingSphere.radius + 5
229-
);
230-
231-
}
232-
else {
233-
234-
crosshair.translateZ(-40);
235-
236-
}
184+
controls.update();
237185

238-
vrEffect.render( scene, camera );
186+
effect.render( scene, camera );
239187

240188
}
241189

‎examples/webvr_rollercoaster.html

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@
2828

2929
<script>
3030

31-
if ( WEBVR.isAvailable() === false ) {
31+
if ( WEBVR.isLatestAvailable() === false ) {
3232

3333
document.body.appendChild( WEBVR.getMessage() );
3434

@@ -173,10 +173,14 @@
173173

174174
//
175175

176-
var effect = new THREE.VREffect( renderer );
177176
var controls = new THREE.VRControls( camera );
177+
var effect = new THREE.VREffect( renderer );
178+
179+
if ( WEBVR.isAvailable() === true ) {
178180

179-
document.body.appendChild( WEBVR.getButton( effect ) );
181+
document.body.appendChild( WEBVR.getButton( effect ) );
182+
183+
}
180184

181185
//
182186

@@ -199,7 +203,7 @@
199203
var velocity = 0;
200204
var progress = 0;
201205

202-
var animate = function ( time ) {
206+
function animate( time ) {
203207

204208
requestAnimationFrame( animate );
205209

0 commit comments

Comments
 (0)