## Spherical Panning for 360 Camera Rotation

This snippet shows a way to add spherical panning behavior to a scene. The behavior is similar to the interactions from viewing 3D images on Facebook, Google Maps, etc. The function contains several constants, such as INERTIA_DECAY_FACTOR, which can be tuned to customize the default feel of the interaction.

Note that this function uses quaternion math which is not available in Babylon.js v3.3.0 or earlier.

```javascript
var addSphericalPanningCameraToScene = function (scene, canvas) {
 // Set cursor to grab.
 scene.defaultCursor = "grab";

 // Add the actual camera to the scene. Since we are going to be controlling it manually,
 // we don't attach any inputs directly to it.
 // NOTE: We position the camera at origin in this case, but it doesn't have to be there.
 // Spherical panning should work just fine regardless of the camera's position.
 var camera = new BABYLON.FreeCamera("camera", BABYLON.Vector3.Zero(), scene);

 // Ensure the camera's rotation quaternion is initialized correctly.
 camera.rotationQuaternion = BABYLON.Quaternion.Identity();

 // The spherical panning math has singularities at the poles (up and down) that cause
 // the orientation to seem to "flip." This is undesirable, so this method helps reject
 // inputs that would cause this behavior.
 var isNewForwardVectorTooCloseToSingularity = v => {
 const TOO_CLOSE_TO_UP_THRESHOLD = 0.99;
 return Math.abs(BABYLON.Vector3.Dot(v, BABYLON.Vector3.Up())) > TOO_CLOSE_TO_UP_THRESHOLD;
 }

 // Local state variables which will be used in the spherical pan method; declared outside 
 // because they must persist from frame to frame.
 var ptrX = 0;
 var ptrY = 0;
 var inertiaX = 0;
 var inertiaY = 0;

 // Variables internal to spherical pan, declared here just to avoid reallocating them when
 // running.
 var priorDir = new BABYLON.Vector3();
 var currentDir = new BABYLON.Vector3();
 var rotationAxis = new BABYLON.Vector3();
 var rotationAngle = 0;
 var rotation = new BABYLON.Quaternion();
 var newForward = new BABYLON.Vector3();
 var newRight = new BABYLON.Vector3();
 var newUp = new BABYLON.Vector3();
 var matrix = new BABYLON.Matrix.Identity();

 // The core pan method.
 // Intuition: there exists a rotation of the camera that brings priorDir to currentDir.
 // By concatenating this rotation with the existing rotation of the camera, we can move
 // the camera so that the cursor appears to remain over the same point in the scene, 
 // creating the feeling of smooth and responsive 1-to-1 motion.
 var pan = (currX, currY) => {
 // Helper method to convert a screen point (in pixels) to a direction in view space.
 var getPointerViewSpaceDirectionToRef = (x, y, ref) => {
 BABYLON.Vector3.UnprojectToRef(
 new BABYLON.Vector3(x, y, 0), 
 canvas.width, 
 canvas.height,
 BABYLON.Matrix.Identity(),
 BABYLON.Matrix.Identity(), 
 camera.getProjectionMatrix(),
 ref);
 ref.normalize();
 }

 // Helper method that computes the new forward direction. This was split into its own
 // function because, near the singularity, we may to do this twice in a single frame
 // in order to reject inputs that would bring the forward vector too close to vertical.
 var computeNewForward = (x, y) => {
 getPointerViewSpaceDirectionToRef(ptrX, ptrY, priorDir);
 getPointerViewSpaceDirectionToRef(x, y, currentDir);

 BABYLON.Vector3.CrossToRef(priorDir, currentDir, rotationAxis);

 // If the magnitude of the cross-product is zero, then the cursor has not moved
 // since the prior frame and there is no need to do anything.
 if (rotationAxis.lengthSquared() > 0) {
 rotationAngle = BABYLON.Vector3.GetAngleBetweenVectors(priorDir, currentDir, rotationAxis);
 BABYLON.Quaternion.RotationAxisToRef(rotationAxis, -rotationAngle, rotation);

 // Order matters here. We create the new forward vector by applying the new rotation 
 // first, then apply the camera's existing rotation. This is because, since the new
 // rotation is computed in view space, it only makes sense for a camera that is
 // facing forward.
 newForward.set(0, 0, 1);
 newForward.rotateByQuaternionToRef(rotation, newForward);
 newForward.rotateByQuaternionToRef(camera.rotationQuaternion, newForward);

 return !isNewForwardVectorTooCloseToSingularity(newForward);
 }

 return false;
 }

 // Compute the new forward vector first using the actual input, both X and Y. If this results
 // in a forward vector that would be too close to the singularity, recompute using only the
 // new X input, repeating the Y input from the prior frame. If either of these computations
 // succeeds, construct the new rotation matrix using the result.
 if (computeNewForward(currX, currY) || computeNewForward(currX, ptrY)) {
 // We manually compute the new right and up vectors to ensure that the camera 
 // only has pitch and yaw, never roll. This dependency on the world-space
 // vertical axis is what causes the singularity described above.
 BABYLON.Vector3.CrossToRef(BABYLON.Vector3.Up(), newForward, newRight);
 BABYLON.Vector3.CrossToRef(newForward, newRight, newUp);

 // Create the new world-space rotation matrix from the computed forward, right, 
 // and up vectors.
 matrix.setRowFromFloats(0, newRight.x, newRight.y, newRight.z, 0);
 matrix.setRowFromFloats(1, newUp.x, newUp.y, newUp.z, 0);
 matrix.setRowFromFloats(2, newForward.x, newForward.y, newForward.z, 0);

 BABYLON.Quaternion.FromRotationMatrixToRef(matrix.getRotationMatrix(), camera.rotationQuaternion);
 }
 };

 // The main panning loop, to be run while the pointer is down.
 var sphericalPan = () => {
 pan(scene.pointerX, scene.pointerY);

 // Store the state variables for use in the next frame.
 inertiaX = scene.pointerX - ptrX;
 inertiaY = scene.pointerY - ptrY;
 ptrX = scene.pointerX;
 ptrY = scene.pointerY;
 }

 // The inertial panning loop, to be run after the pointer is released until inertia
 // runs out, or until the pointer goes down again, whichever happens first. Essentially
 // just pretends to provide a decreasing amount of input based on the last observed input,
 // removing itself once the input becomes negligible.
 const INERTIA_DECAY_FACTOR = 0.9;
 const INERTIA_NEGLIGIBLE_THRESHOLD = 0.5;
 var inertialPanObserver;
 var inertialPan = () => {
 if (Math.abs(inertiaX) > INERTIA_NEGLIGIBLE_THRESHOLD || Math.abs(inertiaY) > INERTIA_NEGLIGIBLE_THRESHOLD) {
 pan(ptrX + inertiaX, ptrY + inertiaY);

 inertiaX *= INERTIA_DECAY_FACTOR;
 inertiaY *= INERTIA_DECAY_FACTOR;
 }
 else {
 scene.onBeforeRenderObservable.remove(inertialPanObserver);
 }
 };

 // Enable/disable spherical panning depending on click state. Note that this is an 
 // extremely simplistic way to do this, so it gets a little janky on multi-touch.
 var sphericalPanObserver;
 var pointersDown = 0;
 scene.onPointerDown = () => {
 pointersDown += 1;
 if (pointersDown !== 1) {
 return;
 }

 // Disable inertial panning.
 scene.onBeforeRenderObservable.remove(inertialPanObserver);

 // Switch cursor to grabbing.
 scene.defaultCursor = "grabbing";

 // Store the current pointer position to clean out whatever values were left in
 // there from prior iterations.
 ptrX = scene.pointerX;
 ptrY = scene.pointerY;
 
 // Enable spherical panning.
 sphericalPanObserver = scene.onBeforeRenderObservable.add(sphericalPan);
 }
 scene.onPointerUp = () => {
 pointersDown -= 1;
 if (pointersDown !== 0) {
 return;
 }

 // Switch cursor to grab.
 scene.defaultCursor = "grab";

 // Disable spherical panning.
 scene.onBeforeRenderObservable.remove(sphericalPanObserver);

 // Enable inertial panning.
 inertialPanObserver = scene.onBeforeRenderObservable.add(inertialPan);
 }
};
```
## Playground

