How to CONTROL a Sketchfab 3D MODEL using JavaScript

How to Control Sketchfab 3D Model Layers Using the Sketchfab API

Have you ever wanted to create interactive experiences with 3D models on Sketchfab? Maybe you’ve thought, “Wouldn’t it be great if I could hide or show parts of a model with just a click of a button?” Well, that’s exactly what I’m going to show you today based on a recent project I worked on.

I needed to create an easy way to remove the roof from a 3D building model — not by awkwardly zooming and rotating to peek inside, but simply by clicking a button. Let’s walk through how I made it happen using Sketchfab’s powerful API.

The Project: Removing a Building’s Roof with One Click

The goal was simple: allow users to hide or show the roof of a building with a button press, so they could easily look inside.

Normally, if you want to explore the interior of a 3D building on Sketchfab, you have to zoom, rotate, and try to maneuver through walls — not the best experience. I wanted a cleaner, more user-friendly solution: a roof that could vanish with one click.

To achieve this, I created a simple JavaScript button that connects to the Sketchfab API. When clicked, it toggles the visibility of specific layers (in this case, the roof) within the model.

How It Works: Overview of the Code

Here’s a high-level overview of what the code does:

  1. Load the Sketchfab Viewer API:
    I first load the Sketchfab API and set up a basic HTML page with an iframe where the 3D model will be loaded.
  2. Connect the Model:
    The model is loaded using its unique Sketchfab ID. This ID tells the API which model to fetch from the Sketchfab servers.
  3. Retrieve Materials and Create Buttons:
    Once the model is loaded, I use the API to fetch all the materials (layers) associated with the model.
    For each material, a button is created that allows you to hide or show that specific part of the model. This was a key step to identify which parts belonged to the roof.
  4. Finding the Roof Layers:
    After clicking through the buttons, I discovered that Layer 13 and Layer 15 made up the roof. Layer 13 was the timber frame and Layer 15 was the gray paneling.
  5. Creating the Hide/Show Button:
    I then created a custom “Hide/Show Roof” button that specifically toggles just layers 13 and 15 — making the roof disappear or reappear instantly.

Digging Into the Code Details

Let’s look a bit deeper into how the main functionality is structured:

  • Initialization: javascriptCopyEditvar iframe = document.getElementById('api-frame'); var client = new Sketchfab(iframe);
  • Loading the Model: javascriptCopyEditclient.init('MODEL_UID', { success: function(api) { api.start(); api.addEventListener('viewerready', function() { // Code to retrieve materials and create buttons }); } });
  • Retrieving and Setting Up Materials:
    The materials (layers) are fetched, and for each one, a button is dynamically created. Each button toggles the material’s opacity between fully visible and completely hidden.
  • Custom Hide/Show Button:
    A dedicated button controls the visibility of both roof layers (13 and 15) at once.
    When clicked, it checks the current state (visible or hidden) and toggles them accordingly using the setMaterial function.

Important Things to Watch Out For

  • Wait for the Model to Load:
    Buttons should only become active after the model has fully loaded, otherwise the API won’t be ready yet.
  • Simplify for Production:
    After identifying the important layers, you can remove the auto-generated layer buttons for a cleaner user interface.
  • Layer IDs May Vary:
    Every model is different. You will need to manually identify the relevant material IDs for each new model you work with.

Final Result: Smooth, Interactive 3D Control

Now, users can easily hide and show the building’s roof with a single click, making it much easier to explore the interior structure without the frustration of awkward camera movements.

This simple interaction turns a regular 3D model into a much more powerful educational tool — perfect for teaching, demonstrations, and virtual tours.

Want the Code?

If you’d like a copy of the code I used, drop a comment and I’ll happily send it over. Also, if you’re working on any cool Sketchfab API projects, I’d love to hear about them!

Don’t forget to like, subscribe, and check out the online courses if you’re interested in learning more about building educational and interactive web experiences.

Happy coding!
– Chris Richter