Skip to content

Commit f394573

Browse files
tparisitparisi
committed
Simple fallback w/o polyfill
1 parent 8f89bf5 commit f394573

File tree

5 files changed

+820
-56
lines changed

5 files changed

+820
-56
lines changed

‎examples/app.js

+58-54
Original file line numberDiff line numberDiff line change
@@ -13,14 +13,11 @@ function initWebVR() {
1313
// Set up Three.js
1414
initThreeJS();
1515

16-
// Set up VR rendering
17-
initVREffect();
18-
1916
// Create the scene content
2017
initScene();
2118

22-
// Set up VR camera controls
23-
initVRControls();
19+
// Set up VR rendering and camera controls (if available)
20+
initVR();
2421

2522
// Set the viewport size and aspect ratio
2623
refreshSize();
@@ -43,7 +40,12 @@ function run(time) {
4340
lastTime = time;
4441

4542
// Render the scene
46-
effect.render( scene, camera );
43+
if (effect) {
44+
effect.render( scene, camera );
45+
}
46+
else {
47+
renderer.render( scene, camera );
48+
}
4749

4850
// Update the VR camera controls
4951
controls.update();
@@ -66,41 +68,6 @@ function initThreeJS() {
6668

6769
window.addEventListener( 'resize', refreshSize, false );
6870

69-
if (navigator.getVRDisplays) {
70-
navigator.getVRDisplays().then(function (displays) {
71-
if (displays.length > 0) {
72-
vrDisplay = displays[0];
73-
74-
/* initWebGL(true);
75-
76-
if (vrDisplay.stageParameters) {
77-
// If we have stageParameters use that to resize our scene to
78-
// match the users available space more closely.
79-
cubeIsland.resize(vrDisplay.stageParameters.sizeX, vrDisplay.stageParameters.sizeZ);
80-
} else {
81-
VRSamplesUtil.addInfo("VRDisplay did not report stageParameters", 3000);
82-
// Resetting the pose in standing space isn't useful, because the
83-
// headset should always be relative to the physical room.
84-
VRSamplesUtil.addButton("Reset Pose", "R", null, function () { vrDisplay.resetPose(); });
85-
}
86-
87-
if (vrDisplay.capabilities.canPresent)
88-
vrPresentButton = VRSamplesUtil.addButton("Enter VR", "E", "media/icons/cardboard64.png", onVRRequestPresent);
89-
90-
window.addEventListener('vrdisplaypresentchange', onVRPresentChange, false);*/
91-
} else {
92-
/*initWebGL(false);
93-
VRSamplesUtil.addInfo("WebVR supported, but no VRDisplays found.", 3000);*/
94-
}
95-
});
96-
} else if (navigator.getVRDevices) {
97-
// initWebGL(false);
98-
console.log("Your browser supports WebVR but not the latest version. See <a href='http://webvr.info'>webvr.info</a> for more info.");
99-
} else {
100-
// initWebGL(false);
101-
console.log("Your browser does not support WebVR. See <a href='http://webvr.info'>webvr.info</a> for assistance.");
102-
}
103-
10471
}
10572

10673
function refreshSize ( ) {
@@ -152,6 +119,50 @@ function refreshSize ( ) {
152119

153120
}
154121

122+
function initScene() {
123+
// Create a new Three.js scene
124+
scene = new THREE.Scene();
125+
126+
// Add a camera so we can view the scene
127+
// Note that this camera's FOV is ignored in favor of the
128+
// Oculus-supplied FOV for each used inside VREffect.
129+
// See VREffect.js h/t Michael Blix
130+
camera = new THREE.PerspectiveCamera(90, window.innerWidth / window.innerHeight, 0.01, 4000);
131+
camera.position.z = 5; //NOTE: this will be ignored if there is a valid VR device but is needed on desktop view
132+
scene.add(camera);
133+
}
134+
135+
function initVR() {
136+
137+
var gotVR = false;
138+
139+
if (navigator.getVRDisplays) {
140+
navigator.getVRDisplays().then(function (displays) {
141+
if (displays.length > 0) {
142+
vrDisplay = displays[0];
143+
144+
initVREffect();
145+
initVRControls();
146+
} else {
147+
console.log("WebVR supported, but no VRDisplays found.");
148+
}
149+
150+
});
151+
152+
gotVR = true;
153+
} else if (navigator.getVRDevices) {
154+
// initWebGL(false);
155+
console.log("Your browser supports WebVR but not the latest version. See <a href='http://webvr.info'>webvr.info</a> for more info.");
156+
} else {
157+
// initWebGL(false);
158+
console.log("Your browser does not support WebVR. See <a href='http://webvr.info'>webvr.info</a> for assistance.");
159+
}
160+
161+
if (!gotVR) {
162+
initOrbitControls();
163+
}
164+
}
165+
155166
function initVREffect() {
156167

157168
// Set up Oculus renderer
@@ -183,19 +194,6 @@ function initVREffect() {
183194
});
184195
}
185196

186-
function initScene() {
187-
// Create a new Three.js scene
188-
scene = new THREE.Scene();
189-
190-
// Add a camera so we can view the scene
191-
// Note that this camera's FOV is ignored in favor of the
192-
// Oculus-supplied FOV for each used inside VREffect.
193-
// See VREffect.js h/t Michael Blix
194-
camera = new THREE.PerspectiveCamera(90, window.innerWidth / window.innerHeight, 0.01, 4000);
195-
camera.position.z = 5; //NOTE: this will be ignored if there is a valid VR device but is needed on desktop view
196-
scene.add(camera);
197-
}
198-
199197
function initVRControls() {
200198

201199
// Set up VR camera controls
@@ -207,4 +205,10 @@ function initVRControls() {
207205
console.log("Created VRControls: ", controls);
208206
}
209207
});
208+
}
209+
210+
function initOrbitControls() {
211+
212+
controls = new THREE.OrbitControls(this.camera, renderer.domElement);
213+
210214
}

