|
|
@@ -1,225 +0,0 @@
|
|
|
-<!DOCTYPE html>
|
|
|
-<html lang="en">
|
|
|
- <head>
|
|
|
- <title>three.js webgl - stereo pano demo</title>
|
|
|
- <meta charset="utf-8">
|
|
|
- <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
|
|
|
- <meta name="viewmode" content="projection=stereo">
|
|
|
- <style>
|
|
|
- html, body {
|
|
|
- background-color: #000;
|
|
|
- margin: 0;
|
|
|
- padding: 0;
|
|
|
- overflow: hidden;
|
|
|
- }
|
|
|
-
|
|
|
- #vrMode {
|
|
|
- position: absolute;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- margin: 10px;
|
|
|
- padding: 10px;
|
|
|
- border: 0;
|
|
|
- background: #000;
|
|
|
- color: #fff;
|
|
|
- font-size: 1rem;
|
|
|
- }
|
|
|
-
|
|
|
- </style>
|
|
|
-
|
|
|
- <script>
|
|
|
- WebVRConfig = {
|
|
|
- // Forces availability of VR mode.
|
|
|
- FORCE_ENABLE_VR: true, // Default: false.
|
|
|
- // Complementary filter coefficient. 0 for accelerometer, 1 for gyro.
|
|
|
- //K_FILTER: 0.98, // Default: 0.98.
|
|
|
- // How far into the future to predict during fast motion.
|
|
|
- //PREDICTION_TIME_S: 0, // Default: 0.050s.
|
|
|
- // Flag to disable touch panner. In case you have your own touch controls
|
|
|
- //TOUCH_PANNER_DISABLED: true, // Default: false.
|
|
|
- // Enable yaw panning only, disabling roll and pitch. This can be useful
|
|
|
- // for panoramas with nothing interesting above or below.
|
|
|
- //YAW_ONLY: true, // Default: false.
|
|
|
- // To disable keyboard and mouse controls. If you implement your own.
|
|
|
- //MOUSE_KEYBOARD_CONTROLS_DISABLED: true // Default: false
|
|
|
- }
|
|
|
- </script>
|
|
|
- </head>
|
|
|
- <body>
|
|
|
- <button id="vrMode">VR MODE</button>
|
|
|
- <script src="../build/three.min.js"></script>
|
|
|
- <script src="js/libs/webvr-polyfill.js"></script>
|
|
|
- <script src="js/controls/VRControls.js"></script>
|
|
|
- <script src="js/effects/VREffect.js"></script>
|
|
|
-
|
|
|
- <script>
|
|
|
-
|
|
|
- var camera;
|
|
|
- var vrControls;
|
|
|
- var effect;
|
|
|
- var renderer;
|
|
|
- var scene;
|
|
|
- var vrMode = false;
|
|
|
-
|
|
|
- function init() {
|
|
|
-
|
|
|
- renderer = new THREE.WebGLRenderer( { antialias: true } );
|
|
|
- renderer.setPixelRatio( window.devicePixelRatio ? window.devicePixelRatio : 1 );
|
|
|
- document.body.appendChild( renderer.domElement );
|
|
|
-
|
|
|
- scene = new THREE.Scene();
|
|
|
-
|
|
|
- camera = new THREE.PerspectiveCamera( 90, window.innerWidth / window.innerHeight, 1, 10000 );
|
|
|
- camera.layers.enable(1);
|
|
|
-
|
|
|
- effect = new THREE.VREffect( renderer );
|
|
|
- vrControls = new THREE.VRControls( camera );
|
|
|
-
|
|
|
- var textures = getTexturesFromAtlasFile( "textures/cube/sun_temple_stripe_stereo.jpg", 12 );
|
|
|
-
|
|
|
-
|
|
|
- var materials = [];
|
|
|
-
|
|
|
- for ( var i = 0; i < 6; i ++ ) {
|
|
|
-
|
|
|
- materials.push( new THREE.MeshBasicMaterial( { map: textures[i] } ) );
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- var skyBox = new THREE.Mesh( new THREE.CubeGeometry( 1024, 1024, 1024 ), new THREE.MeshFaceMaterial( materials ) );
|
|
|
- skyBox.applyMatrix( new THREE.Matrix4().makeScale( 1, 1, -1 ) );
|
|
|
- skyBox.layers.set( 1 );
|
|
|
- scene.add( skyBox );
|
|
|
-
|
|
|
-
|
|
|
- var materialsR = [];
|
|
|
-
|
|
|
- for ( var i = 6; i < 12; i ++ ) {
|
|
|
-
|
|
|
- materialsR.push( new THREE.MeshBasicMaterial( { map: textures[i] } ) );
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- var skyBoxR = new THREE.Mesh( new THREE.CubeGeometry( 1024, 1024, 1024 ), new THREE.MeshFaceMaterial( materialsR ) );
|
|
|
- skyBoxR.applyMatrix( new THREE.Matrix4().makeScale( 1, 1, -1 ) );
|
|
|
- skyBoxR.layers.set( 2 );
|
|
|
- scene.add( skyBoxR );
|
|
|
-
|
|
|
- animate();
|
|
|
- onWindowResize();
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- function getTexturesFromAtlasFile( atlasImgUrl, tilesNum ) {
|
|
|
-
|
|
|
- var textures = [];
|
|
|
-
|
|
|
- for ( var i=0; i < tilesNum; i++ ) {
|
|
|
-
|
|
|
- textures[i] = new THREE.Texture();
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- var imageObj = new Image();
|
|
|
-
|
|
|
- imageObj.onload = function() {
|
|
|
-
|
|
|
- var canvas, context;
|
|
|
- var tileWidth = imageObj.height;
|
|
|
-
|
|
|
- for ( var i = 0; i < textures.length; i++ ) {
|
|
|
-
|
|
|
- canvas = document.createElement( 'canvas' );
|
|
|
- context = canvas.getContext( '2d' );
|
|
|
- canvas.height = tileWidth;
|
|
|
- canvas.width = tileWidth;
|
|
|
- context.drawImage( imageObj, tileWidth * i, 0, tileWidth, tileWidth, 0, 0, tileWidth, tileWidth );
|
|
|
- textures[i].image = canvas
|
|
|
- textures[i].needsUpdate = true;
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- };
|
|
|
-
|
|
|
- imageObj.src = atlasImgUrl;
|
|
|
-
|
|
|
- return textures;
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- function requestFullscreen() {
|
|
|
-
|
|
|
- effect.setFullScreen( true );
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- function onWindowResize() {
|
|
|
-
|
|
|
- camera.aspect = window.innerWidth / window.innerHeight;
|
|
|
- camera.updateProjectionMatrix();
|
|
|
-
|
|
|
- if (vrMode) {
|
|
|
-
|
|
|
- effect.setSize(window.innerWidth, window.innerHeight);
|
|
|
-
|
|
|
- } else {
|
|
|
-
|
|
|
- renderer.setSize(window.innerWidth, window.innerHeight);
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- function onFullscreenChange(e) {
|
|
|
-
|
|
|
- var fsElement = document.fullscreenElement ||
|
|
|
- document.mozFullScreenElement ||
|
|
|
- document.webkitFullscreenElement;
|
|
|
-
|
|
|
- if ( !fsElement ) {
|
|
|
-
|
|
|
- vrMode = false;
|
|
|
-
|
|
|
- } else {
|
|
|
-
|
|
|
- window.screen.orientation.lock( 'landscape' );
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- function animate() {
|
|
|
-
|
|
|
- if ( vrMode ) {
|
|
|
-
|
|
|
- effect.render( scene, camera );
|
|
|
-
|
|
|
- } else {
|
|
|
-
|
|
|
- renderer.setViewport( 0, 0, window.innerWidth, window.innerHeight );
|
|
|
- renderer.render( scene, camera );
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- vrControls.update();
|
|
|
- requestAnimationFrame( animate );
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- document.querySelector( '#vrMode' ).addEventListener( 'click', function() {
|
|
|
-
|
|
|
- vrMode = vrMode ? false : true;
|
|
|
- requestFullscreen();
|
|
|
- onWindowResize();
|
|
|
-
|
|
|
- } );
|
|
|
-
|
|
|
- document.addEventListener( 'fullscreenchange', onFullscreenChange );
|
|
|
- document.addEventListener( 'mozfullscreenchange', onFullscreenChange );
|
|
|
- window.addEventListener( 'resize', onWindowResize, false );
|
|
|
-
|
|
|
- init();
|
|
|
-
|
|
|
- </script>
|
|
|
- </body>
|
|
|
-</html>
|
rNix