RiftThree

Some code samples that make it easier to use Oculus Rift with Three.js. Makes use of:

• OculusRiftEffect.js from https://github.com/troffmo5/OculusStreetView
• vr.js from https://github.com/benvanik/vr.js

Basic Usage

You need a working three.js project fullfilling these requirements

• vr.js plugin is installed (used for head-tracking)
• three.js rev >= 59
• WebGL renderer instance is accesible from global namespace

Append this to your body

<script src="//rawgithub.com/carstenschwede/RiftThree/master/lib/RiftThree.js"></script>
<script>
	window.RiftThree();
</script>

or use this bookmarklet

that also works on http://threejs.org/examples! (Examples that change camera orientation might mess with head tracking)

Head Tracking

You need to have vr.js installed in order to use head tracking.

• Use h to enable/disable head tracking.
• Use r to reset head tracking.

Advanced Usage

var options = {
	useHeadTracking:			boolean,
	geometriesWith3DTextures:	[THREE.Geometry,...],		//3D Texture Support, see below
	preLeft:					[function, ...],			//Will be executed before rendering left eye
	preRight:					[function, ...],			//Will be executed before rendering right eye
	scale:						float,						//Reduce Oculus FOV to increase size, caution
	emptyColor:					argument to THREE.Color		//Background color, defaults to HTML background
}

window.RiftThree([renderer[, options]]);

3D Texture Support

You can use the following types of stereoscopic images or videos:

• Side-by-Side/Top-and-Bottom
• Depth maps
• Side-by-Side + Depth map
• Panorama

Issues

• Why is switching UV mapping set faster than switching texcoords in shader?
• Supported media limited to browsers HTML5 audio/video support
• Only tested in Chrome
• Documentation...