menu.js

//Import the THREE.js library
import * as THREE from "https://cdn.skypack.dev/three@0.129.0/build/three.module.js";
// To allow for the camera to move around the scene
import { OrbitControls } from "https://cdn.skypack.dev/three@0.129.0/examples/jsm/controls/OrbitControls.js";
// To allow for importing the .gltf file
import { GLTFLoader } from "https://cdn.skypack.dev/three@0.129.0/examples/jsm/loaders/GLTFLoader.js";


const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

let object;
let controls;
let objToRender = "coffee_shop_cup";

const loader = new GLTFLoader();

loader.load(
    "./coffee_shop_cup/scene.gltf",
    function(gltf) {
        object = gltf.scene;
        scene.add(object);
    },
    function (xhr) { //Shows Loading Percentage
        console.log((xhr.loaded / xhr.total *100) + "% loaded");
    
    },

    function (error) { //Shows Error if Possible Error
        console.error(error);
    }
);

const renderer = new THREE.WebGLRenderer({alpha: true});
camera.position.set(1.5,1,0);

const topLight = new THREE.DirectionalLight(0xfffffff, 1);
topLight.position.set(500, 500, 500);
topLight.castShadow = true;
scene.add(topLight);

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

document.getElementById("coffeemodel").appendChild(renderer.domElement);


function animate() {
    requestAnimationFrame(animate);

    renderer.render(scene,camera);
}

animate();