App.ts

App.ts

import { log } from "aftc-modules/src/debug/log";

import * as BABYLON from 'babylonjs';
import "babylonjs-loaders";

import gsap from "gsap/all";
import { attachDebug } from "aftc-modules/src/debug/attachDebug";
import { debugTo } from "aftc-modules/src/debug/debugTo";
import { AttachKeysToVec3 } from "../utils/AttachKeysToVec3";
import { radToDeg } from "aftc-modules/src/conversion/radToDeg";
// - - - - - - - - - - - - -

// interfaces
// - - - - - - - - - - - - -

// types
// - - - - - - - - - - - - -

export class App {

    // Var defs
    private fps: HTMLDivElement;
    private canvas: HTMLCanvasElement;
    private engine: BABYLON.Engine;
    private scene: BABYLON.Scene;
    private camera: BABYLON.FreeCamera;

    private light: BABYLON.HemisphericLight | null = null;

    // private sphere: Mesh;
    // private ground: Mesh;
    private lookAtMesh: BABYLON.Mesh;

    private cameraY: number = 1.715;
    private enableAWSD: boolean = true;
    private lockCameraYPos: boolean = true;
    private enableLookAt: boolean = false;

    private waypoints: BABYLON.Vector3[] = [];
    private lookAtPoints: BABYLON.Vector3[] = [];
    private cameraSplinePoints: BABYLON.Vector3[] = [];

    private navigating: boolean = false;

    private videoMat;
    private videoTexture;
    private t:number = 0;
    private x:number = 0;
    private y:number = 0;
    private z:number = 0;
    // - - - - - - - - - - - - -