<Playground id="#21UPR3#30" title="Spherical Panning Camera" description=""/>

## How To Create Points on the Mesh Surface

This utility enables you to create and store Vector3 points each of which is randomly positioned uniformly on the surface of a mesh.

## Design Outline.

1. Take a random triangular facet belonging to the mesh;
2. Calculate the area of the triangle;
3. Calculate the number of random points to place on the facet using density * area;
4. Choose random points inside this triangle;


## Design Method.

For the mesh get the vertex positions and indices using

```javascript
var positions = mesh.getVerticesData(BABYLON.VertexBuffer.PositionKind);
var indices = mesh.getIndices();
```

For each facet, F, in turn obtain the three facet vertex positions, vertex0, vertex1 and vertex2 using the positions array. From these construct vectors, vec0, vec1 and vec2, along each side of the triangle. Using the lengths of the sides calculate the area of the triangle. For a value 0 &le; &lambda; &le; 1,&nbsp; &lambda;vec0 and &lambda;vec1 will form two sides of a triangle similar to the facet. So when also given a value 0 &le; &mu; &le; 1,&nbsp; &lambda;vec0 and &lambda;&mu;vec1 will give a point inside the facet. The range of values for &lambda; and &mu; will determine all points within the facet. Hence random values for &lambda; and &mu; will give random points on the facet plane.

![Find point](/img/samples/manypoints.jpg)

```javascript
lamda = BABYLON.Scalar.RandomRange(0, 1);	
mu = BABYLON.Scalar.RandomRange(0, 1);
facetPoint = vertex0.add(vec0.scale(lambda)).add(vec1.scale(lambda * mu));
```

Repeat for density * area random points for each facet.

## The Whole function

Set the density for the points and generate the points and store and return them in an array.

