Picking Test

Picking in different viewports

HTML

<script src="http://urbanproductions.com/wingy/babylon/collisions/js/babylon.1.11.0.js"></script>
<script src="http://urbanproductions.com/wingy/babylon/collisions/js/hand.minified-1.3.7.js"></script>
	<div id="infoline">
		<span id="pick">Test</span>
		<span id="loc">Test</span>
		<span id="cam">Test</span>
	</div>

	<canvas id="canvas"></canvas>

CSS

html,body,#canvas {
            width:100%;
            height:100%;
            padding:0;
            margin:0;
            overflow: hidden;
			background-color: black;
		}

		#infoline {
			position: absolute;
			left: 0%;
			top: 95%;
			background-color: rgb(0, 0, 128);
			line-height: 2em;
			padding-right: 20pt;
		}

		#pick {
			background-color: black;
			border: 2px solid red;
			text-align: center;
			font-size: 16px;
			color: white;
			margin-left: 25pt;
			padding-left: 5pt;
			padding-right: 5pt;
		}
		#loc {
			background-color: black;
			border: 2px solid red;
			text-align: center;
			font-size: 16px;
			color: white;
			padding-left: 5pt;
			padding-right: 5pt;
			margin-left: 10pt;
		}
		#cam {
			background-color: black;
			border: 2px solid red;
			text-align: center;
			font-size: 16px;
			color: white;
			padding-left: 5pt;
			padding-right: 5pt;
			margin-left: 10pt;
		}

JavaScript

var canvas = document.getElementById("canvas");
	var divPick = document.getElementById("pick");
	var locPick = document.getElementById("loc");
	var camPick = document.getElementById("cam");
	var whichCam = {};

    // Check support
	if (!BABYLON.Engine.isSupported()) {
		alert('Browser not supported');
	} else {
		var engine = new BABYLON.Engine(canvas, true);
		var scene = CreateScene();

		engine.runRenderLoop(function () {
			scene.render();
			whichCam = scene.activeCamera;
		});

		// Resize event
		window.addEventListener("resize", function () {
			engine.resize();
		});

		//Click event
        window.addEventListener("click", function (evt) {

			locPick.textContent = "x: " + evt.clientX + "    " + "y: " + evt.clientY;
			camPick.textContent = whichCam.name;

        	// We try to pick an object
        	var pickResult = scene.pick(evt.clientX, evt.clientY, null, null, whichCam);

        	if (pickResult.hit)
        	{
            	var objname = pickResult.pickedMesh.name;
            	switch(objname) {

                	case "aBox" :
                    	divPick.textContent = objname;
						if (scene.activeCameras.length == 1) {
							goViewport2(scene);
						}
						break;

                	case "aPlane" :
                    	divPick.textContent = objname;
						break;

                	case "aPlane2" :
                    	divPick.textContent = objname;
						break;

                	case "aSphere" :
                    	divPick.textContent = objname;
						if (scene.activeCameras.length == 2) {
							endViewport2(scene);
						}
						break;

                	default:
                    	divPick.textContent = "----";
                    	break
            	}
        	}
        }); //end of click event
	}

// -------- Create Scene ---------
	function CreateScene() {

	var scene = new BABYLON.Scene(engine);

	scene.clearColor = new BABYLON.Color3(.5,.5,.5);

	// do cam and viewport...