How to enable the model camera collision

This example shows how to enable camera collision for a splat model. When enabled, the camera can’t pass through the model when you zoom in too far. Instead, it collides with the model’s surface. The collision also keeps map navigation interactions, such as view rotation, centered on the model, resulting in smoother animations and more effective data visualization.

In the example, you can turn off/on the model collision by clicking the button.

^{Zoom in on the model to see how the camera collides with the view. Rotate the view to see how the rotation is centered on the model.}


npm install --save @maptiler/geosplats

main.js

import { SplatModel, Map, config } from "@maptiler/geosplats";
import '@maptiler/geosplats/dist/maptiler-geosplats.css';

config.apiKey = 'YOUR_MAPTILER_API_KEY_HERE';
const map = new Map({
  apiKey: config.apiKey,
  container: "map",
  center: [-80.27822, 25.74077],
  zoom: 17.26
});

let cameraCollisions = true;

map.on("load", () => {
  const splatModel = new SplatModel({
    model: "YOUR_MAPTILER_SPLAT_MODEL_ID_HERE",
    cameraCollisions: cameraCollisions
  });
  map.addSplatModel(splatModel);
});

document.getElementById('btn-collision').addEventListener('click', function () {
  cameraCollisions = !cameraCollisions;
  this.classList.toggle("collision-disabled");
  if (cameraCollisions) {
    this.innerHTML = "Disable collision";

  } else {
    this.innerHTML = "Enable collision";

  }
  splatModel.setCameraCollisions(cameraCollisions);
});

index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Basic SplatModel Load</title>
  <link rel="stylesheet" href="./style.css">
</head>

<body>
  <button id="btn-collision" class="btn-collision">Disable collision</button>
  <div id="map"></div>
  <script type="module" src="./main.js"></script>
</body>

</html>

style.css

body {
  font-family: Inter, sans-serif;
  margin: 0;
  overflow: hidden;
}

#map {
  width: 100%;
  height: 100vh;
}

.btn-collision {
  display: block;
  position: relative;
  margin: 20px auto;
  width: 50%;
  height: 40px;
  padding: 10px;
  border: none;
  border-radius: 3px;
  font-size: 12px;
  text-align: center;
  color: #fff;
  background: #ee8a65;
  z-index: 100;
}

.collision-disabled {
  background: #3174ff;
}

.btn-collision:hover {
  filter: brightness(90%);
}

<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Basic SplatModel Load</title>
  <link rel="stylesheet"
    href="https://cdn.maptiler.com/maptiler-geosplats/v1.0.9/maptiler-geosplats.css">
  <style>
    body {
      font-family: Inter, sans-serif;
      margin: 0;
      overflow: hidden;
    }

    #map {
      width: 100%;
      height: 100vh;
    }

    .btn-collision {
      display: block;
      position: relative;
      margin: 20px auto;
      width: 50%;
      height: 40px;
      padding: 10px;
      border: none;
      border-radius: 3px;
      font-size: 12px;
      text-align: center;
      color: #fff;
      background: #ee8a65;
      z-index: 100;
    }

    .collision-disabled {
      background: #3174FF;
    }

    .btn-collision:hover {
      filter: brightness(90%);
    }
  </style>
</head>

<body>
  <button id="btn-collision" class="btn-collision">Disable collision</button>
  <div id="map"></div>
  <script type="module">
    import { SplatModel, Map, config } from "https://cdn.maptiler.com/maptiler-geosplats/v1.0.9/maptiler-geosplats.mjs";;

    config.apiKey = 'YOUR_MAPTILER_API_KEY_HERE';
    const map = new Map({
      apiKey: config.apiKey,
      container: "map",
      center: [7.86040, 46.686488],
      zoom: 17.26
    });

    let cameraCollisions = true;

    map.on("load", () => {
      const splatModel = new SplatModel({
        model: "YOUR_MAPTILER_SPLAT_MODEL_ID_HERE",
        cameraCollisions: cameraCollisions
      });
      map.addSplatModel(splatModel);
    });

    document.getElementById('btn-collision').addEventListener('click', function () {
      cameraCollisions = !cameraCollisions;
      this.classList.toggle("collision-disabled");
      if (cameraCollisions) {
        this.innerHTML = "Disable collision";

      } else {
        this.innerHTML = "Enable collision";

      }
      splatModel.setCameraCollisions(cameraCollisions);
    });
  </script>
</body>

</html>

Enable camera collision

This feature is disabled by default. You can enable it by calling SplatModel’s setCameraCollision API method or by passing it as an option to the SplatModel constructor, as shown in this example.

Learn more

Check out the MapTiler GeoSplats SDK JS reference

How to enable the model camera collision

main.js

index.html

style.css

Enable camera collision

Learn more

Add splat model

Capture events

Change basemap

Opacity and visibility

How to enable the model camera collision

NPM module setup

main.js

index.html

style.css

Basic JavaScript setup

Enable camera collision

Learn more

Related examples

Add splat model

Capture events

Change basemap

Opacity and visibility