main.js

/*
============================================================
 BBRACING MAP EDITOR
 main.js

 ESTA VERSIÓN:
 -----------------------------------------------------------
 - Carga BeachB.bin.json
 - Busca VuAiWaypointEntity
 - Recorre ChildEntities recursivamente
 - Lee VuTransformComponent
 - Lee Position
 - Lee Rotation
 - Lee Scale
 - Muestra los waypoints en 3D
 - Muestra el nombre encima del waypoint
 - Permite seleccionarlos
 - Permite moverlos
 - Permite rotarlos
 - Permite escalarlos
 - Inspector con valores reales
 - Guarda una representación editable de los waypoints

 TODAVÍA NO:
 -----------------------------------------------------------
 - Carga modelos GLB automáticamente desde AssetData
 - Modifica materiales
 - Modifica texturas
 - Reconstruye completamente BeachB.bin.json

 Eso lo hacemos después.
============================================================
*/

import * as THREE from "three";

import {
    OrbitControls
} from "three/addons/controls/OrbitControls.js";

import {
    TransformControls
} from "three/addons/controls/TransformControls.js";

import {
    GLTFLoader
} from "three/addons/loaders/GLTFLoader.js";



// ============================================================
// VARIABLES PRINCIPALES
// ============================================================

let scene;
let camera;
let renderer;
let world;

let orbit;
let transformControls;

let raycaster;
let mouse;

let grid;
let axes;

let selected = null;

let objects = [];

let mapData = null;

let waypointCounter = 0;

//glb and gltf
const gltfLoader = new GLTFLoader();


// ============================================================
// HTML
// ============================================================

const viewport =
    document.getElementById("viewport");

const objectList =
    document.getElementById("objectList");

const mapStatus =
    document.getElementById("mapStatus");

const noSelection =
    document.getElementById("noSelection");

const objectInspector =
    document.getElementById("objectInspector");

// ============================================================
// INICIALIZACIÓN
// ============================================================

