gezicht op de zuidpool de wereld draait linksom

gezicht op de zuidpool de wereld draait linksom

 

 

 

gezicht op de noordpool de wereld draait rechtsom

gezicht op de noordpool de wereld draait rechtsom

 

 

 

gezicht op Europa, gezellig he al die lichtjes

gezicht op Europa, gezellig he al die lichtjes

 

 

amsterdam

Amsterdam

 

 

 

Wereldbeeld.                              terug naar de inleiding                 ga naar de animatie in fullscreen

De afbeelding van de wereld is een equirectangulare afbeelding gedownload van photopin en omgezet naar 4096 x 2048 px

Door dit soort afbeeldingen als MeshbasicMaterial (line 50) op een sphere te plakken ontstaan 360 graden animaties.

Met muisknoppen, muisbewegingen en muiswiel kan je de animatie in x, y en z richting verplaatsen. (z met het muiswieltje)
De rotatie stoppen door het vinkje, in het controle venster rechts, weg te klikken.
De puntvorm ontstaat door het derde (aantal verticale segmenten ) argument in de constructor van de SphereBufferGeometry op "2"  te zetten (line 47)

en de camera een y postie van 200 geven (line 43).

De argumenten voor een 360 graden animaties zonder vervormingen:
SphereBufferGeometry(1000, 200,200) (line 47) dus grotere sphere met gelijk aantal verticale en horizontale segmenten

De camera positie  veranderen in: camera.postion.set(0,0,200)  (line 43)

Voor het overzicht heb ik alle code in functies gezet, die in init()  (line 12)  worden aangeroepen.
De achtergrond- en equirectangulare afbeeldingen worden geladen met TextureLoader (line 31 en 49)
Om een afbeelding met createExport (line 54) te kunnen downloaden moet in WebGLRenderer een buffer ingeschakeld zijn (line 82)
 
Instellingen bij de header: (line 43)  camera.position.set(-40, -30, 40),  geometry.scale(-1.4, 1, 1)  (line  48)
 
Waarschuwing  kleine veranderingen hebben grote gevolgen voor het wereldbeeld
 
 

let container, camera, scene, renderer, texture, controls; 
let loader, bgTexture, geometry, material, mesh, gui, exporteren, dataURL; 
 
let guiControls = { 
  start_stop_rotatie: true  //true is aangevinkt 
}; 
 
init(); 
play(); 
 
function init() { 
  createScenecontainer(); 
  createBackground(); 
  createCamera(); 
  createEquirect(); 
  createExport(); 
  createControls(); 
  createGui(); 
  createRenderer(); 
  onWindowResize(); 
  window.addEventListener( 'resize', onWindowResize ); 
} 
 
function createScenecontainer(){ 
  container = document.querySelector( '#scene-container' ); 
  scene = new THREE.Scene(); 
} 
 
function createBackground() { 
  loader = new THREE.TextureLoader(); 
  bgTexture = loader.load('./textures/cloud.jpg'); 
  scene.background = bgTexture; 
 } 
 
 function createCamera() { 
   camera = new THREE.PerspectiveCamera( 
   50, // FOV 
   container.clientWidth / container.clientHeight, // aspect ratio 
   1, // near clipping plane 
   8000, // far clipping plane 
 ); 
 camera.position.set( 0, 200, 600 ) 
} 
 
function createEquirect() { 
  geometry = new THREE.SphereBufferGeometry( 250,2000, 2 ); 
  geometry.scale( -1, 1, 1 ); 
  texture = new THREE.TextureLoader().load( 'textures/equirectangular/wereld.jpg' ) 
  material = new THREE.MeshBasicMaterial( {map: texture} ); 
  mesh = new THREE.Mesh( geometry, material ); 
  scene.add( mesh ); 
}
function createExport() { 
  exporteren = document.getElementById( 'exportLink' ); 
  exporteren.addEventListener( 'click', () => { 
    dataURL = renderer.domElement.toDataURL( 'image/png' ); 
    exporteren.href = dataURL; 
    exporteren.download = "wereldbeeld.png"; 
  } ); 
} 
 
//de functie voor de muis en pijltjestoetsen controls 
function createControls() { 
  controls = new THREE.OrbitControls( camera , container); 
  controls.keys =   // De vorm met de pijltoetsen verplaatsen 
       { 
          LEFT: 37,      // pijl naar links 
          UP: 38,        // pijl naar boven 
          RIGHT: 39,     // pijl naar rechts 
          BOTTOM: 40     // pijl naar beneden 
       } 
} 
 
function createGui() { 
  gui = new dat.GUI(); 
  gui.add(guiControls, 'start_stop_rotatie'); 
  gui.open(); 
} 
 
function createRenderer() { 
  renderer = new THREE.WebGLRenderer( { antialas: true, preserveDrawingBuffer: true } ); 
  renderer.setSize( container.clientWidth, container.clientHeight ); 
  renderer.setPixelRatio( window.devicePixelRatio ); 
  container.appendChild( renderer.domElement ); 
} 
 
function onWindowResize() { 
  camera.aspect = container.clientWidth / container.clientHeight; 
  camera.updateProjectionMatrix(); //met updateProjectionMatrix wordt het camera frustum aangepast 
  renderer.setSize( container.clientWidth, container.clientHeight ); 
} 
 
function render() { 
  renderer.render( scene, camera ); 
}
function animate() { 
  if (guiControls.start_stop_rotatie) { 
    scene.rotation.y += 0.004; 
  } 
} 
 
function play() { 
  renderer.setAnimationLoop( () => {animate();render();} ); 
}