Rokkido/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>

<style id="jsbin-css">
body, html{
  margin: 0;
  padding: 0;
}
</style>
</head>
<body>

  <canvas id="canvas"></canvas>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/100/three.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.6.5/dat.gui.js"></script>

  <script id="jsbin-javascript">
window.onload = function(){

  console.clear();

  var width  = window.innerWidth;
  var height = window.innerHeight;

  var canvas = document.querySelector('#canvas');

  canvas.width = width;
  canvas.height = height;

  var ball = {
    rotationY: 0,
    rotationX: 0
  };

  var gui = new dat.GUI();
  gui.add(ball, 'rotationY').min(-0.2).max(0.2).step(0.001);
  gui.add(ball, 'rotationX').min(-0.2).max(0.2).step(0.001);

  var renderer = new THREE.WebGLRenderer({canvas: canvas});
  renderer.setClearColor(0x000000);

  var scene = new THREE.Scene();

  var camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 5000);
  camera.position.set(0, 0, 1000);

  var light = new THREE.AmbientLight(0xffffff);
  scene.add(light);

  var geometry = new THREE.SphereGeometry(200, 12, 12);
  var material = new THREE.MeshBasicMaterial({color: 0xffffff, vertexColors: THREE.FaceColors});

  for(var i = 0; i < geometry.faces.length; i++){
    geometry.faces[i].color.setRGB(Math.random(), Math.random(), Math.random());
  }

  var mesh = new THREE.Mesh(geometry, material);
  scene.add(mesh);


  function loop() {

    mesh.rotation.y += ball.rotationY;
    mesh.rotation.x += ball.rotationX;

    renderer.render(scene, camera);

    requestAnimationFrame(function(){
      loop();
    });
  }

  loop();

}
</script>


<script id="jsbin-source-css" type="text/css">body, html{
  margin: 0;
  padding: 0;
}</script>

<script id="jsbin-source-javascript" type="text/javascript">window.onload = function(){

  console.clear();

  var width  = window.innerWidth;
  var height = window.innerHeight;

  var canvas = document.querySelector('#canvas');

  canvas.width = width;
  canvas.height = height;

  var ball = {
    rotationY: 0,
    rotationX: 0
  };

  var gui = new dat.GUI();
  gui.add(ball, 'rotationY').min(-0.2).max(0.2).step(0.001);
  gui.add(ball, 'rotationX').min(-0.2).max(0.2).step(0.001);

  var renderer = new THREE.WebGLRenderer({canvas: canvas});
  renderer.setClearColor(0x000000);

  var scene = new THREE.Scene();

  var camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 5000);
  camera.position.set(0, 0, 1000);

  var light = new THREE.AmbientLight(0xffffff);
  scene.add(light);

  var geometry = new THREE.SphereGeometry(200, 12, 12);
  var material = new THREE.MeshBasicMaterial({color: 0xffffff, vertexColors: THREE.FaceColors});

  for(var i = 0; i < geometry.faces.length; i++){
    geometry.faces[i].color.setRGB(Math.random(), Math.random(), Math.random());
  }

  var mesh = new THREE.Mesh(geometry, material);
  scene.add(mesh);


  function loop() {

    mesh.rotation.y += ball.rotationY;
    mesh.rotation.x += ball.rotationX;

    renderer.render(scene, camera);

    requestAnimationFrame(function(){
      loop();
    });
  }

  loop();

}</script></body>
</html>

## jsbin.untitled.css
body, html{
  margin: 0;
  padding: 0;
}

