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

import * as THREE from './lib/three.module.js';
import { PCDLoader } from './lib/PCDLoader.js';
import { OrbitControls } from './lib/OrbitControls.js';
import { GUI } from './lib/dat.gui.module.js';
import {TextFileLoader} from "./text_file_loader.js";

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


var params = {
    src: true,
    tgt: true,
    out: true,
    reload: load_all,
};

var last_cloud_ind = {
    src: true,
    tgt: true,
    out: true,
}

var clouds ={};

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)

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

    onWindowResize();
    window.addEventListener( 'resize', onWindowResize, false );
    
    load_all();
    
    render();
    
}

function load_all(){

    clearAll();
    load_pcd("src", "/temp/src.pcd", 0xff0000);
    load_pcd("tgt", "/temp/tgt.pcd", 0x00ff00);
    load_pcd("out", "/temp/out.pcd", 0xffff00);
    load_transform_matrix();
}

function clearAll(){
    
    remove(clouds["src"]);
    remove(clouds["tgt"]);
    remove(clouds["out"]);

    clouds["src"] = null;
    clouds["tgt"] = null;
    clouds["our"] = null;

    function remove(p){
        if (p){
            scene.remove(p);
            p.geometry.dispose();
            p.material.dispose();
        }
    }
}


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();
    switch_cloud("src");
    switch_cloud("tgt");
    switch_cloud("out");

    function switch_cloud(name){
        if (params[name] != last_cloud_ind[name]){
            last_cloud_ind[name] = params[name];
            if (last_cloud_ind[name]){
                scene.add(clouds[name]);
            }else {
                scene.remove(clouds[name]);
            }
        }
    }
}


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

function load_transform_matrix(){
    var loader = new TextFileLoader();
    loader.load( "/temp/trans.json",
        function(json){
            console.log(json);
            var mat = JSON.parse(json);

            var trans_html = "<table><tbody>";
            for (var i = 0; i<4; i++){

                trans_html += "<tr>";
                for (var j =0; j<4; j++)
                    trans_html += "<td>"+ mat[i*4+j] + "</td>";
                trans_html += "</tr>"
            }
            trans_html += "</tbody></table>";
            document.getElementById("info").innerHTML = trans_html;
        }
    )
}

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;
            if (params[name])
                scene.add(mesh);

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

}



function init_gui(){
    var gui = new GUI();

    var cfgFolder = gui.addFolder( 'View' );


    cfgFolder.add( params, "src");
    cfgFolder.add( params, "tgt");
    cfgFolder.add( params, "out");
    cfgFolder.add( params, "reload");
    cfgFolder.open();
    gui.open();
}