    constructor() {
        log("App()");

        // Debug
        attachDebug(10, "TL", document.body);

        // Vars, dom access, etc
        this.canvas = document.getElementById("renderCanvas") as HTMLCanvasElement;
        this.fps = document.getElementById("fps") as HTMLDivElement;
        // log(this.canvas);

        // Engine
        this.engine = new BABYLON.Engine(this.canvas, true);

        // Scene
        this.scene = new BABYLON.Scene(this.engine);
        // this.scene.collisionsEnabled = true;

        // Camera
        this.camera = new BABYLON.FreeCamera("camera1", new BABYLON.Vector3(0, this.cameraY, -10), this.scene);
        // this.camera.minZ = 0.0001;
        // this.camera.position = new BABYLON.Vector3(3.274, this.cameraY, 2.51);
        this.camera.position = new BABYLON.Vector3(-0.324, this.cameraY, 0.836);
        // this.camera.checkCollisions = true;

        // Set camera target
        // this.camera.setTarget(BABYLON.Vector3.Zero());
        this.camera.setTarget(new BABYLON.Vector3(0, this.cameraY, 2.3));

        // Camera controls
        // https://doc.babylonjs.com/divingDeeper/cameras/customizingCameraInputs
        this.camera.attachControl(this.camera, true);
        // this.camera.inputs.clear(); // Unable to restore mouse look only on addMouse after using this
        // this.camera.inputs.addMouse() // Doesn't work if the above line is used
        this.camera.speed = 0.1;
        this.camera.angularSensibility = 5000;
        if (this.enableAWSD === true) {
            this.camera.keysLeft = [65]; // A
            this.camera.keysRight = [68]; // D
            this.camera.keysUp = [87]; // W
            this.camera.keysDown = [83]; // S
        } else {
            this.camera.inputs.removeByType("FreeCameraKeyboardMoveInput");
        }

        // HDR Environment (no skybox)
        // https://doc.babylonjs.com/divingDeeper/materials/using/HDREnvironment
        // this.scene.createDefaultEnvironment();
        // let hdrTexture = new HDRCubeTexture("./assets/textures/venice_sunset_1k.hdr", this.scene, 512, false, true, false, true);
        // // let hdrTexture = CubeTexture.CreateFromPrefilteredData("./assets/textures/environment.dds", this.scene);
        // this.scene.createDefaultEnvironment({
        //     environmentTexture: hdrTexture,
        //     // createGround: true,
        //     // createSkybox: true,
        //     // enableGroundMirror: true,
        //     // enableGroundShadow: true
        // })

        // WARNING - Nukes google pixel 5, works on iphone, see https://aftc.io/test
        // HDR Skybox and Env
        let hdrTexture1 = new BABYLON.HDRCubeTexture("./assets/textures/venice_sunset_1k.hdr", this.scene, 512, false, true, false, true);
        // let hdrTexture2 = BABYLON.CubeTexture.CreateFromPrefilteredData("./assets/textures/environment.dds", this.scene);
        let currentSkybox = this.scene.createDefaultSkybox(hdrTexture1, true);


        // Lights
        // this.light = new HemisphericLight("light1", new Vector3(0, 1, 0), this.scene);
        // this.light.intensity = 0.7;

        // lookAtMesh
        // 'cube' shape. Params: name, subdivs, size, scene
        this.lookAtMesh = BABYLON.MeshBuilder.CreateBox("lookAtTarget", { size: 0.5 }, this.scene);
        // this.lookAtMesh.rotate(new BABYLON.Vector3(0,0,1),1);
        // this.lookAtMesh.rotation.x = Math.PI / 2; // 90 deg
        this.lookAtMesh.rotation.x = Math.PI / 2; // 180 deg

        this.lookAtMesh.position = new BABYLON.Vector3(-5.4, this.cameraY, 1.5);
        let lookAtMeshMaterial = new BABYLON.StandardMaterial("lookAtMeshMaterial", this.scene);;
        lookAtMeshMaterial.diffuseColor = new BABYLON.Color3(1, 0, 1);
        lookAtMeshMaterial.specularColor = new BABYLON.Color3(0.5, 0.6, 0.87);
        lookAtMeshMaterial.emissiveColor = new BABYLON.Color3(1, 0, 0);
        lookAtMeshMaterial.ambientColor = new BABYLON.Color3(0.23, 0.98, 0.53);
        this.lookAtMesh.material = lookAtMeshMaterial;

        if (this.lookAtMesh) {
            // If you want to use an image as material
            // this.lookAtMesh.material = new StandardMaterial("Mat", this.scene);
            // this.lookAtMesh.material.diffuseTexture = new Texture("textures/crate.png", this.scene);

            // If you want to use environment as a material
            // let sphereMtl = new BABYLON.PBRMaterial("sphereMtl", this.scene);
            // sphereMtl.roughness = 0.05;
            // this.lookAtMesh.material = sphereMtl;
            // this.lookAtMesh.checkCollisions = true;

            // this.videoMat = new BABYLON.StandardMaterial("m", this.scene);
            // this.videoTexture = new BABYLON.VideoTexture("vidtex", "./assets/vid.mp4", this.scene);
            // let v:HTMLVideoElement = this.videoTexture.video;
            // v.pause();
            // this.videoMat.diffuseTexture = this.videoTexture;
            // this.videoMat.roughness = 1;
            // this.videoMat.emissiveColor = BABYLON.Color3.White();
            // this.lookAtMesh.material = this.videoMat;
        }




        this.camera.setTarget(this.lookAtMesh.position);


        // Load model
        debugTo(4,"Loading");
        console.warn("LOADING GLB - please wait...");

        // Loads ok
        // BABYLON.SceneLoader.ImportMesh("", "./assets/models/LG_3_Babylon/", "Lg_3.babylon", this.scene, (meshes) => {});

        // Loads ok with npm i -S babylonjs@preview babylonjs-loaders@preview
        BABYLON.SceneLoader.ImportMesh("", "./assets/models/", "Lg_3.glb", this.scene, (meshes) => {
        // BABYLON.SceneLoader.ImportMesh("", "./assets/models/LG_3_Babylon/", "Lg_3.babylon", this.scene, (meshes) => {
            log("Loaded")
            debugTo(4,"Loaded");

            meshes.forEach(mesh => {
                log(mesh.name);
                let meshName: string = mesh.name;
                if (meshName.includes("WayPoint_")) {
                    this.waypoints.push(mesh.position);
                }
            })
            // log(this.camera.position)

            // this.setupAutomatedNav();
            // this.initCamera();

        },(p)=>{
            let percent:number = (100/p.total) * p.loaded;
            debugTo(5,percent.toFixed(2));
        });



        if (this.lookAtMesh) {
            new AttachKeysToVec3(this.lookAtMesh, "numpad", 0.1, false)
        }



        // before render
        this.scene.registerBeforeRender(() => {
            // this.camera.rotation.x = 0;
            // this.camera.position.y = 1;
            if (this.lockCameraYPos === true) {
                this.camera.position.y = this.cameraY;
            }
        })

        // Render loop
        this.engine.runRenderLoop(() => {
            this.t+=0.001;

            // FPS
            this.fps.innerText = this.engine.getFps().toFixed() + " fps";




            // this.camera.position.x = Math.sin(this.t * 5) * 2;
            // this.camera.position.z = Math.cos(this.t * 5) * 2;

            if (this.enableLookAt === true){
                this.camera.setTarget(this.lookAtMesh.position);
            }



            // this.lookAtMesh.rotate(new BABYLON.Vector3(1,0,1),0.004);
            // this.lookAtMesh.rotate(new BABYLON.Vector3(0,1,0),0.01);


            debugTo(0, this.camera.position.x.toFixed(3));
            debugTo(1, this.camera.position.y.toFixed(3));
            debugTo(2, this.camera.position.z.toFixed(3));

            // Render
            if (this.scene != null) {
                this.scene.render();
            }

        });

    }
    // - - - - - - - - - - - - -




    initCamera() {
        log("App.initCamera()");


    }
    // - - - - - - - - - - - - - - - - - - - - - - - -


}