function init() {

    // --------------------------------------------------------
    // ESCENA
    // --------------------------------------------------------

    scene =
        new THREE.Scene();

    scene.background =
        new THREE.Color(0x151515);


    // --------------------------------------------------------
    // CÁMARA
    // --------------------------------------------------------

    camera =
        new THREE.PerspectiveCamera(
            60,
            window.innerWidth /
            window.innerHeight,
            0.1,
            100000
        );

    camera.position.set(
        30,
        25,
        30
    );


    // --------------------------------------------------------
    // RENDERER
    // --------------------------------------------------------

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

    renderer.setPixelRatio(
        Math.min(
            window.devicePixelRatio,
            2
        )
    );

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

    renderer.outputColorSpace =
        THREE.SRGBColorSpace;

    viewport.appendChild(
        renderer.domElement
    );


    // --------------------------------------------------------
    // CÁMARA / ORBIT
    // --------------------------------------------------------

    orbit =
        new OrbitControls(
            camera,
            renderer.domElement
        );

    orbit.enableDamping = true;

    orbit.dampingFactor = 0.08;

    orbit.target.set(
        0,
        0,
        0
    );


    // --------------------------------------------------------
    // LUCES
    // --------------------------------------------------------

    const ambient =
        new THREE.HemisphereLight(
            0xffffff,
            0x444444,
            2
        );

    scene.add(
        ambient
    );


    const directional =
        new THREE.DirectionalLight(
            0xffffff,
            2
        );

    directional.position.set(
        100,
        200,
        100
    );

    scene.add(
        directional
    );


    // --------------------------------------------------------
    // GRID
    // --------------------------------------------------------

    grid =
        new THREE.GridHelper(
            500,
            100
        );

    scene.add(
        grid
    );


    // --------------------------------------------------------
    // EJES
    // --------------------------------------------------------

    axes =
        new THREE.AxesHelper(
            20
        );

    scene.add(
        axes
    );


    // --------------------------------------------------------
    // RAYCASTER
    // --------------------------------------------------------

    raycaster =
        new THREE.Raycaster();

    mouse =
        new THREE.Vector2();


    // --------------------------------------------------------
    // TRANSFORM CONTROLS
    // --------------------------------------------------------

    transformControls =
        new TransformControls(
            camera,
            renderer.domElement
        );

    transformControls.setMode(
        "translate"
    );

    transformControls.setSize(
        0.8
    );


    transformControls.addEventListener(
        "dragging-changed",
        event => {

            orbit.enabled =
                !event.value;

        }
    );


    transformControls.addEventListener(
        "objectChange",
        () => {

            updateInspector();

        }
    );


    scene.add(
        transformControls.getHelper()
    );


    //----------------------------------------------------------
    // World
    //----------------------------------------------------------
    
    world = new THREE.Group();
    world.name = "BBRacingWorld";
    
    scene.add(world);

    //position
    world.position.x = 0.0;
    world.position.y = 7.0;
    world.position.z = 0.0;
    
    // Rotación global del mapa

    world.rotation.x = THREE.MathUtils.degToRad(90); //90
    
    
    
    // --------------------------------------------------------
    // EVENTOS
    // --------------------------------------------------------

    renderer.domElement.addEventListener(
        "pointerdown",
        onPointerDown
    );


    window.addEventListener(
        "resize",
        onResize
    );


    // --------------------------------------------------------
    // ABRIR JSON
    // --------------------------------------------------------

    document
        .getElementById("openMap")
        .onclick =
            () => {

                document
                    .getElementById("mapFile")
                    .click();

            };


    document
        .getElementById("mapFile")
        .addEventListener(
            "change",
            loadJSON
        );


    // --------------------------------------------------------
    // BOTÓN GLB
    // --------------------------------------------------------

    document
        .getElementById("openModel")
        .onclick =
            () => {

                alert(
                    "La carga de modelos GLB la conectaremos después."
                );

            };


    // --------------------------------------------------------
    // BOTÓN CUBO
    // --------------------------------------------------------

    document
        .getElementById("addCube")
        .onclick =
            addCube;


    // --------------------------------------------------------
    // BOTÓN WAYPOINT
    // --------------------------------------------------------

    document
        .getElementById("addWaypoint")
        .onclick =
            addWaypoint;


    // --------------------------------------------------------
    // BORRAR
    // --------------------------------------------------------

    document
        .getElementById("deleteObject")
        .onclick =
            deleteSelected;


    // --------------------------------------------------------
    // GUARDAR
    // --------------------------------------------------------

    document
        .getElementById("saveMap")
        .onclick =
            saveMap;


    // --------------------------------------------------------
    // GRID
    // --------------------------------------------------------

    document
        .getElementById("toggleGrid")
        .onclick =
            () => {

                grid.visible =
                    !grid.visible;

            };


    // --------------------------------------------------------
    // INSPECTOR
    // --------------------------------------------------------

    document
        .getElementById("applyTransform")
        .onclick =
            applyInspector;


    document
        .getElementById("focusObject")
        .onclick =
            focusSelected;


    // --------------------------------------------------------
    // TECLADO
    // --------------------------------------------------------

    window.addEventListener(
        "keydown",
        onKeyDown
    );


    // --------------------------------------------------------
    // INICIAR
    // --------------------------------------------------------

    animate();
}


// ============================================================
// LOOP
// ============================================================

function animate() {

    requestAnimationFrame(
        animate
    );

    orbit.update();

    renderer.render(
        scene,
        camera
    );
}


// ============================================================
// RESIZE
// ============================================================

