baseball runner

Euler or Quaternion

by Alvin Chen

HTML

<div id="info">
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r78/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.5.1/dat.gui.min.js"></script>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>

CSS

body {
	  background-color: #fff;
	  color: #111;
	  margin: 0px;
	  overflow: hidden;
	  font-family: Monospace;
	  font-size: 20px;
	}
	
	#info {
	  position: absolute;
	  top: 350px;
	  width: 100%;
	  padding:0px;
	  text-align: center;
	  color: #ffff00
	}
	
	a {
	  color: #00ffff
	}
	
	strong {
	  color: red
	}
	
	#container {
	  z-index: 0;
	  left: 0px;
	  top: 0px;
	  overflow: hidden;
	  position: absolute;
	  width: 100%;
	  height: 100%;
	}
#gui {
    position: absolute;
    top: 10px;
    right: 10px;
    //height: 350px;
}

JavaScript

var scene, renderer, camera;
var controls;



/////////////////////////////////////////////////////

init();
animate();


function init() {
	THREE.ImageUtils.crossOrigin = '';
var width = window.innerWidth;
  var height = window.innerHeight;

  renderer = new THREE.WebGLRenderer({
    antialias: true
  });
  renderer.setSize(width, height);
  renderer.setClearColor(0x888888);

  document.body.appendChild(renderer.domElement);

  scene = new THREE.Scene();
	
  light = new THREE.PointLight(0xffffff);
  light.position.set(0, 100, 0);
  scene.add(light);
  light = new THREE.PointLight(0xffffff);
  light.position.set(0, -100, 0);
  scene.add(light);
  light = new THREE.PointLight(0xffffff);
  light.position.set(-100, 0, 0);
  scene.add(light);
  light = new THREE.PointLight(0xffffff);
  light.position.set(100, 0, 0);
  scene.add(light);
   light = new THREE.PointLight(0xffffff);
  light.position.set(0, 0, 100);
  scene.add(light);
  light = new THREE.PointLight(0xffffff);
  light.position.set(0, 0, -100);
  scene.add(light);

  
  camera = new THREE.PerspectiveCamera(40, width / height, 0.1, 10000);
  camera.position.y = 160;
  camera.position.z = -400;
  camera.lookAt(new THREE.Vector3(0, 0, 0));
  scene.add(camera);
  
   
   baseball = new THREE.Mesh(new THREE.SphereGeometry(10, 32, 32), new THREE.MeshLambertMaterial({
    side: THREE.DoubleSide,
    map: THREE.ImageUtils.loadTexture('https://i.imgur.com/ddu5eh4.jpg')
  }));
  scene.add(baseball);

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

 

	window.addEventListener('resize', onWindowResize, false);
  /////////////////////////////////////////////////// 
}


function animate() {
  requestAnimationFrame(animate);
  update();
  render();
}

function update() {
  controls.update();
 
}

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