master

分支 (1)

管理

管理

master

verge3d-code-examples
/
css3d_panorama_deviceorientation.html

<!DOCTYPE html>
<html>
  <head>
    <title>Verge3D css3d - panorama - device orientation</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <link type="text/css" rel="stylesheet" href="main.css">
  </head>
  <body>
    <div id="overlay">
      <button id="startButton">Start Demo</button>
    </div>
    <div id="info"><a href="https://www.soft8soft.com/verge3d" target="_blank" rel="noopener">Verge3D</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>

    <script type="module">

      import * as v3d from '../build/v3d.module.js';

      import { DeviceOrientationControls } from './jsm/controls/DeviceOrientationControls.js';
      import { CSS3DRenderer, CSS3DObject } from './jsm/renderers/CSS3DRenderer.js';

      let camera, scene, renderer;
      let controls;

      const startButton = document.getElementById('startButton');
      startButton.addEventListener('click', function() {

        init();
        animate();

      }, false);

      function init() {

        const overlay = document.getElementById('overlay');
        overlay.remove();

        camera = new v3d.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 1000);

        controls = new DeviceOrientationControls(camera);

        scene = new v3d.Scene();

        const sides = [
          {
            url: 'textures/cube/Bridge2/posx.jpg',
            position: [- 512, 0, 0],
            rotation: [0, Math.PI / 2, 0]
          },
          {
            url: 'textures/cube/Bridge2/negx.jpg',
            position: [512, 0, 0],
            rotation: [0, - Math.PI / 2, 0]
          },
          {
            url: 'textures/cube/Bridge2/posy.jpg',
            position: [0, 512, 0],
            rotation: [Math.PI / 2, 0, Math.PI]
          },
          {
            url: 'textures/cube/Bridge2/negy.jpg',
            position: [0, - 512, 0],
            rotation: [- Math.PI / 2, 0, Math.PI]
          },
          {
            url: 'textures/cube/Bridge2/posz.jpg',
            position: [0, 0, 512],
            rotation: [0, Math.PI, 0]
          },
          {
            url: 'textures/cube/Bridge2/negz.jpg',
            position: [0, 0, - 512],
            rotation: [0, 0, 0]
          }
        ];

        const cube = new v3d.Object3D();
        scene.add(cube);

        for (let i = 0; i < sides.length; i++) {

          const side = sides[i];

          const element = document.createElement('img');
          element.width = 1026; // 2 pixels extra to close the gap.
          element.src = side.url;

          const object = new CSS3DObject(element);
          object.position.fromArray(side.position);
          object.rotation.fromArray(side.rotation);
          cube.add(object);

        }

        renderer = new CSS3DRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);

        //

        window.addEventListener('resize', onWindowResize, false);

      }

      function onWindowResize() {

        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();

        renderer.setSize(window.innerWidth, window.innerHeight);

      }

      function animate() {

        requestAnimationFrame(animate);

        controls.update();
        renderer.render(scene, camera);

      }

    </script>
  </body>
</html>