function onResize() {

    camera.aspect =
        window.innerWidth /
        window.innerHeight;

    camera.updateProjectionMatrix();

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


// ============================================================
// CLIC / TOUCH
// ============================================================

function onPointerDown(event) {

    if (
        transformControls.dragging
    ) {

        return;

    }


    const rect =
        renderer.domElement
            .getBoundingClientRect();


    mouse.x =
        (
            event.clientX -
            rect.left
        ) /
        rect.width *
        2 -
        1;


    mouse.y =
        -(
            (
                event.clientY -
                rect.top
            ) /
            rect.height
        ) *
        2 +
        1;


    raycaster.setFromCamera(
        mouse,
        camera
    );


    const hits =
        raycaster.intersectObjects(
            objects,
            true
        );


    if (!hits.length) {

        selectObject(
            null
        );

        return;

    }


    let object =
        hits[0].object;


    while (
        object.parent &&
        !objects.includes(
            object
        )
    ) {

        object =
            object.parent;

    }


    if (
        objects.includes(
            object
        )
    ) {

        selectObject(
            object
        );

    }

}


// ============================================================
// SELECCIONAR
// ============================================================

function selectObject(object) {

    selected =
        object;


    if (selected) {

        transformControls.attach(
            selected
        );

    }
    else {

        transformControls.detach();

    }


    updateInspector();

    updateObjectList();

}


// ============================================================
// CREAR WAYPOINT
// ============================================================

function addWaypoint() {

    waypointCounter++;


    const waypoint =
        createWaypointMarker(
            `Waypoint_${waypointCounter}`
        );


    waypoint.position.set(
        0,
        1,
        0
    );


    waypoint.userData.type =
        "VuAiWaypointEntity";


    waypoint.userData.name =
        `Waypoint_${waypointCounter}`;


    waypoint.userData.source =
        null;


    world.add(waypoint);


    objects.push(
        waypoint
    );


    selectObject(
        waypoint
    );


    updateObjectList();

}


// ============================================================
// CREAR MARCADOR
// ============================================================

function createWaypointMarker(
    name
) {

    const group =
        new THREE.Group();


    group.name =
        name;


    const sphere =
        new THREE.Mesh(

            new THREE.SphereGeometry(
                0.8,
                20,
                12
            ),

            new THREE.MeshStandardMaterial({

                color:
                    0xff3333,

                emissive:
                    0x550000,

                roughness:
                    0.6

            })

        );


    sphere.userData.isWaypointPart =
        true;


    group.add(
        sphere
    );


    const cone =
        new THREE.Mesh(

            new THREE.ConeGeometry(
                0.35,
                1.2,
                12
            ),

            new THREE.MeshStandardMaterial({

                color:
                    0xffcc00,

                emissive:
                    0x442200

            })

        );


    cone.position.y =
        -0.9;


    cone.userData.isWaypointPart =
        true;


    group.add(
        cone
    );


    const lineGeometry =
        new THREE.BufferGeometry()
            .setFromPoints([

                new THREE.Vector3(
                    0,
                    -0.3,
                    0
                ),

                new THREE.Vector3(
                    0,
                    -4,
                    0
                )

            ]);


    const line =
        new THREE.Line(

            lineGeometry,

            new THREE.LineBasicMaterial({
                color: 0xff3333
            })

        );


    line.userData.isWaypointPart =
        true;


    group.add(
        line
    );


    const label =
        createLabel(
            name
        );


    label.position.set(
        0,
        1.5,
        0
    );


    group.add(
        label
    );


    return group;

}


// ============================================================
// CREAR TEXTO
// ============================================================

function createLabel(text) {

    const canvas =
        document.createElement(
            "canvas"
        );


    canvas.width =
        512;

    canvas.height =
        128;


    const ctx =
        canvas.getContext(
            "2d"
        );


    ctx.clearRect(
        0,
        0,
        canvas.width,
        canvas.height
    );


    ctx.fillStyle =
        "rgba(0,0,0,0.75)";


    ctx.fillRect(
        0,
        20,
        canvas.width,
        88
    );


    ctx.font =
        "bold 42px Arial";


    ctx.textAlign =
        "center";

    ctx.textBaseline =
        "middle";


    ctx.fillStyle =
        "#ffffff";


    ctx.fillText(
        text,
        canvas.width / 2,
        canvas.height / 2
    );


    const texture =
        new THREE.CanvasTexture(
            canvas
        );


    texture.colorSpace =
        THREE.SRGBColorSpace;


    const material =
        new THREE.SpriteMaterial({

            map:
                texture,

            transparent:
                true,

            depthTest:
                false

        });


    const sprite =
        new THREE.Sprite(
            material
        );


    sprite.scale.set(
        5,
        1.25,
        1
    );


    sprite.userData.isWaypointPart =
        true;


    return sprite;

}


// ============================================================
// CARGAR JSON
// ============================================================

async function loadJSON(e) {
    const file = e.target.files[0];
    if (!file) return;
    try {
        mapData = JSON.parse(await file.text());
        clearObjects(); waypointCounter = 0;

        // 1. Cargar todos los objetos/pistas
        const entidades = buscarTodasLasEntidades(mapData);
        console.log(`📦 Encontrados ${entidades.length} objetos`);
        alert("crgr");
        for (const ent of entidades) {
            if (ent.type === "VuAiWaypointEntity") {
                createWaypointFromEntity(ent);
            } else if (ent.type === "VuStaticModelEntity") {
                await crearObjetoDesdeEntidad(ent);
            }
        }

        updateObjectList();
        mapStatus.textContent = `${file.name} - Cargado completo`;
        focusAll();
    } catch(err) { alert("Error: " + err.message); }
}

// Función auxiliar para encontrar todas las entidades
function buscarTodasLasEntidades(datos) {
    const lista = [];
    function recorrer(val) {
        if (!val || typeof val !== "object") return;
        if (!Array.isArray(val)) {
            if (val.type) lista.push(val);
            Object.values(val).forEach(recorrer);
        } else val.forEach(recorrer);
    }
    recorrer(datos);
    return lista;
}

// ============================================================
// BUSCAR WAYPOINTS RECURSIVAMENTE
// ============================================================

function findWaypoints(
    root
) {

    const result = [];


    function walk(
        value
    ) {

        if (
            !value ||
            typeof value !== "object"
        ) {

            return;

        }


        if (
            !Array.isArray(
                value
            )
        ) {

            if (
                value.type ===
                "VuAiWaypointEntity"
            ) {

                result.push(
                    value
                );

            }


            for (
                const key
                of Object.keys(value)
            ) {

                walk(
                    value[key]
                );

            }

        }
        else {

            for (
                const item
                of value
            ) {

                walk(
                    item
                );

            }

        }

    }


    walk(
        root
    );


    return result;

}


// ============================================================
// CREAR WAYPOINT DESDE ENTIDAD REAL
// ============================================================

function createWaypointFromEntity(
    entity
) {

    const name =
        entity.name ||
        "Waypoint";


    waypointCounter++;


    const waypoint =
        createWaypointMarker(
            name
        );


    waypoint.userData.type =
        "VuAiWaypointEntity";


    waypoint.userData.name =
        name;


    waypoint.userData.source =
        entity;


    const transform =
        getTransformComponent(
            entity
        );


    if (transform) {

        const properties =
            transform.Properties ||
            transform.properties ||
            {};


        const position =
            readVector(
                properties.Position
            );


        waypoint.position.copy(
            position
        );


        const rotation =
            readVector(
                properties.Rotation
            );


        waypoint.rotation.set(

            THREE.MathUtils.degToRad(
                rotation.x
            ),

            THREE.MathUtils.degToRad(
                rotation.y
            ),

            THREE.MathUtils.degToRad(
                rotation.z
            )

        );


        const scale =
            readVector(
                //properties.Scale
                         3.0,
                new THREE.Vector3(
                    1,
                    1,
                    1
                )
            );


        waypoint.scale.copy(
            scale
        );

    }


    world.add(waypoint);


    objects.push(
        waypoint
    );

}


// ============================================================
// ENCONTRAR TRANSFORM
// ============================================================

function getTransformComponent(
    entity
) {

    const data =
        entity.data;


    if (!data)
        return null;


    const components =
        data.Components ||
        data.components;


    if (!components)
        return null;


    return (
        components.VuTransformComponent ||
        components.vuTransformComponent ||
        null
    );

}

// ============================================================
// Cargar modelos gltf
// ============================================================

//pop up

document.getElementById("popup").classList.add("mostrar");
let infotxt = document.getElementById("fuckyou");

// Se quita solo después de unos segundos
setTimeout(() => {
    document.getElementById("popup").classList.remove("mostrar");
}, 2000);




const root = "model/"; //carpeta de modelos3D || reositiories of models
const file = ".glb"; //extension de archivos || extention files
const Models = new Map();  // Guarda modelos ya cargados || save models

async function chargeModel(VuEngine){
    // si el modelo cargo antes -> devolvemos copia
    if(Models.has(VuEngine)){
        return Models.get(VuEngine).clone(true);
    }
    // ruta completa
    const succes = `${root}${VuEngine}${file}`;
    infotxt.TextContent = `loading: ${succes}`;
    try{
        const gltf = await gltfLoader.loadAsync(succes); // root
        Models.set(VuEngine,gltf.scene);
        alert("yeahhhhh");
        return gltf.scene.clone(true);
    }catch (err){
        alert(`sorry the: ${VuEngine}`,err.message);
        return null;
    }
} 

/*
//cargar un modelo 3d
gltfLoader.load('model/Boat.glb', function(glb){
    scene.add(glb.scene);
    
}, undefined, function ( error ) { //if the model does exit

    alert("error: g12b");
    	console.error('im sorry');

});*/

// ============================================================
// crear modelos,codigo geberado con IA
// 
// ============================================================

async function crearObjetoDesdeEntidad(entidad) {
    const rutaModelo = entidad.modelAsset || entidad.ModelAsset;
    if (!rutaModelo) return;

    // Cargamos el modelo automáticamente
    const modelo = await cargarModelo(rutaModelo);
    if (!modelo) return;

    // APLICAMOS LA MISMA CONVERSIÓN DE EJES QUE LOS WAYPOINTS
    const pos = readVector(entidad);
    const rot = readVector(entidad.Rotation || entidad.rotation);

    modelo.position.set(
        pos.x,
        pos.z,       // Si ya tienes el ajuste global, quita el +0.8 aquí
        -pos.y
    );

    modelo.rotation.set(
        THREE.MathUtils.degToRad(-rot.x),
        THREE.MathUtils.degToRad(-rot.y),
        THREE.MathUtils.degToRad(rot.z)
    );

    modelo.scale.copy(readVector(entidad.Scale || entidad.scale, new THREE.Vector3(1,1,1)));

    // Agregamos a la escena y lista
    world.add(modelo);
    objects.push(modelo);
    alert(error);
}

// ============================================================
// LEER VECTOR
// ============================================================

function readVector(
    value,
    fallback = new THREE.Vector3()
) {

    if (
        !value
    ) {

        return fallback.clone();

    }


    if (
        Array.isArray(value)
    ) {

        return new THREE.Vector3(

            Number(
                value[0]
            ) || 0,

            Number(
                value[1]
            ) || 0,

            Number(
                value[2]
            ) || 0

        );

    }


    if (
        typeof value ===
        "object"
    ) {

        return new THREE.Vector3(

            Number(
                value.X ??
                value.x ??
                0
            ),

            Number(
                value.Y ??
                value.y ??
                0
            ),

            Number(
                value.Z ??
                value.z ??
                0
            )

        );

    }


    return fallback.clone();

}


// ============================================================
// ACTUALIZAR LISTA
// ============================================================

function updateObjectList() {

    objectList.innerHTML = "";


    if (
        !objects.length
    ) {

        objectList.innerHTML =
            `<div class="empty">
                No hay waypoints
             </div>`;

        return;

    }


    objects.forEach(
        (object, index) => {

            const item =
                document.createElement(
                    "div"
                );


            item.className =
                "objectItem";


            if (
                object === selected
            ) {

                item.classList.add(
                    "selected"
                );

            }


            item.textContent =
                `${index + 1}. ${
                    object.userData.name ||
                    "Waypoint"
                }`;


            item.onclick =
                () => {

                    selectObject(
                        object
                    );

                    focusSelected();

                };


            objectList.appendChild(
                item
            );

        }
    );

}


// ============================================================
// INSPECTOR
// ============================================================

function updateInspector() {

    if (!selected) {

        noSelection.classList.remove(
            "hidden"
        );

        objectInspector.classList.add(
            "hidden"
        );

        return;

    }


    noSelection.classList.add(
        "hidden"
    );


    objectInspector.classList.remove(
        "hidden"
    );


    document.getElementById(
        "selectedName"
    ).textContent =
        selected.userData.name ||
        "Waypoint";


    setValue(
        "posX",
        selected.position.x
    );

    setValue(
        "posY",
        selected.position.y
    );

    setValue(
        "posZ",
        selected.position.z
    );


    setValue(
        "rotX",
        THREE.MathUtils.radToDeg(
            selected.rotation.x
        )
    );

    setValue(
        "rotY",
        THREE.MathUtils.radToDeg(
            selected.rotation.y
        )
    );

    setValue(
        "rotZ",
        THREE.MathUtils.radToDeg(
            selected.rotation.z
        )
    );


    setValue(
        "scaleX",
        selected.scale.x
    );

    setValue(
        "scaleY",
        selected.scale.y
    );

    setValue(
        "scaleZ",
        selected.scale.z
    );

}


// ============================================================
// SET VALUE
// ============================================================

function setValue(
    id,
    value
) {

    const element =
        document.getElementById(
            id
        );


    if (!element)
        return;


    element.value =
        Number(value)
            .toFixed(4);

}


// ============================================================
// APLICAR INSPECTOR
// ============================================================

function applyInspector() {

    if (!selected)
        return;


    selected.position.set(

        readNumber(
            "posX"
        ),

        readNumber(
            "posY"
        ),

        readNumber(
            "posZ"
        )

    );


    selected.rotation.set(

        THREE.MathUtils.degToRad(
            readNumber(
                "rotX"
            )
        ),

        THREE.MathUtils.degToRad(
            readNumber(
                "rotY"
            )
        ),

        THREE.MathUtils.degToRad(
            readNumber(
                "rotZ"
            )
        )

    );


    selected.scale.set(

        readNumber(
            "scaleX"
        ),

        readNumber(
            "scaleY"
        ),

        readNumber(
            "scaleZ"
        )

    );


    updateInspector();

}


// ============================================================
// LEER NÚMERO
// ============================================================

function readNumber(
    id
) {

    return Number(
        document.getElementById(
            id
        ).value
    ) || 0;

}


// ============================================================
// ENFOCAR OBJETO
// ============================================================

function focusSelected() {

    if (!selected)
        return;


    const box =
        new THREE.Box3()
            .setFromObject(
                selected
            );


    const center =
        box.getCenter(
            new THREE.Vector3()
        );


    const size =
        box.getSize(
            new THREE.Vector3()
        );


    const distance =
        Math.max(
            size.length() * 2,
            5
        );


    camera.position.copy(
        center
    );


    camera.position.x +=
        distance;


    camera.position.y +=
        distance;


    camera.position.z +=
        distance;


    orbit.target.copy(
        center
    );

}


// ============================================================
// ENFOCAR TODOS
// ============================================================

function focusAll() {

    if (
        !objects.length
    )
        return;


    const box =
        new THREE.Box3();


    for (
        const object
        of objects
    ) {

        box.expandByObject(
            object
        );

    }


    const center =
        box.getCenter(
            new THREE.Vector3()
        );


    const size =
        box.getSize(
            new THREE.Vector3()
        );


    const distance =
        Math.max(
            size.length() * 1.5,
            30
        );


    camera.position.set(

        center.x + distance,

        center.y + distance * 0.7,

        center.z + distance

    );


    orbit.target.copy(
        center
    );

}


// ============================================================
// BORRAR
// ============================================================

function deleteSelected() {

    if (!selected)
        return;


    scene.remove(
        selected
    );


    const index =
        objects.indexOf(
            selected
        );


    if (
        index !== -1
    ) {

        objects.splice(
            index,
            1
        );

    }


    selected = null;


    transformControls.detach();


    updateInspector();

    updateObjectList();

}


// ============================================================
// LIMPIAR ESCENA
// ============================================================

function clearObjects() {

    for (
        const object
        of objects
    ) {

        scene.remove(
            object
        );


        disposeObject(
            object
        );

    }


    objects = [];


    selected = null;


    transformControls.detach();


    updateInspector();

}


// ============================================================
// DISPOSE
// ============================================================

function disposeObject(
    object
) {

    object.traverse(
        child => {

            if (
                child.geometry
            ) {

                child.geometry.dispose();

            }


            if (
                child.material
            ) {

                if (
                    Array.isArray(
                        child.material
                    )
                ) {

                    child.material.forEach(
                        material =>
                            disposeMaterial(
                                material
                            )
                    );

                }
                else {

                    disposeMaterial(
                        child.material
                    );

                }

            }

        }
    );

}


// ============================================================
// DISPOSE MATERIAL
// ============================================================

function disposeMaterial(
    material
) {

    if (
        material.map
    ) {

        material.map.dispose();

    }


    material.dispose();

}


// ============================================================
// GUARDAR
// ============================================================

function saveMap() {

    const result = {

        version: 1,

        type:
            "BBRacingWaypointEditor",

        waypoints:
            objects.map(
                object => {

                    const source =
                        object.userData.source;


                    return {

                        name:
                            object.userData.name,

                        type:
                            "VuAiWaypointEntity",

                        position: {

                            X:
                                object.position.x,

                            Y:
                                object.position.y,

                            Z:
                                object.position.z

                        },

                        rotation: {

                            X:
                                THREE.MathUtils.radToDeg(
                                    object.rotation.x
                                ),

                            Y:
                                THREE.MathUtils.radToDeg(
                                    object.rotation.y
                                ),

                            Z:
                                THREE.MathUtils.radToDeg(
                                    object.rotation.z
                                )

                        },

                        scale: {

                            X:
                                object.scale.x,

                            Y:
                                object.scale.y,

                            Z:
                                object.scale.z

                        },

                        source:
                            source

                    };

                }
            )

    };


    const blob =
        new Blob(

            [
                JSON.stringify(
                    result,
                    null,
                    2
                )
            ],

            {
                type:
                    "application/json"
            }

        );


    const url =
        URL.createObjectURL(
            blob
        );


    const link =
        document.createElement(
            "a"
        );


    link.href =
        url;


    link.download =
        "BeachB_waypoints.json";


    document.body.appendChild(
        link
    );


    link.click();


    link.remove();


    setTimeout(
        () => {

            URL.revokeObjectURL(
                url
            );

        },
        1000
    );

}


// ============================================================
// TECLADO
// ============================================================

function onKeyDown(event) {

    if (
        !selected
    )
        return;


    if (
        event.key === "w" ||
        event.key === "W"
    ) {

        transformControls.setMode(
            "translate"
        );

    }


    if (
        event.key === "e" ||
        event.key === "E"
    ) {

        transformControls.setMode(
            "rotate"
        );

    }


    if (
        event.key === "r" ||
        event.key === "R"
    ) {

        transformControls.setMode(
            "scale"
        );

    }


    if (
        event.key === "Delete"
    ) {

        deleteSelected();

    }

}


// ============================================================
// INICIAR
// ============================================================

init();