GeoPan

by amitlzkpa

HTML

<script src="https://cdn.jsdelivr.net/npm/three@0.132/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.132/examples/js/controls/OrbitControls.js"></script>

CSS

body {
  margin: 0px;
}

JavaScript

// Simple three.js example
// https://www.jsdelivr.com/package/npm/three

let renderer, scene, camera, controls;

init();
animate();
function init() {
    renderer = new THREE.WebGLRenderer();
    renderer.setSize( window.innerWidth, window.innerHeight );
    document.body.appendChild( renderer.domElement );
    scene = new THREE.Scene();
    camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 10000 );
    camera.position.set( 200, 200, 200 );
    controls = new THREE.OrbitControls( camera, renderer.domElement );
    scene.add( new THREE.AmbientLight( 0x222222 ) );
    let light = new THREE.DirectionalLight( 0xffffff, 1 );
    light.position.set( 200, 200, 0 );
    scene.add( light );
    scene.add( new THREE.AxesHelper( 20 ) );
  	document.addEventListener('mousedown', onMouseDown, false);
    window.addEventListener( 'resize', onWindowResize, false );
}

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

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



// --------------------------------------





let sphere;
let defaultCamPos;
let defaultCamRot;




function setup() {
  let imgPath = 'https://upload.wikimedia.org/wikipedia/commons/thumb/8/83/Equirectangular_projection_SW.jpg/1024px-Equirectangular_projection_SW.jpg';
  let geometry = new THREE.SphereGeometry( 100, 64, 64 );
  let texture = new THREE.TextureLoader().load( imgPath );
  let material = new THREE.MeshBasicMaterial( {
    color: 0xffffff,
    map: texture
  } );
  sphere = new THREE.Mesh( geometry, material );
  scene.add( sphere );
  
  defaultCamPos = camera.position.clone();
  defaultCamRot = camera.rotation.clone();
}


function onMouseDown(e) {
	// avoid unexpected triggers
	if(!e) return;
	
  let mousePosition = new THREE.Vector3(0, 0, 0.5);
  mousePosition.x = 2 *...