misc_boxselection.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Verge3D webgl - box selection</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>
      body {
        background-color: #f0f0f0;
        color: #000;
        touch-action: none;
      }

      a {
        color: #08e;
      }

      .selectBox {
        border: 1px solid #55aaff;
        background-color: rgba(75, 160, 255, 0.3);
        position: fixed;
      }
    </style>
  </head>
  <body>

    <div id="info">
      <a href="https://www.soft8soft.com/verge3d" target="_blank" rel="noopener">Verge3D</a> webgl - box selection
    </div>

    <!-- Import maps polyfill -->
    <!-- Remove this when import maps will be widely supported -->
    <script async src="https://unpkg.com/es-module-shims@1.3.6/dist/es-module-shims.js"></script>

    <script type="importmap">
      {
        "imports": {
          "v3d": "../build/v3d.module.js",
          "v3d/addons/": "./jsm/"
        }
      }
    </script>

    <script type="module">

      import * as v3d from 'v3d';

      import Stats from 'v3d/addons/libs/stats.module.js';

      import { SelectionBox } from 'v3d/addons/interactive/SelectionBox.js';
      import { SelectionHelper } from 'v3d/addons/interactive/SelectionHelper.js';

      let container, stats;
      let camera, scene, renderer;

      init();
      animate();

      function init() {

        container = document.createElement('div');
        document.body.appendChild(container);

        camera = new v3d.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 5000);
        camera.position.z = 1000;

        scene = new v3d.Scene();
        scene.background = new v3d.Color(0xf0f0f0);

        scene.add(new v3d.AmbientLight(0x505050));

        const light = new v3d.SpotLight(0xffffff, 1.5);
        light.position.set(0, 500, 2000);
        light.angle = Math.PI / 9;

        light.castShadow = true;
        light.shadow.camera.near = 1000;
        light.shadow.camera.far = 4000;
        light.shadow.mapSize.width = 1024;
        light.shadow.mapSize.height = 1024;

        scene.add(light);

        const geometry = new v3d.BoxGeometry(20, 20, 20);

        for (let i = 0; i < 200; i++) {

          const object = new v3d.Mesh(geometry, new v3d.MeshLambertMaterial({ color: Math.random() * 0xffffff }));

          object.position.x = Math.random() * 1600 - 800;
          object.position.y = Math.random() * 900 - 450;
          object.position.z = Math.random() * 900 - 500;

          object.rotation.x = Math.random() * 2 * Math.PI;
          object.rotation.y = Math.random() * 2 * Math.PI;
          object.rotation.z = Math.random() * 2 * Math.PI;

          object.scale.x = Math.random() * 2 + 1;
          object.scale.y = Math.random() * 2 + 1;
          object.scale.z = Math.random() * 2 + 1;

          object.castShadow = true;
          object.receiveShadow = true;

          scene.add(object);

        }

        renderer = new v3d.WebGLRenderer({ antialias: true });
        renderer.setPixelRatio(window.devicePixelRatio);
        renderer.setSize(window.innerWidth, window.innerHeight);

        renderer.shadowMap.enabled = true;
        renderer.shadowMap.type = v3d.PCFShadowMap;

        container.appendChild(renderer.domElement);

        stats = new Stats();
        container.appendChild(stats.dom);

        window.addEventListener('resize', onWindowResize);

      }

      function onWindowResize() {

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

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

      }

      //

      function animate() {

        requestAnimationFrame(animate);

        render();
        stats.update();

      }

      function render() {

        renderer.render(scene, camera);

      }

      const selectionBox = new SelectionBox(camera, scene);
      const helper = new SelectionHelper(renderer, 'selectBox');

      document.addEventListener('pointerdown', function(event) {

        for (const item of selectionBox.collection) {

          item.material.emissive.set(0x000000);

        }

        selectionBox.startPoint.set(
          (event.clientX / window.innerWidth) * 2 - 1,
          - (event.clientY / window.innerHeight) * 2 + 1,
          0.5);

      });

      document.addEventListener('pointermove', function(event) {

        if (helper.isDown) {

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

            selectionBox.collection[i].material.emissive.set(0x000000);

          }

          selectionBox.endPoint.set(
            (event.clientX / window.innerWidth) * 2 - 1,
            - (event.clientY / window.innerHeight) * 2 + 1,
            0.5);

          const allSelected = selectionBox.select();

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

            allSelected[i].material.emissive.set(0xffffff);

          }

        }

      });

      document.addEventListener('pointerup', function(event) {

        selectionBox.endPoint.set(
          (event.clientX / window.innerWidth) * 2 - 1,
          - (event.clientY / window.innerHeight) * 2 + 1,
          0.5);

        const allSelected = selectionBox.select();

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

          allSelected[i].material.emissive.set(0xffffff);

        }

      });

    </script>

  </body>
</html>