---
title: "How to enable the model camera collision | Geosplats sdk"
description: "Learn how to enable the model camera collision. Sets whether the camera movement is restricted by model."
---
> For AI agents: a documentation index is available at [/llms.txt](https://docs.maptiler.com/llms.txt). Markdown versions of all pages are available by appending .md to any URL.
# 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 module setup
```bash
npm install --save @maptiler/geosplats
```
#### main.js
```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
```html
Basic SplatModel Load
```
#### style.css
```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%);
}
```
### Basic JavaScript setup
```html
Basic SplatModel Load
```
## 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](https://docs.maptiler.com/geosplats-sdk/api)
## Related examples
### [Add splat model](https://docs.maptiler.com/geosplats-sdk/examples/add-geosplats/)
Examples
Learn how to load a map using the GeoSplats SDK and add a photorealistic splat model. A splat model offer a modern alternative to 3D meshes, perfect for complex scenes.
### [Capture events](https://docs.maptiler.com/geosplats-sdk/examples/events/)
Examples
Learn how to capture both global map events and specific splats events like load, update, mouseover, and click.
### [Change basemap](https://docs.maptiler.com/geosplats-sdk/examples/change-basemap/)
Examples
Learn how to dynamically switch between different MapTiler basemaps while maintaining photorealistic 3D splat models in your scene.
### [Opacity and visibility](https://docs.maptiler.com/geosplats-sdk/examples/opacity-visibility/)
Examples
Learn how to dynamically control the transparency and visibility of photorealistic splats objects using the MapTiler GeoSplats SDK.