donmccurdy/slowmouse-controls.html

## slowmouse-controls.html
<html>
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no,user-scalable=no,maximum-scale=1">
    <title>Examples • Slow Mouse</title>
    <script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script>
    <script src="https://cdn.rawgit.com/donmccurdy/aframe-extras/v3.3.0/dist/aframe-extras.min.js"></script>
    <script>
AFRAME.registerComponent('slowmouse-controls', {
  init: function () {
    this.viewWidth = 0;
    this.viewHeight = 0;
    this.lookVector = new THREE.Vector2();
    this.onMouseMove = this.onMouseMove.bind(this);
  },
  play: function () {
    var canvasEl = this.el.sceneEl.canvas;
    canvasEl.addEventListener('mousemove', this.onMouseMove, false);
    this.viewWidth = canvasEl.clientWidth;
    this.viewHeight = canvasEl.clientHeight;
  },
  pause: function () {
    var canvasEl = this.el.sceneEl.canvas;
    canvasEl.removeEventListener('mousemove', this.onMouseMove, false);
    this.lookVector.set(0, 0);
  },
  onMouseMove: function (event) {
    this.lookVector.x = event.clientX / this.viewWidth  - 0.5;
    this.lookVector.y = event.clientY / this.viewHeight - 0.5;
  },
  isRotationActive: function () {
    return this.lookVector.lengthSq() > 0.05;
  },
  getRotationDelta: function () {
    var SENSITIVITY = 1 / 10;
    var rotationDelta = this.lookVector.clone().multiplyScalar(SENSITIVITY);
    return rotationDelta;
  }
});
    </script>
  </head>
  <body>
    <a-scene>
      <!-- Player -->
      <a-entity camera
                universal-controls="rotationControls: hmd, gamepad, slowmouse;"
                position="0 1.764 0">
      </a-entity>

      <!-- Terrain -->
      <a-grid></a-grid>

      <!-- Lighting -->
      <a-light type="ambient" color="#fff"></a-light>
    </a-scene>
  </body>
</html>
	<html>
	<head>
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta http-equiv="content-type" content="text/html; charset=utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no,user-scalable=no,maximum-scale=1">
	<title>Examples • Slow Mouse</title>
	<script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script>
	<script src="https://cdn.rawgit.com/donmccurdy/aframe-extras/v3.3.0/dist/aframe-extras.min.js"></script>
	<script>
	AFRAME.registerComponent('slowmouse-controls', {
	init: function () {
	this.viewWidth = 0;
	this.viewHeight = 0;
	this.lookVector = new THREE.Vector2();
	this.onMouseMove = this.onMouseMove.bind(this);
	},
	play: function () {
	var canvasEl = this.el.sceneEl.canvas;
	canvasEl.addEventListener('mousemove', this.onMouseMove, false);
	this.viewWidth = canvasEl.clientWidth;
	this.viewHeight = canvasEl.clientHeight;
	},
	pause: function () {
	var canvasEl = this.el.sceneEl.canvas;
	canvasEl.removeEventListener('mousemove', this.onMouseMove, false);
	this.lookVector.set(0, 0);
	},
	onMouseMove: function (event) {
	this.lookVector.x = event.clientX / this.viewWidth - 0.5;
	this.lookVector.y = event.clientY / this.viewHeight - 0.5;
	},
	isRotationActive: function () {
	return this.lookVector.lengthSq() > 0.05;
	},
	getRotationDelta: function () {
	var SENSITIVITY = 1 / 10;
	var rotationDelta = this.lookVector.clone().multiplyScalar(SENSITIVITY);
	return rotationDelta;
	}
	});
	</script>
	</head>
	<body>
	<a-scene>
	<!-- Player -->
	<a-entity camera
	universal-controls="rotationControls: hmd, gamepad, slowmouse;"
	position="0 1.764 0">
	</a-entity>

	<!-- Terrain -->
	<a-grid></a-grid>

	<!-- Lighting -->
	<a-light type="ambient" color="#fff"></a-light>
	</a-scene>
	</body>
	</html>