webglFramework/Thirdparty/three.js-master/examples/misc_controls_deviceorientation.html

   1 <!DOCTYPE html>
   2 <html lang="en">
   3         <head>
   4                 <title>three.js webgl - controls - deviceorientation</title>
   5                 <meta charset="utf-8">
   6                 <meta name="viewport" content="user-scalable=no, initial-scale=1">
   7                 <style>
   8                         body {
   9                                 margin: 0px;
  10                                 background-color: #000000;
  11                                 overflow: hidden;
  12                         }
  13
  14                         #info {
  15                                 position: absolute;
  16                                 top: 0px; width: 100%;
  17                                 color: #ffffff;
  18                                 padding: 5px;
  19                                 font-family:Monospace;
  20                                 font-size:13px;
  21                                 font-weight: bold;
  22                                 text-align:center;
  23                         }
  24
  25                         a {
  26                                 color: #ff8800;
  27                         }
  28                 </style>
  29         </head>
  30         <body>
  31
  32                 <div id="container"></div>
  33
  34                 <div id="info">
  35                         <a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - equirectangular panorama demo with DeviceOrientation controls.
  36                         photo by <a href="http://www.flickr.com/photos/jonragnarsson/2294472375/" target="_blank" rel="noopener">Jón Ragnarsson</a>.
  37                 </div>
  38
  39                 <script src="../build/three.js"></script>
  40                 <script src="js/controls/DeviceOrientationControls.js"></script>
  41
  42                 <script>
  43
  44                         var container, camera, scene, renderer, controls;
  45
  46                         init();
  47                         animate();
  48
  49                         function init() {
  50
  51                                 container = document.getElementById( 'container' );
  52
  53                                 camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 1100 );
  54
  55                                 controls = new THREE.DeviceOrientationControls( camera );
  56
  57                                 scene = new THREE.Scene();
  58
  59                                 var geometry = new THREE.SphereBufferGeometry( 500, 60, 40 );
  60                                 // invert the geometry on the x-axis so that all of the faces point inward
  61                                 geometry.scale( - 1, 1, 1 );
  62
  63                                 var material = new THREE.MeshBasicMaterial( {
  64                                         map: new THREE.TextureLoader().load( 'textures/2294472375_24a3b8ef46_o.jpg' )
  65                                 } );
  66
  67                                 var mesh = new THREE.Mesh( geometry, material );
  68                                 scene.add( mesh );
  69
  70                                 var helperGeometry = new THREE.BoxBufferGeometry( 100, 100, 100, 4, 4, 4 );
  71                                 var helperMaterial = new THREE.MeshBasicMaterial( { color: 0xff00ff, wireframe: true } );
  72                                 var helper = new THREE.Mesh( helperGeometry, helperMaterial );
  73                                 scene.add( helper );
  74
  75                                 //
  76
  77                                 renderer = new THREE.WebGLRenderer();
  78                                 renderer.setPixelRatio( window.devicePixelRatio );
  79                                 renderer.setSize( window.innerWidth, window.innerHeight );
  80                                 container.appendChild( renderer.domElement );
  81
  82                                 //
  83
  84                                 window.addEventListener( 'resize', onWindowResize, false );
  85
  86
  87                         }
  88
  89                         function animate() {
  90
  91                                 window.requestAnimationFrame( animate );
  92
  93                                 controls.update();
  94                                 renderer.render( scene, camera );
  95
  96                         }
  97
  98                         function onWindowResize() {
  99
 100                                 camera.aspect = window.innerWidth / window.innerHeight;
 101                                 camera.updateProjectionMatrix();
 102
 103                                 renderer.setSize( window.innerWidth, window.innerHeight );
 104
 105                         }
 106
 107                 </script>
 108         </body>
 109 </html>