Search code examples
javascriptthree.jsoculuswebvr

ThreeJS: Using a Sprite with the OculusRiftEffect

I'm developing for the OculusRift using the OculusRiftEffect from https://github.com/mrdoob/three.js/blob/master/examples/js/effects/OculusRiftEffect.js and am using Sprites. The problem is the sprites don't appear in the correct position in each eye as in the screenshot.screenshot You can see the house sprite is in different positions in each eye and causes a 'double vision' effect in the oculus. While playing around with the code (have a demo plunker here) you can notice that near the edges of the screen the positioning is more accurate but I need it nearer the center of the screen where the positioning is off. I assume this has something to do with the shading/rendering in OculusRiftEffect but don't know enough about it to break it down, any direction would be appreciated, thanks!

Sample code:

var _scene, _camera, _renderer, _effect, _sprite;

function init() {
  _scene = new THREE.Scene();
  _camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, .1, 100000);
  _camera.lookAt(new THREE.Vector3());
  _renderer = new THREE.WebGLRenderer({
        antialias: true,
      canvas: document.getElementById('legit')
    });

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

  _effect = new THREE.OculusRiftEffect(_renderer, {
    worldScale: 1000
  });
  _effect.setSize(window.innerWidth, window.innerHeight);

  THREE.ImageUtils.crossOrigin = 'anonymous';

  _sprite = new THREE.Sprite(
    new THREE.SpriteMaterial({
        map: new THREE.Texture(document.getElementById('icon')),
        color: 0xff0000
    })
  );

  _sprite.scale.set(200, 200, 1);
  _sprite.position.set(500, 800, 1);
  _scene.add(_sprite);

  _scene.add(new THREE.Mesh(
    new THREE.SphereGeometry(3000, 64, 32),
    new THREE.MeshBasicMaterial({
      color: 0xffffff,
      wireframe: true,
      side: THREE.DoubleSide
    })
  ));

  animate();
}

function animate() {
  requestAnimationFrame(animate);
  render();
}

function render() {
    _renderer.render(_scene, _camera);
    _effect.render(_scene, _camera);
}

document.addEventListener('DOMContentLoaded', init);
Solution

  • As pailhead and Jherico mentioned this is not possible with the Oculus plugin. A workaround I found effective is to simply use a PlaneGeometry and set it as a child of the camera. Set it to look at the camera's position and it will act just like a sprite and render correctly for the OculusRiftEffect. Basic example (assuming camera and scene):

    var sprite = new THREE.Mesh(
    new THREE.PlaneGeometry(100, 100),
    new THREE.MeshBasicMaterial({color: 0xffffff})
);
//assuming camera is at (0,0,0) we need to offset it
sprite.position.set(20, 20, -100);
sprite.lookAt(camera.position);

camera.add(sprite);

//normally camera doesnt need to be added
//but if it has child meshes it is necessary
scene.add(camera);

    Since the plane is a child of the camera once its offset is positioned correctly it will follow the camera wherever it goes. The caveat is that it won't function exactly the same as a Sprite in that you can't move it independently around the scene but it's the closest solution I've found.