OrbitControls & Resize

buttons

by YouTingKuo

HTML

<div id="info">Volley Ball</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r70/three.min.js"></script>
<script src="https://dl.dropboxusercontent.com/u/3587259/Code/Threejs/OrbitControls.js"></script>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>

CSS

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

body {
  overflow: hidden;
}

JavaScript

var scene, renderer, camera;
var controls;
var ballMachine = new THREE.Object3D();
var barrel = new THREE.Object3D();

init();
animate();

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

  camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 1000);
  camera.position.set(0, 0, 3);
  controls = new THREE.OrbitControls(camera, renderer.domElement);

  
  mesh = new THREE.Mesh(new THREE.CylinderGeometry(0.12, 0.12, 1, 32, 32, true), new THREE.MeshBasicMaterial({color:0xff0000, side:THREE.DoubleSide}));
  mesh.position.set(0, 0.5, 0.12);
  barrel.position.set(0, 0.05, 0);
	barrel.add(mesh);
  barrel.rotation.x = -Math.PI/3; 
  ballMachine.add(barrel);
  scene.add(ballMachine);
  
  mesh2 = new THREE.Mesh(new THREE.CylinderGeometry(0.25*Math.sqrt(2), 0.25*Math.sqrt(2), 0.1, 32), new THREE.MeshBasicMaterial());
  ballMachine.add(mesh2);
  mesh3 = new THREE.Mesh(new THREE.CylinderGeometry(0.25, 0.25, 0.1, 32, 1, false, 0, Math.PI), new THREE.MeshBasicMaterial({color:0x000000, side:THREE.DoubleSide}));
  mesh3.rotation.z = Math.PI/2;
  mesh4 = mesh3.clone();
  mesh3.position.set(0.2,0.05,0);
  mesh4.position.set(-0.2, 0.05, 0);
  ballMachine.add(mesh3);
  ballMachine.add(mesh4);
  
  var b = new THREE.Mesh(new THREE.SphereGeometry(0.105, 32, 32), new THREE.MeshBasicMaterial({color:0x0000ff}));
  b.position.set(0, 0.155, 0.12);
  scene.add(b);
  
  window.addEventListener('resize', onWindowResize, false);
}

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

function animate() {
  controls.update();
	

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