jQuery addClass example

Change class name on click in jQuery

by jrj2211

HTML

<script src="http://joejankowiak.com/threejs/three.min.js"></script>
<script src="http://joejankowiak.com/threejs/inflate.min.js"></script>
<script src="http://joejankowiak.com/threejs/OrbitControls.js"></script>
<script src="http://joejankowiak.com/threejs/FBXLoader.js"></script>
<div class='info'>
    <div class='stat'><div>Pan</div><div class='rotation_display' id="pan">0</div><div id="pan-increase" class='increase'>+</div><div id="pan-decrease" class='decrease'>-</div></div>
    <div class='stat'><div>Tilt</div><div class='rotation_display' id="tilt">0</div><div id="tilt-increase" class='increase'>+</div><div id="tilt-decrease" class='decrease'>-</div></div>
    <div class='stat'><div>Roll</div><div class='rotation_display' id="roll">0</div><div id="roll-increase" class='increase'>+</div><div id="roll-decrease" class='decrease'>-</div></div>
    <div class='log'><div>Log</div><div class='rotation_display' id="log">0</div></div>
</div>

CSS

html, body {
  margin:0px;
  padding:0px;
  overflow: hidden;
  color:white;
  font-family: arial;

}
canvas {
  background-color:#141825;
  width:100%;
  height:100%;
}

.info {
  position:absolute;
  top:20px;
  left:20px;
  background-color:rgba(0,0,0,.5);
  border-radius:10px;
  padding:10px;
  display:grid;
  grid-template-columns: 1fr;
  grid-row-gap: 10px;
  width:200px;
}

.stat {
  font-size:16px;
  display:grid;
  grid-template-columns: 50px 1fr 20px 20px;
  justify-content: center;
  align-items: center;
}

.rotation_display {
  background-color:rgba(0,0,0,.5);
  border-radius:3px;
  padding:3px 7px;
}

.decrease { background-color:red; text-align:center; }
.increase { background-color:green; text-align:center; }

JavaScript

var container, controls;
var camera, scene, renderer, light;
var rollObj, cube;
var curPan = 0;
var curTilt = 0;

var axis = {pan:0, tilt:0, roll: 0};

clickAndHold("#pan-increase", function() { onAxisUpdate("pan", 1); });
clickAndHold("#pan-decrease", function() { onAxisUpdate("pan", -1); });

clickAndHold("#tilt-increase", function() { onAxisUpdate("tilt", 1); });
clickAndHold("#tilt-decrease", function() { onAxisUpdate("tilt", -1); });

clickAndHold("#roll-increase", function() { onAxisUpdate("roll", 1); });
clickAndHold("#roll-decrease", function() { onAxisUpdate("roll", -1); });

var timeoutId = 0;
function clickAndHold(el, callback) {
  $(el).on('mousedown', function() {
  		callback();
      timeoutId = setTimeout(function() {
      	timeoutId = setInterval(callback, 50);
      }, 500);
  }).on('mouseup mouseleave', function() {
      clearTimeout(timeoutId);
  });
}

function onAxisUpdate(name, increment) {
    axis[name] += increment;
    updateCubeRotation(axis.pan, axis.tilt, axis.roll);
}


init();
animate();

function init() {
	container = document.createElement( 'div' );
	document.body.appendChild( container );

	camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
	camera.position.set( 5, 5, 5 );

	controls = new THREE.OrbitControls( camera );
	controls.target.set( 0, 0, 0 );
	controls.update();

	scene = new THREE.Scene();
	scene.background = new THREE.Color( 0xa0a0a0 );
	scene.fog = new THREE.Fog( 0xa0a0a0, 1 );

	light = new THREE.HemisphereLight( 0xffffff, 0x444444 );
	light.position.set( 0, 200, 0 );
	scene.add( light );

	light = new THREE.DirectionalLight( 0xffffff );
	light.position.set( 0, 200, 100 );
	light.castShadow = true;
	light.shadow.camera.top = 180;
	light.shadow.camera.bottom = - 100;
	light.shadow.camera.left = - 120;
	light.shadow.camera.right = 120;
	scene.add( light );

	var grid = new THREE.GridHelper( 100, 40, 0x000000, 0x000000 );
	grid.material.opacity =...