var width = section.offsetWidth,
height = section.offsetHeight;

var topOfElement = section.getBoundingClientRect().top - height;
var bottomOfElement = section.getBoundingClientRect().bottom;

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000);
camera.position.z = 10;
camera.position.x = -2.5;

const controls = new THREE.OrbitControls( camera, renderer.domElement );
controls.enableZoom = false;
controls.maxPolarAngle = Math.PI;

const renderer = new THREE.WebGLRenderer( { alpha: true } );
renderer.setClearColor( 0x000000, 0 );
renderer.setSize(width, height);
section.appendChild(renderer.domElement);

const onEverythingLoaded = () => {
    render();
};

const loadingManager = new THREE.LoadingManager(onEverythingLoaded);
const loader = new THREE.TextureLoader(loadingManager);

const earthGeomerty = new THREE.SphereGeometry( 5.5, 32, 32 );
const earthDiffuse = loader.load('assets/drought_earth_texture.png');
const earthSpec = loader.load('assets/drought_earth_texture_bump.png');

const material = new THREE.MeshPhongMaterial( {
    specular: 0xffffff,
    map: earthDiffuse,
    specularMap: earthSpec,
    normalScale: new THREE.Vector2( 1, 1 ),
    shininess: 30,
    transparent: true,
    depthTest: true,
    depthWrite: false,
    polygonOffset: true,
    polygonOffsetFactor: - 4,
    wireframe: false
} );

const sphere = new THREE.Mesh( earthGeomerty, material );
const ambientLight = new THREE.AmbientLight( 0x667777 );

const directionalLight = new THREE.DirectionalLight( 0xffffdd, 2 );
directionalLight.position.set( 4, 0, 0 );
scene.add( sphere );
scene.add( ambientLight );
scene.add( directionalLight );

const render = () => {
    animationFrame = requestAnimationFrame( render );
    sphere.rotation.y += 0.001;
    renderer.render( scene, camera );
};