With Renderhooks, you can import three.js and use it as a rendering API the same way you would use it when targeting WebGL in a browser. The difference is that with Renderhooks you'll get native level performance, without any of the overhead that's associated with a full browser environment.

Getting started is easy, all you need to do is create a new project, build it, and then install it onto your phone.

Below is an annotated code sample

//
// Spinning cube using three.js
//
//
// With three.js you can also preview your project inside of a browser window,
// but to do so we need to differentiate between when the code is running in
// the browser and when it's running on the device, so this is why we create a
// vrMode variable
//
var vrMode = (typeof renderhooks === 'object');
//
// No surprise here, we import three.js. Then we create a scene, camera, and renderer,
// just like we would for any regular three.js project
//
if (typeof THREE === 'undefined') { var THREE = require('three'); }
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 90, window.innerWidth / window.innerHeight,
0.1, 1000 );
var renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize( window.innerWidth, window.innerHeight );
//
// Now we'll start setting up our scene, starting with a light source
//
var light = new THREE.DirectionalLight( 0xffffff );
light.position.set( 1, 1, 1 ).normalize();
//
// Now we'll create a cube, and since we have a light, we may as well use a
// Lambert material to make the cube react to the lighting
//
var geometry = new THREE.BoxGeometry( 1, 1, 1 );
var mtl = new THREE.MeshLambertMaterial( { color: 0xb73b34 } );
var cube = new THREE.Mesh( geometry, mtl );
//
// Finally we add our light and cube to the scene, and then position our
// cube and camera. Our scene is setup!
//
scene.add( light );
scene.add( cube );
cube.position.z = -3;
camera.position.z = 0;
//
// Using three.js conventions we have an animate and a render function
//
// Animate gets called once per frame and this is where you want to update your
// scene. In this case, it's where we want to animate our cube
//
// When we're in VR mode (on a device), render gets called twice per frame. When
// running on a device, render also gets passed a vrInput object which contains
// device information (i.e. a quaternion representing the orientation of the
// user's head)
//
function animate(frame) {
cube.rotation.x += 0.025;
cube.rotation.y += 0.025;
if (vrMode) camera.quaternion.copy( frame.orientation );
}
function render(renderTime, vrInput) {
requestAnimationFrame( render );
// Only animate the cube once per-frame since
// this fires twice per-frame (once per-eye)
if (typeof(vrInput) !== 'object' || vrInput.eye === 0) {
animate(vrInput);
}
renderer.render(scene, camera);
}
//
// When we're in a browser environment, we add our renderer to the page. When
// this Javascript is running on a device, there is no browser, and the OpenGL
// context is already setup and bound to the device's window, so we don't need
// to do this step
//
if (!vrMode) {
// Add element to page in non-VR mode
var container = document.createElement( 'div' );
document.body.appendChild( container );
container.appendChild( renderer.domElement );
}
render();