| <!DOCTYPE html> |
| <html> |
| |
| <head> |
| <title>Map-To-Mesh Demo</title> |
| |
| <style> |
| #v { |
| width: 100%; |
| height: 100%; |
| filter: map-to-mesh(equirectangular, 100deg 60deg, |
| matrix3d(1, 0, 0, 0, |
| 0, 1, 0, 0, |
| 0, 0, 1, 0, |
| 0, 0, 0, 1)); |
| } |
| |
| .instructions { |
| position: absolute; |
| left: 0; |
| background-color: white; |
| color: black; |
| } |
| </style> |
| |
| <script> |
| var degreesPerSecond = 90; |
| // The following mappings are done in this order: |
| // Up, Down, Left, Right |
| |
| // Direction keys |
| camera3D.createKeyMapping(38, camera3D.DOM_CAMERA_PITCH, degreesPerSecond); |
| camera3D.createKeyMapping(40, camera3D.DOM_CAMERA_PITCH, -degreesPerSecond); |
| camera3D.createKeyMapping(37, camera3D.DOM_CAMERA_YAW, degreesPerSecond); |
| camera3D.createKeyMapping(39, camera3D.DOM_CAMERA_YAW, -degreesPerSecond); |
| |
| // DPAD |
| camera3D.createKeyMapping( |
| 0x800C, camera3D.DOM_CAMERA_PITCH, degreesPerSecond); |
| camera3D.createKeyMapping( |
| 0x800D, camera3D.DOM_CAMERA_PITCH, -degreesPerSecond); |
| camera3D.createKeyMapping( |
| 0x800E, camera3D.DOM_CAMERA_YAW, degreesPerSecond); |
| camera3D.createKeyMapping( |
| 0x800F, camera3D.DOM_CAMERA_YAW, -degreesPerSecond); |
| |
| // Left joystick |
| camera3D.createKeyMapping( |
| 0x8011, camera3D.DOM_CAMERA_PITCH, degreesPerSecond); |
| camera3D.createKeyMapping( |
| 0x8012, camera3D.DOM_CAMERA_PITCH, -degreesPerSecond); |
| camera3D.createKeyMapping( |
| 0x8013, camera3D.DOM_CAMERA_YAW, degreesPerSecond); |
| camera3D.createKeyMapping( |
| 0x8014, camera3D.DOM_CAMERA_YAW, -degreesPerSecond); |
| |
| // Right joystick |
| camera3D.createKeyMapping( |
| 0x8015, camera3D.DOM_CAMERA_PITCH, degreesPerSecond); |
| camera3D.createKeyMapping( |
| 0x8016, camera3D.DOM_CAMERA_PITCH, -degreesPerSecond); |
| camera3D.createKeyMapping( |
| 0x8017, camera3D.DOM_CAMERA_YAW, degreesPerSecond); |
| camera3D.createKeyMapping( |
| 0x8018, camera3D.DOM_CAMERA_YAW, -degreesPerSecond); |
| </script> |
| </head> |
| |
| <body> |
| <video autoplay loop id="v" src="progressive.mp4"></video> |
| <div class="instructions"> |
| Use either the keyboard keys, direction keys, or analog joystick/thumbstick |
| to look around. |
| </div> |
| </body> |
| |
| </html> |