master

分支 (1)

管理

管理

master

verge3d-code-examples
/
webgl_multiple_scenes_comparison.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Verge3D webgl - scene - multiple - compare</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">
    <style>
      .container {
        position: absolute;
        width: 100%;
        height: 100%;
      }

      .slider {
        position: absolute;
        cursor: ew-resize;

        width: 40px;
        height: 40px;
        background-color: #F32196;
        opacity: 0.7;
        border-radius: 50%;

        top: calc(50% - 20px);
        left: calc(50% - 20px);
      }
    </style>
  </head>

  <body>

    <div id="info">
      <a href="https://www.soft8soft.com/verge3d" target="_blank" rel="noopener">Verge3D</a> - multiple scenes comparison<br />
    </div>

    <div class="container">
      <div class="slider"></div>
    </div>

    <script type="module">

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

      import { OrbitControls } from './jsm/controls/OrbitControls.js';

      let container, camera, renderer, controls;
      let sceneL, sceneR;

      let sliderPos = window.innerWidth / 2;

      init();

      function init() {

        container = document.querySelector('.container');

        sceneL = new v3d.Scene();
        sceneL.background = new v3d.Color(0xBCD48F);

        sceneR = new v3d.Scene();
        sceneR.background = new v3d.Color(0x8FBCD4);

        camera = new v3d.PerspectiveCamera(35, window.innerWidth / window.innerHeight, 0.1, 100);
        camera.position.z = 6;

        controls = new OrbitControls(camera, container);

        const light = new v3d.HemisphereLight(0xffffff, 0x444444, 1);
        light.position.set(- 2, 2, 2);
        sceneL.add(light.clone());
        sceneR.add(light.clone());

        initMeshes();
        initSlider();

        renderer = new v3d.WebGLRenderer({ antialias: true });
        renderer.setPixelRatio(window.devicePixelRatio);
        renderer.setSize(window.innerWidth, window.innerHeight);
        renderer.setScissorTest(true);
        renderer.setAnimationLoop(render);
        container.appendChild(renderer.domElement);

        window.addEventListener('resize', onWindowResize);

      }

      function initMeshes() {

        const geometry = new v3d.IcosahedronBufferGeometry(1, 3);

        const meshL = new v3d.Mesh(geometry, new v3d.MeshStandardMaterial());
        sceneL.add(meshL);

        const meshR = new v3d.Mesh(geometry, new v3d.MeshStandardMaterial({ wireframe: true }));
        sceneR.add(meshR);

      }

      function initSlider() {

        const slider = document.querySelector('.slider');

        function onPointerDown() {

          if (event.isPrimary === false) return;

          controls.enabled = false;

          window.addEventListener('pointermove', onPointerMove, false);
          window.addEventListener('pointerup', onPointerUp, false);

        }

        function onPointerUp() {

          controls.enabled = true;

          window.removeEventListener('pointermove', onPointerMove, false);
          window.removeEventListener('pointerup', onPointerUp, false);

        }

        function onPointerMove(e) {

          if (event.isPrimary === false) return;

          sliderPos = Math.max(0, Math.min(window.innerWidth, e.pageX));

          slider.style.left = sliderPos - (slider.offsetWidth / 2) + "px";

        }

        slider.style.touchAction = 'none'; // disable touch scroll
        slider.addEventListener('pointerdown', onPointerDown);

      }

      function onWindowResize() {

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

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

      }

      function render() {

        renderer.setScissor(0, 0, sliderPos, window.innerHeight);
        renderer.render(sceneL, camera);

        renderer.setScissor(sliderPos, 0, window.innerWidth, window.innerHeight);
        renderer.render(sceneR, camera);

      }

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