Почему не рендерится сцена three.js?

Codepen Получаю черный экран. Вполне возможно где-то ошибся. Консоль ошибок не выдает.

class Scene{
    constructor(perspective, perspectiveMove, near, cameraPosition, orbitControls ) {
        this.scene = new THREE.Scene();
        this.perspective = perspective;
        this.perspectiveMove = perspectiveMove;
        this.near = near;
        this.cameraPosition = cameraPosition;
        this.orbitControls = orbitControls;
        this.camera = new THREE.PerspectiveCamera( this.persective, this.userWindow().width / this.userWindow().height, this.near, this.perspectiveMove );
        this.renderer = new THREE.WebGLRenderer();
    }
    userWindow(){
        return {
            width: Math.max(document.documentElement.clientWidth || window.innerWidth),
            height: Math.max(document.documentElement.clientHeight || window.innerHeight)
        }
    }
    createScene(){
        this.renderer.setSize( window.innerWidth, window.innerHeight );
        document.body.appendChild( this.renderer.domElement );
        if(this.orbitControls.enable){
            let controls = new THREE.OrbitControls(this.camera, this.renderer.domElement)
            controls.maxPolarAngle = Math.PI / 2;
            controls.minDistance = this.orbitControls.maxDistance;
            controls.maxDistance = this.orbitControls.minDistance;
        }
        this.camera.position.set(this.cameraPosition.x, this.cameraPosition.y, this.cameraPosition.z);
    }
    ref(){
        return {
            contorls: {
                switch: console.warn('To use the controls you must transfer to arguments boolean value - true')
            }
        }
    }
}

class Meshes extends Scene{

    constructor(perspective, perspectiveMove, near, cameraPosition, orbitControls ) {
        super(perspective, perspectiveMove, near, cameraPosition, orbitControls );

    }
    createMaterial(boxGeometry, materialValues, sceneColor){
        const geometry = new THREE.BoxGeometry(boxGeometry.x, boxGeometry.y, boxGeometry.z);
        const material = new THREE.MeshPhongMaterial( materialValues );

        const platform = new THREE.Mesh( geometry, material );
        this.scene.background = new THREE.Color(sceneColor);
        this.scene.add( platform );

    }
    sceneContext(){
        return this.scene;
    }
    modelLoader(loaderParams){

        let loadModel = new THREE.GLTFLoader();
        const scene = this.sceneContext()
        loadModel.load( loaderParams.url, function ( gltf ) {
            if(loaderParams.scale.enable){
                gltf.scene.scale.set(loaderParams.scale.x, loaderParams.scale.y, loaderParams.scale.z)

            }
            scene.add( gltf.scene );
        }, undefined, function ( error ) {
            console.error( error );

        } );
    }
    lights(params){
        const ALight = new THREE.AmbientLight(params.ambientLightColor.color, params.ambientLightColor.intensity)
        const DLight = new THREE.DirectionalLight(params.directionalLightColor.color)
        this.scene.add(ALight)
        this.scene.add(DLight)
    }
    animate(){
        requestAnimationFrame( this.animate.bind(this) );
        this.renderer.render( this.scene, this.camera );
    }
}

const mainConstruction = new Scene(90, 1000, 0.5, {x: 10, y: 7, z: 15}, {enable: true, minDistance: 5, maxDistance: 50})
mainConstruction.createScene();

const meshes = new Meshes();
meshes.createMaterial({x: 20, y: 2, z: 100}, {color: '#f4a540'}, '#67c1ea');
meshes.modelLoader({ url: '../models/sonic/scene.gltf', scale:{enable: true, x: 4, y: 4, z: 4} })
meshes.lights({ambientLightColor: {color: '#F48320', intensity: 1}, directionalLightColor: {color: '#C76B1A'}})
meshes.animate();