
# Hotspot

Hotspot is a feature designed to compute world space positions within the triangles of deformed geometry. For instance, it can calculate the center of a triangle on a mesh that is being deformed by an animated skeleton. This world space position can then be projected onto the screen, creating a 2D Hotspot. This allows certain areas of an animated mesh to be made more visible to the user.

## Getting a hotspot

Simple example of a hotspot:
```javascript
const hotspotQuery = {pointIndex:[6527,6526,6525],barycentric:[0.723, 0.079, 0.196]};
BABYLON.GetHotSpotToRef(mesh, hotspotQuery, worldPosition);
```

`pointIndex` represents the three vertices used to compute the transformed triangle. Usually, it corresponds to the indices of a rendered triangle.
`barycentric` contains the barycentric coordinates of the hotspot point in the triangle composed of `pointIndex`.

## Getting hotspot query values

Scene picking queries provide everything needed. To fill a query object, first pick inside the displayed scene.

```javascript
const pickResult = scene.pick(scene.pointerX, scene.pointerY);
if (pickResult.hit) {
    const indices = pickResult.pickedMesh.getIndices();
    const base = pickResult.faceId * 3;
    hotspotQuery.pointIndex[0] = indices[base];
    hotspotQuery.pointIndex[1] = indices[base+1];
    hotspotQuery.pointIndex[2] = indices[base+2];
    hotspotQuery.barycentric[0] = pickResult.bu;
    hotspotQuery.barycentric[1] = pickResult.bv;
    hotspotQuery.barycentric[2] = 1 - pickResult.bu - pickResult.bv;
    hotspotQuery.meshIndex = scene.meshes.indexOf(pickResult.pickedMesh);
}	
```

## Projecting hotspot to get 2D values

This works for any world coordinate, not just hotspots.

```javascript
const renderWidth = engine.getRenderWidth();
const renderHeight = engine.getRenderHeight();

const viewportWidth = camera.viewport.width * renderWidth;
const viewportHeight = camera.viewport.height * renderHeight;
const viewport = new BABYLON.Viewport(0, 0, viewportWidth, viewportHeight);

let screenPosition = new BABYLON.Vector3();

BABYLON.Vector3.ProjectToRef(worldPosition, BABYLON.Matrix.Identity(), scene.getTransformMatrix(), viewport, screenPosition);
line.x2 = screenPosition.x;
line.y2 = screenPosition.y;
```

<Playground id="#BQOFIX#15" title="Simple Example of Mesh Hotspot" description="Hotspot hooked to a animated skinned mesh."/>



## How To Use MeshExploder

`MeshExploder` takes an array of meshes and increases or decreases their distance from a center `Mesh`.

```javascript
const newExplosion = new BABYLON.MeshExploder(meshes, centerMesh);

newExplosion.explode(); //Explodes meshes away from center. Default 1.0.
```

| variable              | description                                                                               |
| --------------------- | ----------------------------------------------------------------------------------------- |
| meshes                | The array of meshes to explode/implode.                                                   |
| centerMesh (optional) | The mesh to be the center of the explosion. Defaults to the mesh closest to the center of all meshes. |

The `MeshExploder.explode()` function takes a numeric parameter to multiply the explosion distance. Negative numbers implode. Zero resets the meshes to their original positions.

```javascript
newExplosion.explode(-2); //Implodes
newExplosion.explode(0); //Resets
```

## Example Usage

```javascript
const toExplodeArray = [];
const sphere1 = BABYLON.MeshBuilder.CreateSphere("sphere1", { segments: 12, diameter: 2 }, scene);
sphere1.position.y += 2;
toExplodeArray.push(sphere1);

for (let alpha = 0; alpha < Math.PI * 2; alpha += Math.PI / 10) {
  const sphere0 = BABYLON.MeshBuilder.CreateSphere("sphere0", { segments: 8, diameter: 0.5 }, scene);
  sphere0.position.y = 2;
  sphere0.position.z = Math.cos(alpha) * 1.25;
  sphere0.position.x = Math.sin(alpha) * 1.25;
  toExplodeArray.push(sphere0);
}

const newExplosion = new BABYLON.MeshExploder(toExplodeArray);

newExplosion.explode(2);
```

<Playground id="#SFI0DQ" title="Simple explosion" description="Simple example of creating an explosion." /> <Playground id="#PTT7L9#2" title="Larger explosion" description="Example of creating an explosion with thousands of meshes." />

# Example With Imported Objects

```javascript
const assetsManager = new BABYLON.AssetsManager(scene);
const meshTask = assetsManager.addMeshTask("model", "", "./", "model.gltf");

let meshes;

meshTask.onSuccess = function(task) {
    meshes = task.loadedMeshes;
}
assetsManager.load();
const newExplosion;
scene.executeWhenReady(function() {
    newExplosion = new BABYLON.MeshExploder(meshes);
    newExplosion.explode(2);
});
```

## Example Using the Babylon.js Viewer

```javascript
BabylonViewer.viewerManager.getViewerPromiseById("babylon-viewer").then(function (viewer) {
  viewerObservables(viewer);
});
let newExplosion;
function viewerObservables(viewer) {
  viewer.onModelLoadedObservable.add(function (model) {
    model.rootMesh.getScene().executeWhenReady(function () {
      newExplosion = new BABYLON.MeshExploder(model.meshes, model.meshes[0]);
      newExplosion.explode(2);
    });
  });
}
```
