css3d_panorama_deviceorientation.html 3.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>three.js css3d - panorama - device orientation</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. <link type="text/css" rel="stylesheet" href="main.css">
  8. </head>
  9. <body>
  10. <div id="overlay">
  11. <div>
  12. <button id="startButton">Start Demo</button>
  13. <p>Using device orientation might require a user interaction.</p>
  14. </div>
  15. </div>
  16. <div id="info"><a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> css3d - panorama - device orientation.<br/>cubemap by <a href="http://www.humus.name/index.php?page=Textures" target="_blank" rel="noopener">Humus</a>.</div>
  17. <script type="module">
  18. import * as THREE from '../build/three.module.js';
  19. import { DeviceOrientationControls } from './jsm/controls/DeviceOrientationControls.js';
  20. import { CSS3DRenderer, CSS3DObject } from './jsm/renderers/CSS3DRenderer.js';
  21. var camera, scene, renderer;
  22. var controls;
  23. var startButton = document.getElementById( 'startButton' );
  24. startButton.addEventListener( 'click', function () {
  25. init();
  26. animate();
  27. }, false );
  28. function init() {
  29. var overlay = document.getElementById( 'overlay' );
  30. overlay.remove();
  31. camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 1000 );
  32. controls = new DeviceOrientationControls( camera );
  33. scene = new THREE.Scene();
  34. var sides = [
  35. {
  36. url: 'textures/cube/Bridge2/posx.jpg',
  37. position: [ - 512, 0, 0 ],
  38. rotation: [ 0, Math.PI / 2, 0 ]
  39. },
  40. {
  41. url: 'textures/cube/Bridge2/negx.jpg',
  42. position: [ 512, 0, 0 ],
  43. rotation: [ 0, - Math.PI / 2, 0 ]
  44. },
  45. {
  46. url: 'textures/cube/Bridge2/posy.jpg',
  47. position: [ 0, 512, 0 ],
  48. rotation: [ Math.PI / 2, 0, Math.PI ]
  49. },
  50. {
  51. url: 'textures/cube/Bridge2/negy.jpg',
  52. position: [ 0, - 512, 0 ],
  53. rotation: [ - Math.PI / 2, 0, Math.PI ]
  54. },
  55. {
  56. url: 'textures/cube/Bridge2/posz.jpg',
  57. position: [ 0, 0, 512 ],
  58. rotation: [ 0, Math.PI, 0 ]
  59. },
  60. {
  61. url: 'textures/cube/Bridge2/negz.jpg',
  62. position: [ 0, 0, - 512 ],
  63. rotation: [ 0, 0, 0 ]
  64. }
  65. ];
  66. var cube = new THREE.Object3D();
  67. scene.add( cube );
  68. for ( var i = 0; i < sides.length; i ++ ) {
  69. var side = sides[ i ];
  70. var element = document.createElement( 'img' );
  71. element.width = 1026; // 2 pixels extra to close the gap.
  72. element.src = side.url;
  73. var object = new CSS3DObject( element );
  74. object.position.fromArray( side.position );
  75. object.rotation.fromArray( side.rotation );
  76. cube.add( object );
  77. }
  78. renderer = new CSS3DRenderer();
  79. renderer.setSize( window.innerWidth, window.innerHeight );
  80. document.body.appendChild( renderer.domElement );
  81. //
  82. window.addEventListener( 'resize', onWindowResize, false );
  83. }
  84. function onWindowResize() {
  85. camera.aspect = window.innerWidth / window.innerHeight;
  86. camera.updateProjectionMatrix();
  87. renderer.setSize( window.innerWidth, window.innerHeight );
  88. }
  89. function animate() {
  90. requestAnimationFrame( animate );
  91. controls.update();
  92. renderer.render( scene, camera );
  93. }
  94. </script>
  95. </body>
  96. </html>