import * as THREE from 'three';
import Stats from 'three/addons/libs/stats.module.js';
import { RapierPhysics } from 'three/addons/physics/RapierPhysics.js';
import { RapierHelper } from 'three/addons/helpers/RapierHelper.js';
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
import { KTX2Loader } from 'three/addons/loaders/KTX2Loader.js';
import { MeshoptDecoder } from 'three/addons/libs/meshopt_decoder.module.js';

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

(() => {
    container = document.getElementById('container');

    stats = new Stats();
    renderer = new THREE.WebGLRenderer({ antialias: true });
    camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 1, 100);
    scene = new THREE.Scene();

    container.appendChild(stats.dom);
    container.appendChild(renderer.domElement);

    // setup
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(window.innerWidth, window.innerHeight);

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

    camera.position.set(0, 1, 5);

    var sun = new THREE.DirectionalLight(0xffffff, 1.5);
    sun.position.set(10, 10, 10);
    scene.add(sun);
    var ambientLight = new THREE.AmbientLight(0x404040);
    scene.add(ambientLight);

    const loader = new GLTFLoader();
    loader.load('Miata.glb', (gltf) => {
        car = gltf.scene;
        car.position.set(0, 0, 0);
        car.scale.set(1, 1, 1);
        scene.add(car);
    });


    window.onresize = function () {
        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();

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

    };

    function loop() {   
        // rotate the car
        if (car) {
            car.rotation.y += 0.01;
        }
        stats.update();
        renderer.render(scene, camera);
    }

    renderer.setAnimationLoop(loop);


})();