Skip to content

Commit 2a7db73

Browse files
mrdoobmrdoob
committed
Merge pull request mrdoob#8047 from rnixik/example-stereo-pano
Example stereo pano
2 parents 11414c7 + ebe8183 commit 2a7db73

File tree

3 files changed

+229
-1
lines changed

3 files changed

+229
-1
lines changed

‎examples/files.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -229,7 +229,8 @@ var files = {
229229
],
230230
"webvr": [
231231
"webvr_cubes",
232-
"webvr_video"
232+
"webvr_video",
233+
"webvr_stereo_pano"
233234
],
234235
"css3d": [
235236
"css3d_molecules",

‎examples/textures/cube/sun_temple_stripe_stereo.jpg

682 KB
Loading

‎examples/webvr_stereo_pano.html

Lines changed: 227 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,227 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<title>three.js webgl - stereo pano demo</title>
5+
<meta charset="utf-8">
6+
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
7+
<meta name="viewmode" content="projection=stereo">
8+
<style>
9+
html, body {
10+
background-color: #000;
11+
margin: 0px;
12+
padding: 0px;
13+
overflow: hidden;
14+
}
15+
16+
#VrMode {
17+
position: absolute;
18+
top: 0;
19+
left: 0;
20+
margin: 10px;
21+
background: black;
22+
border: 0;
23+
color: #fff;
24+
padding: 10px;
25+
font-size: 1rem;
26+
}
27+
28+
</style>
29+
30+
</head>
31+
<body>
32+
<button id="VrMode">VR MODE</button>
33+
<script src="../build/three.min.js"></script>
34+
<script src="js/controls/OrbitControls.js"></script>
35+
<script src="js/controls/VRControls.js"></script>
36+
<script src="js/effects/VREffect.js"></script>
37+
38+
<script>
39+
40+
var camera;
41+
var vrControls;
42+
var effect;
43+
var renderer;
44+
var scene;
45+
var vrMode = false;
46+
47+
function init() {
48+
49+
renderer = new THREE.WebGLRenderer( { antialias: true } );
50+
renderer.setPixelRatio( window.devicePixelRatio ? window.devicePixelRatio : 1 );
51+
document.body.appendChild( renderer.domElement );
52+
53+
scene = new THREE.Scene();
54+
55+
camera = new THREE.PerspectiveCamera( 90, window.innerWidth / window.innerHeight, 1, 10000 );
56+
camera.position.z = 0.0001;
57+
camera.layers.enable(1);
58+
59+
effect = new THREE.VREffect( renderer );
60+
61+
62+
if ( navigator.getVRDevices ) {
63+
64+
vrControls = new THREE.VRControls( camera, vrFallback );
65+
66+
} else {
67+
68+
vrFallback();
69+
70+
}
71+
72+
73+
var textures = getTexturesFromAtlasFile( "textures/cube/sun_temple_stripe_stereo.jpg", 12 );
74+
75+
76+
var materials = [];
77+
78+
for ( var i = 0; i < 6; i ++ ) {
79+
80+
materials.push( new THREE.MeshBasicMaterial( { map: textures[i] } ) );
81+
82+
}
83+
84+
var skyBox = new THREE.Mesh( new THREE.CubeGeometry( 1024, 1024, 1024 ), new THREE.MeshFaceMaterial( materials ) );
85+
skyBox.applyMatrix( new THREE.Matrix4().makeScale( 1, 1, -1 ) );
86+
skyBox.layers.set( 1 );
87+
scene.add( skyBox );
88+
89+
90+
var materialsR = [];
91+
92+
for ( var i = 6; i < 12; i ++ ) {
93+
94+
materialsR.push( new THREE.MeshBasicMaterial( { map: textures[i] } ) );
95+
96+
}
97+
98+
var skyBoxR = new THREE.Mesh( new THREE.CubeGeometry( 1024, 1024, 1024 ), new THREE.MeshFaceMaterial( materialsR ) );
99+
skyBoxR.applyMatrix( new THREE.Matrix4().makeScale( 1, 1, -1 ) );
100+
skyBoxR.layers.set( 2 );
101+
scene.add( skyBoxR );
102+
103+
animate();
104+
onWindowResize();
105+
106+
}
107+
108+
function getTexturesFromAtlasFile( atlasImgUrl, tilesNum ) {
109+
110+
var textures = [];
111+
112+
for ( var i=0; i < tilesNum; i++ ) {
113+
114+
textures[i] = new THREE.Texture();
115+
116+
}
117+
118+
var imageObj = new Image();
119+
120+
imageObj.onload = function() {
121+
122+
var canvas, context;
123+
var tileWidth = imageObj.height;
124+
125+
for ( var i = 0; i < textures.length; i++ ) {
126+
127+
canvas = document.createElement( 'canvas' );
128+
context = canvas.getContext( '2d' );
129+
canvas.height = tileWidth;
130+
canvas.width = tileWidth;
131+
context.drawImage( imageObj, tileWidth * i, 0, tileWidth, tileWidth, 0, 0, tileWidth, tileWidth );
132+
textures[i].image = canvas
133+
textures[i].needsUpdate = true;
134+
135+
}
136+
137+
};
138+
139+
imageObj.src = atlasImgUrl;
140+
141+
return textures;
142+
143+
}
144+
145+
function vrFallback() {
146+
147+
vrControls = new THREE.OrbitControls( camera );
148+
document.querySelector( '#VrMode' ).style.textDecoration = "line-through";
149+
150+
}
151+
152+
function requestFullscreen() {
153+
154+
effect.setFullScreen( true );
155+
156+
}
157+
158+
function onWindowResize() {
159+
160+
camera.aspect = window.innerWidth / window.innerHeight;
161+
camera.updateProjectionMatrix();
162+
163+
if (vrMode) {
164+
165+
effect.setSize(window.innerWidth, window.innerHeight);
166+
167+
} else {
168+
169+
renderer.setSize(window.innerWidth, window.innerHeight);
170+
171+
}
172+
173+
}
174+
175+
function onFullscreenChange(e) {
176+
177+
var fsElement = document.fullscreenElement ||
178+
document.mozFullScreenElement ||
179+
document.webkitFullscreenElement;
180+
181+
if ( !fsElement ) {
182+
183+
vrMode = false;
184+
185+
} else {
186+
187+
window.screen.orientation.lock( 'landscape' );
188+
189+
}
190+
191+
}
192+
193+
function animate() {
194+
195+
if ( vrMode ) {
196+
197+
effect.render( scene, camera );
198+
199+
} else {
200+
201+
renderer.setViewport( 0, 0, window.innerWidth, window.innerHeight );
202+
renderer.render( scene, camera );
203+
204+
}
205+
206+
vrControls.update();
207+
requestAnimationFrame( animate );
208+
209+
}
210+
211+
document.querySelector( '#VrMode' ).addEventListener( 'click', function() {
212+
213+
vrMode = vrMode ? false : true;
214+
requestFullscreen();
215+
onWindowResize();
216+
217+
} );
218+
219+
document.addEventListener( 'fullscreenchange', onFullscreenChange );
220+
document.addEventListener( 'mozfullscreenchange', onFullscreenChange );
221+
window.addEventListener( 'resize', onWindowResize, false );
222+
223+
init();
224+
225+
</script>
226+
</body>
227+
</html>

0 commit comments

Comments
 (0)