<div id="marsloc"></div>
<article id="marsinfo">
<h1>Mars</h1>
  <div>
    <p>Home to both the Solar System's highest mountain <i>(Olympus Mons)</i>, and deepest canyon <i>(Valles Marineris)</i>, Mars is the also the planet most likely to support life outside of Earth; seasonal methane plumes observed over several decades have yet to be explained.
  </div>
</article>
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,400i|Oxygen:300');
* {
  box-sizing: border-box;
}
body {
  background: black;
  margin: 0;
  min-height: 100vh;
  font-family: Oxygen, sans-serif;
  color: #fff;
}
#marsloc {
  cursor: grab;
}
#marsinfo { 
  position: absolute;
  top: 0;
  width: 100%;
  padding: 2rem;
}
#marsinfo h1 {
  font-size: 8vw;
  margin-top: 0;
  font-weight: 100;
  line-height: 1;
  position: absolute;
}
#marsinfo div {
  width: 40%;
  position: absolute;
  background-color: rgba(0,0,0,0.3);
  right: 0;
  padding: 1.3rem;
  line-height: 1.6;
  font-size: 1.2rem;
  pointer-events: none;
  @media all and (max-width: 540px) {
    width: 100%;
    left: 0;
    top: 40vw;
  }
}
View Compiled
let clock = new THREE.Clock();

const imgLoc = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/";
let camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 10000),
light = new THREE.PointLight(0xFFFFFF, 2, 5000);
camera.position.set(1300, 0, 0),
scene = new THREE.Scene();

camera.lookAt(scene.position);
light.position.set(2000, 2000, 1500);
scene.add(light);

let marsGeo = new THREE.SphereGeometry (500, 32, 32),
marsMaterial = new THREE.MeshPhongMaterial(),
marsMesh = new THREE.Mesh(marsGeo, marsMaterial);
scene.add(marsMesh);   

let loader = new THREE.TextureLoader();
marsMaterial.map = loader.load(imgLoc+'mars-map.jpg');
marsMaterial.bumpMap = loader.load(imgLoc+'mars-bump.jpg');
marsMaterial.bumpScale = 8;
marsMaterial.specular = new THREE.Color('#000000');

let renderer = new THREE.WebGLRenderer({antialiasing : true});
renderer.setSize(window.innerWidth - 40, window.innerHeight -40)       
marsloc.appendChild(renderer.domElement);

let controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.addEventListener('change', render);

function animate(){
  requestAnimationFrame(animate);
  controls.update();
  render();       
}
            
function render(){
   var delta = clock.getDelta();
   marsMesh.rotation.y += 0.1 * delta;
   renderer.clear();
   renderer.render(scene, camera); 
}

animate();

marsloc.addEventListener('mousedown', function() { 
  marsloc.style.cursor = "-moz-grabbing";
  marsloc.style.cursor = "-webkit-grabbing";
  marsloc.style.cursor = "grabbing";
})

marsloc.addEventListener('mouseup', function() { 
  marsloc.style.cursor = "-moz-grab";
  marsloc.style.cursor = "-webkit-grab";
  marsloc.style.cursor = "grab";
})

window.addEventListener( 'resize', onWindowResize, false );

function onWindowResize(){
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth - 40, window.innerHeight - 40);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/three.js/r83/three.js
  2. https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/orbitcontrols.js