```javascript
BABYLON.Mesh.prototype.createSurfacePoints = function(pointDensity) {
	var positions = this.getVerticesData(BABYLON.VertexBuffer.PositionKind);
	var indices = this.getIndices();
	
	var point = BABYLON.Vector3.Zero();
	var points = [];
	
	var randX = 0;
	var randY = 0;
	var randZ = 0
	
	var index = 0;
	var id0 = 0;
	var id1 = 0; 
	var id2 = 0;
	var v0X = 0;
	var v0Y = 0;
	var v0Z = 0;
	var v1X = 0;
	var v1Y = 0
	var v1Z = 0;
	var v2X = 0;
	var v2Y = 0;
	var v2Z = 0;
	var vertex0 = BABYLON.Vector3.Zero();
	var vertex1 = BABYLON.Vector3.Zero();
	var vertex2 = BABYLON.Vector3.Zero();
	var vec0 = BABYLON.Vector3.Zero();
	var vec1 = BABYLON.Vector3.Zero();
 var vec2 = BABYLON.Vector3.Zero();

 var a = 0; //length of side of triangle
 var b = 0; //length of side of triangle
 var c = 0; //length of side of triangle
 var p = 0; //perimeter of triangle
 var area = 0;
 var nbPoints = 0; //nbPoints per triangle
		
	var lamda = 0;	
	var mu = 0;

	for(let index = 0; index <indices.length / 3; index++) { 				
		id0 = indices[3 * index];
		id1 = indices[3 * index + 1]; 
		id2 = indices[3 * index + 2]; 
		v0X = positions[3 * id0];
		v0Y = positions[3 * id0 + 1];
		v0Z = positions[3 * id0 + 2];
		v1X = positions[3 * id1];
		v1Y = positions[3 * id1 + 1];
		v1Z = positions[3 * id1 + 2];
		v2X = positions[3 * id2];
		v2Y = positions[3 * id2 + 1];
		v2Z = positions[3 * id2 + 2];
		vertex0.set(v0X, v0Y, v0Z);
		vertex1.set(v1X, v1Y, v1Z);
		vertex2.set(v2X, v2Y, v2Z);
		vertex1.subtractToRef(vertex0, vec0);
		vertex2.subtractToRef(vertex1, vec1);
 vertex2.subtractToRef(vertex0, vec2);
 a = vec0.length();
 b = vec1.length();
 c = vec2.length();
 p = (a + b + c) / 2; 
 area = Math.sqrt(p * (p - a) * (p - b) * (p - c));
 nbPoints = Math.round(pointDensity * area);
 for (let i = 0; i < nbPoints; i++) {
 //form a point inside the facet v0, v1, v2;
 lamda = BABYLON.Scalar.RandomRange(0, 1);	
		 mu = BABYLON.Scalar.RandomRange(0, 1);
		 facetPoint = vertex0.add(vec0.scale(lamda)).add(vec1.scale(lamda * mu));
 points.push(facetPoint);
 }	
	}
	return points;
}
```

<Playground id="#NFSGWT#2" title="Drawing Points on a Mesh Surface" description=""/>

## Draw an Arc Between Two Vectors

Given an origin O and two vectors OA and OB this snippet draws an arc between the two vectors with a given radius. The arc can be drawn in three types 0 (default) a solid line, 1 a dashed line, 2 filled between arc and vectors.

```javascript
function showAngleSector(origin, vector1, vector2, radius, sectorType) {
 radius = radius || 1;
 sectorType = sectorType || 0;
 const cross = BABYLON.Vector3.Cross(vector1, vector2);
 const dot = BABYLON.Vector3.Dot(vector1, vector2);
 const angle = Math.acos(dot / (vector1.length() * vector2.length()));
 const points = [];
 const minNb = 4;
 const factor = 2;
 let nbPoints = Math.floor(radius * angle * factor);
 nbPoints = nbPoints < minNb ? minNb : nbPoints;

 const firstPoint = BABYLON.Vector3.Normalize(vector1).scale(radius);
 const lastPoint = BABYLON.Vector3.Normalize(vector2).scale(radius);
 let matrix;
 let ang = angle / nbPoints;
 let rotated;
 for (let i = 0; i < nbPoints; i++) {
 matrix = BABYLON.Matrix.RotationAxis(cross, ang * i);
 rotated = BABYLON.Vector3.TransformCoordinates(firstPoint, matrix);
 points.push(rotated.add(origin));
 }
 points.push(lastPoint.add(origin));

 let sector;
 switch (sectorType) {
 case 0:
 sector = BABYLON.MeshBuilder.CreateLines("sector", { points }, scene);
 break;
 case 1:
 sector = BABYLON.Mesh.CreateDashedLines("sector", points, 3, 1, nbPoints, scene);
 break;
 case 2:
 const pointO = [];
 for (let j = 0; j < points.length; j++) {
 pointO.push(origin);
 }
 sector = BABYLON.Mesh.CreateRibbon("sector", [points, pointO], null, null, 0, scene);
 break;
 default:
 sector = BABYLON.MeshBuilder.CreateLines("sector", { points }, scene);
 break;
 }
 return sector;
}
```

## Playground

<Playground id="#FUK3S#8" title="Draw an Arc Between Two Vectors" description=""/>