RayysMouse Demo (three.js)

by mmalex

HTML

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/93/three.js"></script>
<script src="http://mbnsay.com/rayys/assets/js/OrbitControls.js"></script>
<script src="http://rawgit.mbnsay.com/nmalex/three.js-helpers/master/RayysMouse.js"></script>
<span id="mouse-coords">Now move mouse aroung</span><br/>
<span>You can also zoom by mouse wheel</span>

CSS

body {
  font-family: monospace;
  font-size: 11px;
  overflow: hidden;
}

button {
  color: #404040;
  border: 1px solid black;
  box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);
  font-family: monospace;
}

button:active {
  box-shadow: 0px 0px 0px transparent;
}

.active {
  background: green;
  color: white;
  box-shadow: 0px 0px 0px transparent;
}

.toolbar {
  position: fixed;
  left: 8px;
  top: 8px;
}

JavaScript

// == example starts here
var renderer;
var camera;
var controls;

var scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

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

camera.position.x = 5;
camera.position.y = 5;
camera.position.z = 5;
camera.lookAt(0, 0, 0);

controls = new THREE.OrbitControls(camera);

// white spotlight shining from the side, casting a shadow
var spotLight = new THREE.SpotLight(0xffffff, 2.5, 25, Math.PI / 6);
spotLight.position.set(4, 10, 7);
scene.add(spotLight);

var size = 0.5;
var displayPlanes = true;
var i = 0; {
  var geometry = new THREE.BoxGeometry(size, size, size);
  var material = new THREE.MeshPhongMaterial({
    color: 0xe0ffe0,
    transparent: true,
    opacity: 0.75
  });
  var cube = new THREE.Mesh(geometry, material);
  cube.applyMatrix(new THREE.Matrix4().makeTranslation(2 * i, 0, 0));

  scene.add(cube);
}

var mouseCoordsSpan = $("#mouse-coords");

var mouse = new RayysMouse(renderer, camera, controls);
mouse.subscribe(
	function(pos, sender) {
  	console.log(sender);
  	mouseCoordsSpan.text(`Mouse down at: ${JSON.stringify(pos)}`);
  },
  function(pos, sender) {
  	mouseCoordsSpan.text(`Mouse moved to: ${JSON.stringify(pos)}`);
  },
  function(pos, sender) {
  	mouseCoordsSpan.text(`Mouse up at: ${JSON.stringify(pos)}`);
  }
);

var animate = function() {
  requestAnimationFrame(animate);
  controls.update();
  renderer.render(scene, camera);
};

animate();