import { Engine } from '@babylonjs/core/Engines/engine';
import { Scene } from '@babylonjs/core/scene';
import { SceneLoader, Vector3, HemisphericLight, ArcRotateCamera } from '@babylonjs/core';
import '@babylonjs/loaders/glTF';
import 'pepjs';

window.addEventListener('DOMContentLoaded', function () {
    let glbFile = "sci-fi-room.glb";
    // let glbFile = "pbr-spheres.gltf";

    const canvas = document.getElementById("renderCanvas") as HTMLCanvasElement;
    const engine = new Engine(canvas);
    let scene = new Scene(engine);
    let camera = new ArcRotateCamera("camera1", 0, 0, 10, new Vector3(0, 0, 0), scene);

    // This targets the camera to scene origin
    camera.setPosition(new Vector3(0, 0, 20));

    // This attaches the camera to the canvas
    camera.attachControl(canvas, true);

    camera.speed = 5;
    // This creates a light, aiming 0,1,0 - to the sky (non-mesh)
    let light = new HemisphericLight("light1", new Vector3(0, 1, 0), scene);

    // Default intensity is 1. Let's dim the light a small amount
    light.intensity = 0.7;

    // Append the glb/gltf file to the scene
    SceneLoader.Append("./", glbFile, scene, (scene) => {
        //do more stuff if needed
    });

    engine.runRenderLoop(() => {
        scene.render();
    });

    window.addEventListener('resize', function () {
        engine.resize();
    });
})