---
title: "Change the opacity and visibility of splats | Geosplats sdk"
description: "Learn how to dynamically control the transparency and visibility of photorealistic splats objects using the MapTiler GeoSplats SDK."
---
> For AI agents: a documentation index is available at [/llms.txt](https://docs-qmgv.pages.dev/llms.txt). Markdown versions of all pages are available by appending .md to any URL.
# Change the opacity and visibility of splats
This example shows how to change the **opacity** of **splats** and how to dynamically hide or show it. This is particularly useful for visualizing layers of information, highlighting specific objects, or creating smooth transitions in your 3D scenes.
### 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: [9.59401, 59.22317],
zoom: 17.23
});
map.on("load", () => {
const splatModel = new SplatModel({
model: "YOUR_MAPTILER_SPLAT_MODEL_ID_HERE",
});
map.addSplatModel(splatModel);
document.getElementById("opacity").oninput = (e) => {
splatModel.setOpacity(parseFloat(e.target.value));
};
let visible = true;
document.getElementById("toggle-vis").onclick = () => {
visible = !visible;
if (visible) splatModel.show();
else splatModel.hide();
};
});
```
#### index.html
```html
Opacity and Visibility of SplatModel
```
## Learn more
Check out the [MapTiler GeoSplats SDK JS reference](https://docs-qmgv.pages.dev/geosplats-sdk/api)
## Related examples
### [Add splat model](https://docs-qmgv.pages.dev/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.
### [Edit model in custom editor](https://docs-qmgv.pages.dev/geosplats-sdk/examples/custom-editor/)
Examples
Build a custom 3D editor to adjust the position, rotation, and scale of splat models and save their properties to a database.
### [Capture events](https://docs-qmgv.pages.dev/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-qmgv.pages.dev/geosplats-sdk/examples/change-basemap/)
Examples
Learn how to dynamically switch between different MapTiler basemaps while maintaining photorealistic 3D splat models in your scene.