## jsbin.untitled.js
window.onload = function(){

  console.clear();

  var width  = window.innerWidth;
  var height = window.innerHeight;

  var canvas = document.querySelector('#canvas');

  canvas.width = width;
  canvas.height = height;

  var ball = {
    rotationY: 0,
    rotationX: 0
  };

  var gui = new dat.GUI();
  gui.add(ball, 'rotationY').min(-0.2).max(0.2).step(0.001);
  gui.add(ball, 'rotationX').min(-0.2).max(0.2).step(0.001);

  var renderer = new THREE.WebGLRenderer({canvas: canvas});
  renderer.setClearColor(0x000000);

  var scene = new THREE.Scene();

  var camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 5000);
  camera.position.set(0, 0, 1000);

  var light = new THREE.AmbientLight(0xffffff);
  scene.add(light);

  var geometry = new THREE.SphereGeometry(200, 12, 12);
  var material = new THREE.MeshBasicMaterial({color: 0xffffff, vertexColors: THREE.FaceColors});

  for(var i = 0; i < geometry.faces.length; i++){
    geometry.faces[i].color.setRGB(Math.random(), Math.random(), Math.random());
  }

  var mesh = new THREE.Mesh(geometry, material);
  scene.add(mesh);


  function loop() {

    mesh.rotation.y += ball.rotationY;
    mesh.rotation.x += ball.rotationX;

    renderer.render(scene, camera);

    requestAnimationFrame(function(){
      loop();
    });
  }

  loop();

}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>JS Bin</title>

	<style id="jsbin-css">
	body, html{
	margin: 0;
	padding: 0;
	}
	</style>
	</head>
	<body>

	<canvas id="canvas"></canvas>

	<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/100/three.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.6.5/dat.gui.js"></script>

	<script id="jsbin-javascript">
	window.onload = function(){

	console.clear();

	var width = window.innerWidth;
	var height = window.innerHeight;

	var canvas = document.querySelector('#canvas');

	canvas.width = width;
	canvas.height = height;

	var ball = {
	rotationY: 0,
	rotationX: 0
	};

	var gui = new dat.GUI();
	gui.add(ball, 'rotationY').min(-0.2).max(0.2).step(0.001);
	gui.add(ball, 'rotationX').min(-0.2).max(0.2).step(0.001);

	var renderer = new THREE.WebGLRenderer({canvas: canvas});
	renderer.setClearColor(0x000000);

	var scene = new THREE.Scene();

	var camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 5000);
	camera.position.set(0, 0, 1000);

	var light = new THREE.AmbientLight(0xffffff);
	scene.add(light);

	var geometry = new THREE.SphereGeometry(200, 12, 12);
	var material = new THREE.MeshBasicMaterial({color: 0xffffff, vertexColors: THREE.FaceColors});

	for(var i = 0; i < geometry.faces.length; i++){
	geometry.faces[i].color.setRGB(Math.random(), Math.random(), Math.random());
	}

	var mesh = new THREE.Mesh(geometry, material);
	scene.add(mesh);


	function loop() {

	mesh.rotation.y += ball.rotationY;
	mesh.rotation.x += ball.rotationX;

	renderer.render(scene, camera);

	requestAnimationFrame(function(){
	loop();
	});
	}

	loop();

	}
	</script>


	<script id="jsbin-source-css" type="text/css">body, html{
	margin: 0;
	padding: 0;
	}</script>

	<script id="jsbin-source-javascript" type="text/javascript">window.onload = function(){

	console.clear();

	var width = window.innerWidth;
	var height = window.innerHeight;

	var canvas = document.querySelector('#canvas');

	canvas.width = width;
	canvas.height = height;

	var ball = {
	rotationY: 0,
	rotationX: 0
	};

	var gui = new dat.GUI();
	gui.add(ball, 'rotationY').min(-0.2).max(0.2).step(0.001);
	gui.add(ball, 'rotationX').min(-0.2).max(0.2).step(0.001);

	var renderer = new THREE.WebGLRenderer({canvas: canvas});
	renderer.setClearColor(0x000000);

	var scene = new THREE.Scene();

	var camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 5000);
	camera.position.set(0, 0, 1000);

	var light = new THREE.AmbientLight(0xffffff);
	scene.add(light);

	var geometry = new THREE.SphereGeometry(200, 12, 12);
	var material = new THREE.MeshBasicMaterial({color: 0xffffff, vertexColors: THREE.FaceColors});

	for(var i = 0; i < geometry.faces.length; i++){
	geometry.faces[i].color.setRGB(Math.random(), Math.random(), Math.random());
	}

	var mesh = new THREE.Mesh(geometry, material);
	scene.add(mesh);


	function loop() {

	mesh.rotation.y += ball.rotationY;
	mesh.rotation.x += ball.rotationX;

	renderer.render(scene, camera);

	requestAnimationFrame(function(){
	loop();
	});
	}

	loop();

	}</script></body>
	</html>