Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Phonegap 3D compass
#main {
margin: 0px;
width: 480px;
height: 300px;
}
document.ontouchmove = function(e){ e.preventDefault(); }
/**
* Provides requestAnimationFrame in a cross browser way.
* http://paulirish.com/2011/requestanimationframe-for-smart-animating/
*/
if ( !window.requestAnimationFrame ) {
window.requestAnimationFrame = ( function() {
return window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function( /* function FrameRequestCallback */ callback, /* DOMElement Element */ element ) {
window.setTimeout( callback, 1000 / 60 );
};
} )();
}
$(function(){
var camera, scene, renderer, target;
init();
animate();
function init() {
scene = new THREE.Scene();
var lightpos = [{x:0,z:0,y:200},{x:0,z:200,y:0}]
for( var i = 0; i < lightpos.length; i++ ) {
var pointLight = new THREE.PointLight( 0xFFFFFF, 0.8 );
pointLight.position = lightpos[i]
scene.addLight(pointLight);
}
buildscene(scene)
target = new THREE.Object3D()
target.position = {x:0,y:10,z:-100}
camera = new THREE.Camera( 75, 480/300, 1, 10000, target );
camera.position.z = 0;
camera.position.y = 20;
renderer = new THREE.CanvasRenderer();
//renderer = new THREE.WebGLRenderer();
renderer.setSize( 480, 300 )
$('#main').append( renderer.domElement );
}
function buildscene(scene) {
var geometry, material, mesh, size=10, target, num=2
for( var xI = -1*num; xI <= num; xI++ ) {
var xd = (2*xI*size)
for( var zI = -1*num; zI <= num; zI++ ) {
var zd = (2*zI*size)
var cb = (xI+num+1)*(zI+num+1)*(256/(num*num))
var color = 0x33ff33 * cb //((cb/2)*0x10000) + (cb*0x100) + (cb/2)
material = new THREE.MeshLambertMaterial( { color: color, shading: THREE.FlatShading, wireframe: false } );
//material = new THREE.MeshBasicMaterial( { color: 0xff0000, shading: THREE.FlatShading, wireframe: true } );
geometry = new THREE.Cube( size, size/3, size );
mesh = new THREE.Mesh( geometry, material );
mesh.position.x = xd
mesh.position.z = zd
scene.addObject( mesh );
}
}
}
function animate() {
requestAnimationFrame( animate );
render();
}
var t = 0;
function render() {
//mesh.rotation.x += 0.001;
//mesh.rotation.y += 0.002;
t = (t+(Math.PI/180))
target.position.x = 100 * Math.cos(t)
target.position.z = 100 * Math.sin(t)
renderer.render( scene, camera );
}
})
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="user-scalable=no,initial-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes">
<link rel="stylesheet" href="augment.css" />
<script src="jquery.js"></script>
<script src="three.js"></script>
<script src="augment.js"></script>
</head>
<body style="margin:0px;padding:0px">
<div id="main"></div>
</body>
</html>
<!-- you'll need:
PhoneGap
jQuery
https://github.com/mrdoob/three.js/
-->
@andrewtek

This comment has been minimized.

Copy link

commented Aug 6, 2011

Hi Robert,

This looks cool, but where is the tie-in with the compass and accelerometer?

Also, Three.JS updated their library so that "Three.Cube" no longer works... but "Three.CubeGeometry" does.

Thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.