prototypes/007_points_gizmo.html

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title></title></head>
<style>canvas{ display:block; } body, html { padding:0px; margin:0px; width:100%; height:100%; }</style>
<body><script type="module">
//#region IMPORTS
import useThreeWebGL2, { THREE, useDarkScene, useVisualDebug } from './_lib/useThreeWebGL2.js';

import { 
    Gizmos, 
    PointsGizmo, 
    TranslateGizmo 
} from '../src/index.ts';
//#endregion

//#region MAIN
let App   = useDarkScene( useThreeWebGL2() );
let Ref   = {};
let Debug;

window.addEventListener( 'load', async _=>{
    // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    // Setup
    App.sphericalLook( 0, 20, 6 );
    Debug = await useVisualDebug( App );

    // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Ref.gizmos = new Gizmos( App.renderer, App.camera, App.scene );
    Ref.gizmos.events.on( 'dragStart', ()=>{ App.camCtrl.enabled = false; });
    Ref.gizmos.events.on( 'dragStop',  ()=>{ App.camCtrl.enabled = true; });

    // --------------------------------------
    Ref.pnt = new PointsGizmo();
    Ref.pnt.addPoint( [0,0.5,0] );
    Ref.pnt.addPoint( [-1,1.0,0] );
    Ref.pnt.addPoint( [1,0.0,0] );
    Ref.pnt.update();

    Ref.gizmos.add( Ref.pnt );
    Ref.gizmos.events.on( 'pointSelected',  e=>{
        // console.log( e.detail );
        if( e.detail.index !== -1 ){
            Ref.tran.visible = true;
            Ref.tran.state.position = e.detail.point.pos.slice();
        }else{
            Ref.tran.visible = false;
        }
    });

    // --------------------------------------
    Ref.tran = new TranslateGizmo();
    Ref.tran.visible = false;
    Ref.gizmos.add( Ref.tran );

    Ref.gizmos.events.on( 'translate', e=>{
        if( e.detail.isDone ){
            const i = Ref.pnt.selectedIndex;
            if( i !== -1 ) Ref.pnt.setPosition( i, e.detail.position, true );
        }
    });
    
    // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    App.renderLoop();
});

// #endregion
</script></body></html>