wereldbeeld

Wereldbeeld. terug naar de inleiding naar de animatie in fullscreen

Een animatie met de standaardvormen: SphereGeometry. Het material is: MeshBasicMaterial

De afbeelding van de wereld is een equirectangulare afbeelding die in de functie createEquirect (regel 74) wordt geladen en geplakt op de MeshBasicMaterial

Door de equirectangulaire afbeelding als MeshBasicMaterial op de Sphere te plakken ontstaan 360 graden animaties.

De material en Sphere zijn classes van de three.module.js lib

Alle libs zijn javaScript ES6 modules. Dit zijn scripts opgebouwd uit modules wat een forse verbetering van de codeer stijl betekend.

addon libs

De muis en pijltjestoets bewegingen worden gerealiseerd met de addon lib OrbitControls, zie de functie createControl (regel 85)

De GUI (grafische user interface) wordt gerealiseerd met de addon lib lil-gui-module.min.js zie de functie createGUI (regel 90)

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.

Door met het muiswiel uit te zoomen verschijnt een puntvorm dit door het derde (aantal verticale segmenten ) argument in de constructor van

de SphereGeometry op "2" te zetten (regel 75)

Voor het overzicht heb ik alle code in functies gezet, die in function init() (line 32) worden aangeroepen.

De achtergrond- en equirectangulare afbeeldingen worden geladen met TextureLoader (regel 51 en 77)

 

<html>
  <head>
    <title>wereldbeeld</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="UTF-8" />
    <style> body { margin: 0;} </style>
  </head>
 
  <body>
    <script type="importmap">
        {
          "imports": {
            "three": "../build/three.module.js",
          "three/addons/": "../jsm/"
        }
      }
    </script>
 
  <script type="module">
      import * as THREE from 'three';
      import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
      import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
 
      let camera, scene, renderer, controls;
      let start_stop_rotatie , wolken_achtergrond;
       //data tbv de GUI control
      const data = {wolken_achtergrond: true, start_stop_rotatie: true};
 
      init();
      play();
      function init() {
        scene = new THREE.Scene();
        THREE.ColorManagement.enabled = true;
        window.addEventListener( 'resize', onWindowResize );
        createBackground();
        createCamera();
        createRenderer();
        createEquirect();
        createControls();
        createGui();
        onWindowResize();
    }
 
    function createBackground() {
          if (wolken_achtergrond==false)
       {const bgColor = new THREE.Color( 0xE6FBFF );
        scene.background = bgColor;
        wolken_achtergrond = true;}
          else
        {const loader = new THREE.TextureLoader();
        const bgTexture = loader.load('../textures/cloud.jpg');
        scene.background = bgTexture;
        wolken_achtergrond = false;}
    }
 
      function createCamera() {
         camera = new THREE.PerspectiveCamera(
         50, // FOV
         window.innerWidth /window.innerHeight, // aspect ratio
         1, // near clipping plane
         8000, // far clipping plane
      );
        camera.position.set( 0, -50, 150 )
    }
 
     function createRenderer() {
       renderer = new THREE.WebGLRenderer( { antialas: true } );
       renderer.setSize( window.innerWidth, window.innerHeight );
       renderer.setPixelRatio( window.devicePixelRatio );
       document.body.appendChild( renderer.domElement );
   }
 
     function createEquirect() {
       const geometry = new THREE.SphereGeometry( 250,2000, 2 );
       geometry.scale( -1, 1, 1 );
       const texture = new THREE.TextureLoader().load( '../textures/wereld.jpg' );
       texture.colorSpace = THREE.SRGBColorSpace;
       const material = new THREE.MeshBasicMaterial( {map: texture} );
       const mesh = new THREE.Mesh( geometry, material );
       scene.add( mesh );
    }
 
            //de functie voor de muis en pijltjestoetsen controls
     function createControls() {
       const controls = new OrbitControls( camera , renderer.domElement);
       controls.listenToKeyEvents( window );
    }
 
      function createGui() {
        const gui = new GUI({width: 150});
        gui.add(data,'start_stop_rotatie');
        gui.add(data, 'wolken_achtergrond').onChange(createBackground);
        gui.open();
    }
 
      function onWindowResize() {
        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix(); //met updateProjectionMatrix wordt het camera frustum aangepast
        renderer.setSize( window.innerWidth, window.innerHeight );
    }
 
      function render() {
         renderer.render( scene, camera );
    }
 
      function animate() {
        if (data.start_stop_rotatie) {
            scene.rotation.y += 0.004;
        }
    }
 
      function play() {
          renderer.setAnimationLoop( () => {animate();render();} );
    }
      </script>
  </body>
</html>

Flevopink