Add DeviceOrientationControls to StereoEffect example

Questions
#1

Hi

First, I’m new on threejs, sorry. I am trying to add deviceorientation controls to the stereo effect example of the web.

This is my code

<!DOCTYPE html>
<html lang="en">
<head>
  <title>three.js webgl - effects - stereo</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
  <style>
    body {
      background:#777;
      padding:0;
      margin:0;
      font-weight: bold;
      overflow:hidden;
    }

    #info {
      position: absolute;
      top: 0px; width: 100%;
      color: #ffffff;
      padding: 5px;
      font-family:Monospace;
      font-size:13px;
      text-align:center;
      z-index:1000;
    }

    a {
      color: #ffffff;
    }

    #oldie a { color:#da0 }
  </style>
</head>

<body>
<div id="info">
  <a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - effects - stereo. skybox by <a href="http://www.zfight.com/" target="_blank" rel="noopener">Jochum Skoglund</a>
</div>

<script src="js/three.js"></script>
<script src="js/DeviceOrientationControls.js"></script>

<script src="js/StereoEffect.js"></script>

<script src="js/Detector.js"></script>

<script>

  if ( ! Detector.webgl ) Detector.addGetWebGLMessage();

  var container;

  var camera, scene, renderer, effect, controls;

  var mesh, lightMesh, geometry;
  var spheres = [];

  var directionalLight, pointLight;

  var mouseX = 0, mouseY = 0;

  var windowHalfX = window.innerWidth / 2;
  var windowHalfY = window.innerHeight / 2;

  document.addEventListener( 'mousemove', onDocumentMouseMove, false );

  init();
  animate();

  function init() {

    container = document.createElement( 'div' );
    document.body.appendChild( container );

    camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 100000 );
    controls = new THREE.DeviceOrientationControls( camera );
    camera.position.z = 3200;

    scene = new THREE.Scene();
    scene.background = new THREE.CubeTextureLoader()
      .setPath( 'textures/cube/Park3Med/' )
      .load( [ 'px.jpg', 'nx.jpg', 'py.jpg', 'ny.jpg', 'pz.jpg', 'nz.jpg' ] );

    var geometry = new THREE.SphereBufferGeometry( 100, 32, 16 );

    var textureCube = new THREE.CubeTextureLoader()
      .setPath( 'textures/cube/Park3Med/' )
      .load( [ 'px.jpg', 'nx.jpg', 'py.jpg', 'ny.jpg', 'pz.jpg', 'nz.jpg' ] );
    textureCube.mapping = THREE.CubeRefractionMapping;

    var material = new THREE.MeshBasicMaterial( { color: 0xffffff, envMap: textureCube, refractionRatio: 0.95 } );

    for ( var i = 0; i < 500; i ++ ) {

      var mesh = new THREE.Mesh( geometry, material );
      mesh.position.x = Math.random() * 10000 - 5000;
      mesh.position.y = Math.random() * 10000 - 5000;
      mesh.position.z = Math.random() * 10000 - 5000;
      mesh.scale.x = mesh.scale.y = mesh.scale.z = Math.random() * 3 + 1;
      scene.add( mesh );

      spheres.push( mesh );

    }

    //

    renderer = new THREE.WebGLRenderer();
    renderer.setPixelRatio( window.devicePixelRatio );
    renderer.setSize( window.innerWidth, window.innerHeight );
    container.appendChild( renderer.domElement );

    effect = new THREE.StereoEffect( renderer );
    effect.setSize( window.innerWidth, window.innerHeight );

    //

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

  }

  function onWindowResize() {

    windowHalfX = window.innerWidth / 2;
    windowHalfY = window.innerHeight / 2;

    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();

    effect.setSize( window.innerWidth, window.innerHeight );

  }

  function onDocumentMouseMove( event ) {

    mouseX = ( event.clientX - windowHalfX ) * 10;
    mouseY = ( event.clientY - windowHalfY ) * 10;

  }

  //

  function animate() {

    requestAnimationFrame( animate );
    controls.update();

    render();

  }

  function render() {

    var timer = 0.0001 * Date.now();

    camera.position.x += ( mouseX - camera.position.x ) * .05;
    camera.position.y += ( - mouseY - camera.position.y ) * .05;
    camera.lookAt( scene.position );

    for ( var i = 0, il = spheres.length; i < il; i ++ ) {

      var sphere = spheres[ i ];

      sphere.position.x = 5000 * Math.cos( timer + i );
      sphere.position.y = 5000 * Math.sin( timer + i * 1.1 );

    }

    effect.render( scene, camera );

  }

</script>

</body>
</html>

The stereoeffect loads correctly but the scene not moves with the device motion. I have added the particular code of the deviceorientationcontrols example to stereoeffect example

What I am doing wrong?

Thanks

#2

You overwrite the camera transformations performed by DeviceOrientationControls in render(). The following fiddle worked on my Pixel.

https://jsfiddle.net/f2Lommf5/4023/

#3

Thanks, now works fine.

Is it normal that in x axis not rotate correctly over the sphere? On y axis rotate correctly but on x the image sphere not rotates correctly.

Thanks

#4

TBH…i don’t know what you mean, sry. Can you please elaborate a bit?

#5

In this example:
https://threejs.org/examples/webgl_effects_stereo.html

The x axis rotate with the mouse movement to see all houses, on my example with the device motion the x axis not rotate correctly. I cant see the whole sphere

Sorry by my explanation

#6

Um, I guess I can’t reproduce on my Pixel :confused:

#7

You are right, on a LG Nexus 5 it works fine.

What would be the problem?

#8

Sry, i have no idea. Something like this needs debugging…