‎examples/cube-webvr.html

+2-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
<meta name="mobile-web-app-capable" content="yes"> <!-- Launch fullscreen when added to home screen -->
66
<meta name="apple-mobile-web-app-capable" content="yes"> <!-- Fullscreen Landscape on iOS -->
77

8-
<title>WebVR &mdash; Oculus Rift Three.js Cube</title>
8+
<title>WebVR &mdash; WebVR Three.js - Cube</title>
99
<style>
1010

1111
.button {
@@ -39,6 +39,7 @@
3939
<script src="../libs/three.js.r74/three.js"></script>
4040
<script src="../libs/three.js.r74/effects/VREffect.js"></script>
4141
<script src="../libs/three.js.r74/controls/VRControls.js"></script>
42+
<script src="../libs/three.js.r74/controls/OrbitControls.js"></script>
4243
<!-- The WebVRpolyfill is not necessary for VR on a VR-enabled browser, but provides
4344
CardboardVR and look-around functionality on desktop.
4445
Include it just by uncommenting here if you wish -->

‎examples/pano-webvr.html

+2-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
<meta name="mobile-web-app-capable" content="yes"> <!-- Launch fullscreen when added to home screen -->
66
<meta name="apple-mobile-web-app-capable" content="yes"> <!-- Fullscreen Landscape on iOS -->
77

8-
<title>WebVR &mdash; Oculus Rift Three.js Cube</title>
8+
<title>WebVR &mdash; WebVR Three.js - 360 Panorama</title>
99
<style>
1010

1111
.button {
@@ -39,6 +39,7 @@
3939
<script src="../libs/three.js.r74/three.js"></script>
4040
<script src="../libs/three.js.r74/effects/VREffect.js"></script>
4141
<script src="../libs/three.js.r74/controls/VRControls.js"></script>
42+
<script src="../libs/three.js.r74/controls/OrbitControls.js"></script>
4243
<!-- The WebVRpolyfill is not necessary for VR on a VR-enabled browser, but provides
4344
CardboardVR and look-around functionality on desktop.
4445
Include it just by uncommenting here if you wish -->

‎examples/scene-360pano.js

+4
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,10 @@ function createScene() {
1111

1212
// Create a texture-mapped cube and add it to the scene
1313
// First, create the texture map
14+
// Maya Scene Source – fisheye image https://thefulldomeblog.com/2013/08/06/house-of-mirrors/
15+
// rendered with Domemaster3D
16+
// https://github.com/zicher3d-org/domemaster-stereo-shader/releases
17+
1418
var textureUrl = "../images/infinitemirrorspace_spherical.jpg";
1519
var loader = new THREE.TextureLoader();
1620
var map = loader.load(

0 commit comments

Comments
 (0)