Three JS Scene.js

/** Camera **/

export function initCamera() {

    const camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.1, 10000);
    camera.position.y = 40;
    camera.position.x = 0;

    return camera;
}

/** FBX Loader **/
export function loadModel(scene, path) {

    let Loader = new FBXLoader;

    let houseObject = scene.getObjectByName('FBXHouse');
    scene.remove(houseObject);

    Loader.load(path, function (house) {

        scene.add(house);

            house.traverse(function (object) {

            if (object.isMesh) {
                object.visible = false;
                object.castShadow = true;
                object.receiveShadow = true;
                elements.push(object)
            }

        });

        house.position.y = -1.21;

        house.name = 'FBXHouse';

        //Remove LOADER


        THREE.DefaultLoadingManager.onProgress = function ( url, itemsLoaded, itemsTotal ) {

            if (document.getElementById('progress_bar')) {
                document.getElementById('progress_bar').style.width = itemsLoaded / itemsTotal * 100 + '%'
            }
        };

        THREE.DefaultLoadingManager.onLoad = function () {
            LOADER.remove();
        };


    }, undefined, function (error) {
        console.error(error);
    });
}

/** Renderer **/
  export function initRenderer(camera){
    const renderer = new THREE.WebGLRenderer({canvas, antialias: true});

    renderer.shadowMap.enabled = true;
    renderer.outputEncoding = THREE.sRGBEncoding;
    renderer.shadowMap.type = THREE.PCFSoftShadowMap;
    renderer.setPixelRatio(window.devicePixelRatio);

    document.body.appendChild(renderer.domElement);

    return renderer;
}

 /** Scene **/ 

export function initScene(){

    const scene = new THREE.Scene();

    // scene.fog = new THREE.Fog('FFFFFF', 20, 500);

    //Add Light

    let hemiLight = new THREE.HemisphereLight(0x89b2d3, 0x696559, 0.8);
    scene.add(hemiLight);


    let spotLight = new THREE.SpotLight(0xffa95c, 0.5);
    spotLight.angle = Math.PI / 40;
    spotLight.shadow.bias = -0.00001;
    spotLight.shadow.mapSize.width = 1024 * 1;
    spotLight.shadow.mapSize.height = 1024 * 1;
    spotLight.position.set(100, 300, 100);
    spotLight.rotation.x = Math.PI * 0.5;
    spotLight.castShadow = true;


    spotLight.shadow.mapSize.width = 512;
    spotLight.shadow.mapSize.height = 512;

    spotLight.shadow.camera.near = 0.5;
    spotLight.shadow.camera.far = 500;
    spotLight.shadow.camera.fov = 30;


    spotLight.target.position.set( 0, 0, 0 );
    scene.add( spotLight.target );

    scene.add(spotLight);

    var lightHelper = new THREE.SpotLightHelper( spotLight );
    scene.add( lightHelper );


    var helper = new THREE.CameraHelper( spotLight.shadow.camera );
    // scene.add( helper );


    initSky(scene)

    return scene;
}

export function initSky(scene) {

    // Add Sky
    let sky = new Sky();
    sky.scale.setScalar(450);
    scene.add(sky);

    let sun = new THREE.Vector3(0, 0, 0);

    let effectController = {
        turbidity: 7.8,
        rayleigh: 2.289,
        mieCoefficient: 0.039,
        mieDirectionalG: 1,
        inclination: 0.2796, // elevation / inclination
        azimuth: 0.388, // Facing front,


    };

    function guiChanged() {
        let uniforms = sky.material.uniforms;
        uniforms['turbidity'].value = effectController.turbidity;
        uniforms['rayleigh'].value = effectController.rayleigh;
        uniforms['mieCoefficient'].value = effectController.mieCoefficient;
        uniforms['mieDirectionalG'].value = effectController.mieDirectionalG;

        const theta = Math.PI * (effectController.inclination - 0.5);
        const phi = 2 * Math.PI * (effectController.azimuth - 0.5);

        sun.x = Math.cos(phi);
        sun.y = Math.sin(phi) * Math.sin(theta);
        sun.z = Math.sin(phi) * Math.cos(theta);

        uniforms["sunPosition"].value.copy(sun);

    }


    guiChanged();


}

/** The main Application **/
const scene = initScene();

const camera = initCamera();

const renderer = initRenderer(camera);

const controls = initControls(camera, renderer);

loadModel(scene, modelPath);


    function animate() {
        // stats.update();
        controls.update();
        renderer.render(scene, camera);

        requestAnimationFrame(animate);
        if (resizeRenderToDisplaySize(renderer)) {
            const canvas = renderer.domElement;
            camera.aspect = canvas.clientWidth / canvas.clientHeight;
            camera.updateProjectionMatrix();

        }

    }

    function resizeRenderToDisplaySize(renderer) {
        const canvas = renderer.domElement;
        let width = window.innerWidth;
        let height = window.innerHeight;
        let canvasPixelWidth = canvas.width / window.devicePixelRatio;

        let canvasPixelHeight = canvas.height / window.devicePixelRatio;
        const needResize = canvasPixelWidth !== width || canvasPixelHeight !== height;
        if (needResize) {
            renderer.setSize(width, height, false);
        }
        return needResize;

    }

    animate();