cardboard

cardboard

 

strand

strand

 

 

wereld

wereld

 

 

fractal 1

fractal 1

virtual reality met cardboard .                         terug naar de inleiding

werkwijze: klik in je smartphone op een van onderstaande knopjes, probeer, met een veeg naar boven, het beeld groter te maken,
stop de smartphone in de cardboard, zet em op je kop en draai 360 graden met je hoofd.
 

cardboard animaties:    "strand"          "wereld"         "fractal 1"              "fractal 2"

cardboard animaties:    "slingers"       "boven de wolken"        "es"         "typhoon"

cardboard animaties:    "Taiwan"         "in de wolken"        "texture"        "huisje"

Op mijn smartphone werken  de animaties alleen in de  Google Chrome browser
Als je in een computer op "strand" klik dan zie je alleen het zand van het strand dit omdat een computer geen bewegingsensoren heeft.
De schets wordt via de module "DeviceOrientationControls" (regel 46) door de smartphone sensoren aangestuurd.
controls.update(); (regel 87) geeft, in de animatielus, de toestand van de bewegingsensoren aan "DeviceOrientationControls.

Uitschakelen van "CreateControls(); (regel 25) en controls.update(); (regel 78) toon de afbeelding van de animatie.

De afbeeldingen zijn equirectangulare afbeeldingen
Ze zijn als MeshBasicMaterial gemapt (regel 59) en op een SphereBufferGeometry geplakt (regel 55). Het samevoegen gebeurt in regel 59.
 

 


<!DOCTYPE html>
<html lang="en">
<head>
<title>three.js vr met cardboard</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<link type="text/css" rel="stylesheet" href="./styles/main.css">
</head>
 
<body>
<script type="module">
import * as THREE from './build/three.module.js';
import { DeviceOrientationControls } from './examples/jsm/controls/DeviceOrientationControls.js';
 
let camera, scene, container, renderer, controls, mesh;
let textureLoader, textureEquirec, equirectGeom, equirectMat;
 
  init();
  play();
 
  function init() {
    createScenecontainer();
    createCamera();
    createControls();
    createLoadTexture();
    createVRScene();
    createRenderer();
}
 
   function createScenecontainer(){
      container = document.querySelector( '#scene-container' );
      scene = new THREE.Scene();
}
 
   function createCamera() {
     const FOV = 75;   //field of view
     const aspectRatio = (window.innerWidth / window.innerHeight);
     const NCP = 1;    //near clipping plane
     const FCP = 1100; //far clipping plane
     camera = new THREE.PerspectiveCamera( FOV, aspectRatio, NCP, FCP );
}
 
  function createControls()  {
     controls = new DeviceOrientationControls( camera );
}
 
   function createLoadTexture(){
      textureLoader = new THREE.TextureLoader();
      textureEquirec = textureLoader.load( 'textures/equirectangular/strand.jpg' );
      textureEquirec.mapping = THREE.EquirectangularReflectionMapping;
}
 
  function createVRScene() {
     equirectGeom = new THREE.SphereBufferGeometry( 500, 60, 40 );
 //Het schalen van de geometry in x, y en z richting
    equirectGeom.scale( - 1, 1, 1 );
    equirectMat = new THREE.MeshBasicMaterial( {map: textureEquirec} );
    mesh = new THREE.Mesh( equirectGeom, equirectMat );
    scene.add( mesh );
}
 
  function createRenderer() {
    renderer = new THREE.WebGLRenderer( { antialias: true } );
    renderer.setPixelRatio( window.devicePixelRatio );
    renderer.setSize( window.innerWidth, window.innerHeight );
    document.body.appendChild( renderer.domElement );
    window.addEventListener( 'resize', onWindowResize );
}
 
  function onWindowResize() {
     camera.aspect = window.innerWidth / window.innerHeight;
     camera.updateProjectionMatrix();
     renderer.setSize( window.innerWidth, window.innerHeight );
}
 
  function animate() {
    controls.update();
   renderer.render( scene, camera );
}
 
  function play() {
     renderer.setAnimationLoop( () => { animate();} );
}

     </script>
  </body>
</html>