label-3d-points/public/js/pcd_viewer.js

import * as THREE from "./lib/three.module.js";
import { PCDLoader } from "./lib/PCDLoader.js";
import { OrbitControls } from "./lib/OrbitControls.js";
import { SelectionBox } from "./lib/SelectionBox.js";
import { SelectionHelper } from "./lib/SelectionHelper.js";

var container;
var camera, controls, scene, renderer;
var camera;

var url_string = window.location.href;
var url = new URL(url_string);
//language
var pcd_file = url.searchParams.get("file");

init();
animate();
function init() {
  document.body.addEventListener("keydown", (event) => {
    if (event.ctrlKey && "asdv".indexOf(event.key) !== -1) {
      event.preventDefault();
    }
  });

  scene = new THREE.Scene();

  renderer = new THREE.WebGLRenderer({ antialias: true });
  renderer.setPixelRatio(window.devicePixelRatio);

  camera = new THREE.PerspectiveCamera(
    65,
    window.innerWidth / window.innerHeight,
    1,
    800
  );
  camera.position.x = 0;
  camera.position.z = 50;
  camera.position.y = 0;
  camera.up.set(0, 0, 1);
  camera.lookAt(0, 0, 0);

  controls = new OrbitControls(camera, renderer.domElement);
  controls.addEventListener("change", render); // call this only in static scenes (i.e., if there is no animation loop)

  container = document.createElement("container");

  document.body.appendChild(container);
  container.appendChild(renderer.domElement);

  document.addEventListener("keydown", keydown);

  scene.add(new THREE.AxesHelper(2));

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

  load_all();

  render();
}

function load_all() {
  load_pcd("pcd", pcd_file, 0xff0000);
}

function keydown(ev) {
  switch (ev.key) {
    case "+":
      clouds["src"].material.size *= 1.2;
      clouds["tgt"].material.size *= 1.2;
      clouds["out"].material.size *= 1.2;
      break;
    case "-":
      clouds["src"].material.size /= 1.2;
      clouds["tgt"].material.size /= 1.2;
      clouds["out"].material.size /= 1.2;

      break;
  }
}

function onWindowResize() {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth, window.innerHeight);
}
function animate() {
  requestAnimationFrame(animate);
  controls.update();
  render();
}

function render() {
  renderer.render(scene, camera);
}

function load_pcd(name, file, overall_color) {
  var loader = new PCDLoader();

  loader.load(file, function (pcd) {
    var position = pcd.position;
    var color = pcd.color;
    var normal = pcd.normal;
    // build geometry
    var geometry = new THREE.BufferGeometry();
    if (position.length > 0)
      geometry.addAttribute(
        "position",
        new THREE.Float32BufferAttribute(position, 3)
      );
    if (normal.length > 0)
      geometry.addAttribute(
        "normal",
        new THREE.Float32BufferAttribute(normal, 3)
      );
    if (color.length > 0)
      geometry.addAttribute(
        "color",
        new THREE.Float32BufferAttribute(color, 3)
      );

    geometry.computeBoundingSphere();
    // build material

    var material = new THREE.PointsMaterial({ size: 0.005 });

    if (color.length > 0) {
      material.vertexColors = VertexColors;
    } else {
      material.color.setHex(overall_color);
    }

    //material.size = 0.1;

    // build mesh

    var mesh = new THREE.Points(geometry, material);
    mesh.name = "pcd";

    //return mesh;

    scene.add(mesh);

    //var center = points.geometry.boundingSphere.center;
    //controls.target.set( center.x, center.y, center.z );
    //controls.update();
  });
}

var selectionBox = new SelectionBox(camera, scene);
var helper = new SelectionHelper(selectionBox, renderer, "selectBox");
document.addEventListener("mousedown", function (event) {
  for (var 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("mousemove", function (event) {
  if (helper.isDown) {
    for (var 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
    );
    var allSelected = selectionBox.select();
    for (var i = 0; i < allSelected.length; i++) {
      allSelected[i].material.emissive.set(0xffffff);
    }
  }
});
document.addEventListener("mouseup", function (event) {
  selectionBox.endPoint.set(
    (event.clientX / window.innerWidth) * 2 - 1,
    -(event.clientY / window.innerHeight) * 2 + 1,
    0.5
  );
  var allSelected = selectionBox.select();
  for (var i = 0; i < allSelected.length; i++) {
    allSelected[i].material.emissive.set(0xffffff);
  }
});