2D template

with orbitControls, XZgrid, info

by k6e2n0t12

HTML

<div id="info">Volleyball Study
</div>
<script src="http://cdnjs.cloudflare.com/ajax/libs/three.js/r70/three.min.js"></script>

CSS

#info {
  position: absolute;
  top: 0px;
  width: 100%;
  padding: 10px;
  text-align: center;
  color: #ffff00
}

body {
  overflow: hidden;
}

JavaScript

var camera, scene, renderer;
var mouse = new THREE.Vector2();
var clock = new THREE.Clock();

var ballCenter, ballMesh, ball,player;
//var playerCenter;

var Ball = function () {
	this.angle = 0;
  this.startTime = 0;
  this.isOn = false;

	this.start = function () {
  	this.startTime = clock.getElapsedTime();
    this.isOn = true;
  };
  
  this.update = function() {
  		if (this.isOn === false) return;
      
  		var now = clock.getElapsedTime();
		  this.angle = (now - this.startTime)*2;
      if (this.angle > Math.PI*4)
      	this.isOn = false;
  };
}

var Player = function () {
	this.angle = Math.PI/4;
  this.startTime = 0;
  this.isOn = false;
  this.isResting = false;

	this.start = function () {
  	this.startTime = clock.getElapsedTime();
    this.isOn = true;
  };
  
  this.update = function() {
  		if (this.isOn === false) return;
      
  		var now = clock.getElapsedTime();
      if(this.isResting===false)
		  	this.angle = Math.PI/4+ (now - this.startTime)*2;
      else
      	this.angle = Math.PI- (now - this.startTime)*2;
      
      if (this.angle > Math.PI/2 && ball.isOn === false){
      	ball.start();
        console.log(this.angle);
      }
      if (this.angle > Math.PI){
      
      	console.log(this.angle);
      	this.startTime = clock.getElapsedTime();
      	this.isResting = true;
      }
      if(this.isResting === true && this.angle < Math.PI/4){
      	this.isResting = false;
      	this.isOn = false;
      }
  };
}


init();
animate();

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

  scene = new THREE.Scene();
  camera = new THREE.OrthographicCamera(-50, 50, 50, -50, -10, 100);
  camera.position.z = 10;
  scene.add(camera);

  ////////////////////////////////////////////////////////////////////////////////////////////
	ball = new Ball();
 ...