Three.js viewer

console.clear();

let scene = new THREE.Scene();
scene.background = new THREE.Color(0xdddddd);

let hlight = new THREE.AmbientLight(0x404040,100);
scene.add(hlight);

let fillLight = new THREE.DirectionalLight(new THREE.Color('hsl(240, 100%, 75%)'), 0.75);
fillLight.position.set(100, 0, 100);
scene.add(fillLight);

let backLight = new THREE.DirectionalLight(0xffffff, 1.0);
backLight.position.set(100, 0, -100).normalize();
scene.add(backLight);

let axesHelper = new THREE.AxesHelper(5);
scene.add(axesHelper);

var renderer = new THREE.WebGLRenderer({antialias:true});
renderer.setSize(window.innerWidth, window.innerHeight);

let viewer = document.getElementById('3dViewer');
viewer.appendChild(renderer.domElement);
viewer.children[2].id = '3dCanvas';

let camera = new THREE.PerspectiveCamera(40, window.innerwidth/window.innerHeight, 1, 5000);
camera.position.z = 100;

let controls = new THREE.OrbitControls(camera, renderer.domElement);
// controls.enableDamping = true;
// controls.dampingFactor = 0.25;
controls.enableZoom = true;

const manager = new THREE.LoadingManager();

var viewerAlert = document.getElementById('viewerAlert');
var viewerFiles = document.getElementById('viewerFiles');
var countFiles  = document.getElementById('countFiles');

manager.onStart = function(url, itemsLoaded, itemsTotal){
    viewerFiles.textContent = 'Started loading file: ' + url + '.\nLoaded.';
    countFiles.textContent = itemsLoaded + ' of ' + itemsTotal + ' files.';
};

manager.onLoad = function(){
    viewerFiles.textContent = 'Loading complete!';
    countFiles.textContent = '';

    setTimeout(() => {
        viewerAlert.classList.add('fade-out');
        viewerAlert.addEventListener('transitionend', function(){
            viewerAlert.classList.replace('fade-out', 'hidden');
        });
    }, 800);
};

manager.onProgress = function(url, itemsLoaded, itemsTotal){
    viewerFiles.textContent = 'Loading file: ' + url + '.\nLoaded.';
    countFiles.textContent = itemsLoaded + ' of ' + itemsTotal + ' files.';
};

manager.onError = function(url){
    viewerFiles.textContent = 'There was an error loading ' + url;
    countFiles.textContent = '';
};

var mtlLoader = new THREE.MTLLoader(manager);
mtlLoader.setPath('./assets/models/');
mtlLoader.load('weingut-mueller_weinkarton.mtl', function( materials ) {
    materials.preload();

    var objLoader = new THREE.OBJLoader(manager);
    objLoader.setMaterials( materials );
    objLoader.setPath('./assets/models/');
    objLoader.load( 'weingut-mueller_weinkarton.obj',
        function(obj){
            obj.position.set(0, 0, 0);

            const box = new THREE.BoxHelper( obj, 0xffff00 );

            scene.add(box);
        },
        function(xhr){
        },
        function(error){
            console.error('An error occured!' + error);
        }
    );
});

window.addEventListener('resize', function(){
    let width  = window.innerWidth;
    let height = window.innerHeight;

    renderer.setSize(width, height);
    camera.aspect = width / height;
    camera.updateProjectionMatrix();
});

renderer.render(scene, camera, controls);

function animate(){
    requestAnimationFrame(animate);
    controls.update();
}

animate();