non-slip wheel

prototype for segway

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/three.js/r69/three.min.js"></script>
<script src="https://dl.dropboxusercontent.com/u/3587259/Code/Threejs/OrbitControls.js"></script>

JavaScript

var scene, renderer, camera, tire, controls, clock;
var sign = 1;

init();
animate();

function init()
{
	scene = new THREE.Scene();
    clock = new THREE.Clock();
    
	var cubeGeometry = new THREE.CylinderGeometry (10,10,3);
	var cubeMaterial = new THREE.MeshLambertMaterial ({color: 0x1ec876});
	tire = new THREE.Mesh (cubeGeometry, cubeMaterial);

    tire.rotation.order = 'ZYX';
    tire.rotation.z = Math.PI/2;
    tire.position.set (0,10,0);

    scene.add (tire);

	renderer = new THREE.WebGLRenderer( {antialias:true} );
    var width = window.innerWidth;
    var height = window.innerHeight;
	renderer.setSize (width, height);
    renderer.setClearColor (0x888888);
	document.body.appendChild (renderer.domElement);

    camera = new THREE.PerspectiveCamera (45, width/height, 1, 1000);
	camera.position.y = 80;
	camera.position.z = 200;
	camera.lookAt (new THREE.Vector3(0,0,0));

    controls = new THREE.OrbitControls(camera, renderer.domElement);

    var gridXZ = new THREE.GridHelper(100, 10);
	gridXZ.setColors( new THREE.Color(0xff0000), new THREE.Color(0xffffff) );
	scene.add(gridXZ);

	var pointLight = new THREE.PointLight (0xffffff);
	pointLight.position.set (100,300,200);
	scene.add (pointLight);
	
	window.addEventListener ('resize', onWindowResize, false);
}

function onWindowResize ()
{
	camera.aspect = window.innerWidth / window.innerHeight;
	camera.updateProjectionMatrix();
	renderer.setSize (window.innerWidth, window.innerHeight);
}


function animate()
{
    var dt = clock.getDelta();
    var vel = 10;
    
    if (tire.position.z > 50 || tire.position.z < -50) sign *= -1;
    tire.position.z += sign*vel*dt;
    tire.rotation.y -= vel*dt/10*sign;
    

    requestAnimationFrame ( animate );  
	renderer.render (scene, camera);
}