How to load objects with Three.js with high quality?

Question

I'm trying to create an object loader with Three.js but I noticed that the quality is way too low and used too much CPU at the same time.

When I use my version, the scene looks like this:

But when I use this website to load it, looks so much better and uses less CPU:

My JavaScript to load this object is:

var camera;
var scene;
var renderer;
var controls;
var container = document.getElementById('webgl');
var WIDTH = container.clientWidth;
var HEIGHT = container.clientHeight;
var ASPECT = WIDTH / HEIGHT;
var ANGLE = 45;
var container =  document.getElementById('webgl');

if (Detector.webgl) {
    main();
} else {
    var warning = Detector.getWebGLErrorMessage();
    document.getElementById('webgl').appendChild(warning);
}

function main(){  
    //Scene
    scene = new THREE.Scene();

    //Camera
    camera = new THREE.PerspectiveCamera(
        ANGLE, // field of view
        ASPECT, // aspect ratio
        10, // near clipping plane
        100000 // far clipping plane
    );

    camera.position.x = 500;
    camera.position.y = 200;
    camera.position.z = 500;
    camera.lookAt(new THREE.Vector3(100, 100, 100));

    //Renderer
    renderer = new THREE.WebGLRenderer();
    var ambientLight = getAmbientLigth(1);
    scene.add(ambientLight);
    scene.background = new THREE.Color( 0xc3c3c3 );
    renderer.setSize(WIDTH, HEIGHT);

    renderer.shadowMap.enabled = true;
    document.getElementById('webgl').appendChild(renderer.domElement);
    controls = new THREE.OrbitControls( camera, renderer.domElement );
    controls.maxPolarAngle = Math.PI/2;
    controls.enableKeys = true;
    loadObject();
    update(renderer, scene, camera, controls);
}

function getAmbientLigth(intensity, color) {
    color = color === undefined ? 'rgb(255, 255, 255)' : color;
    var light = new THREE.AmbientLight(color, intensity);
    return light;
}

function loadObject() {
    var mtlLoader = new THREE.MTLLoader();
    var objLoader = new THREE.OBJLoader();
    mtlLoader.setPath( 'objects/Blue_shed/' );
        mtlLoader.load('blueShed.mtl', function( materials ) {
        materials.isMultiMaterial = true;
        materials.preload();
        objLoader.setMaterials( materials );
        objLoader.setPath( 'objects/Blue_shed/' );
        objLoader.load( 'blueShed.obj', function ( object ) {
            object.name = 'cute-house';
            object.receiveShadow = true;
            object.castShadow = true;
            object.scale.set( 30, 30, 30);
            scene.add( object );
        } );
    });
}

function update(renderer, scene, camera, controls) {
    controls.update();
    renderer.render(scene, camera);
    requestAnimationFrame(function() {
        update(renderer, scene, camera, controls);
    });
}

I used renderer.setSize to increase the resolution of the renderer and that helped a little bit but still is not as good as in the second image, and still uses too much CPU.

Any ideas? Is there a setting or something that I'm not setting up correctly? I see that website uses a JSON loader, but I don't think that has something to do with this issue, but I mention it just in case.