Range Slider for two models to be embedded on website

I have before and after models for a project site. Can I or how do I create a range slider - vertical toggle bar with the two models on my website so that visitors can manipulate the model and then toggle left/right to easily see before and after. thanks.

Are you looking to do something like what’s embedded in this article? Sketchfab Community Blog - » Kathmandu – 3D views before and after the earthquake

Yes! Totally. Found the link to the Sketchfab Viewer API. Now I need to understand that as a novice html5/css button masher.

Thanks.

You’re welcome! Best of luck with the button mashing. :upside_down_face:

Incidentally, we have a dedicated API channel over on our Discord: https://discord.gg/fKxwnS6VUE

I am having no luck getting the second part of the Viewer API Part 1: Introduction tutorial to work.

One more request - any chance you can link the code used on that earthquake pre/post model?

Or at least a tutorial on how to get the same perspective functionality where you can easily toggle between two models while holding the camera in the same position?

Thanks

I’m afraid I don’t have the code that they used to achieve that effect in the viewer and there is not, to my knowledge, a tutorial on the topic. :slightly_frowning_face:

Hi @riversonicrun,
the samples in the documentation are your friend: Viewer API - Examples - Sketchfab
That sample has two buttons, one for showing and one for hiding.
On a sidenote, if you have a range of displacement maps for your site with deformations over time, you can use a slider to play these deformations as an animation: Land Subsidence by Klaas Nienhuis for Sensar
So, this is a single model (a simple plane) with a list of displacement maps.

2 Likes

Thanks. Looked through these and tried to crib code using my limited skills. All of these deal with a single model. The Show/hide is probably the way but that event looks for the object id element to remove from scene not hide entire model. Will keep tinkering. Thanks again.

Thank you for the help again. This is not in line with the previous question but similar. I have not been able to get the map functionality to be the same as the example that Abby originally pointed me too. Isolated the code that runs that model visualization but hung up since theirs appears to be only one model with two objects identified. Not sure. My question not is way simplier. On my website, the code I have below leaves the space for the models blank and people need to know to click the buttons to get the models loading. I have included autostart and preload code but they don’t appear to work. I think my eventlisteners are wrong. Any insight would be great. Thx.

        <iframe src="" id="api-frame" width="1200" height="650" allow="autoplay; fullscreen; xr-spatial-tracking" xr-spatial-tracking execution-while-out-of-viewport execution-while-not-rendered web-share allowfullscreen mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>

        <div class="buttons">
            <button id="blueButton">Existing Box Culverts on Sandi Creek Drive</button>
            <button id="orangeButton">New Bridge Sandi Creek Drive Bridge</button>
        </div>
    <!-- The API -->

    <script src="https://static.sketchfab.com/api/sketchfab-viewer-1.0.0.js"></script>

    <script>

        // Three models to load

        var blueModel = '5b66451915794ba8ab189e62f5f34712',

            orangeModel = '890c45a922d44c54a9736580d6b1d939',

            // Three buttons

            blueButton = document.getElementById('blueButton'),

            orangeButton = document.getElementById('orangeButton'),

            // API version

            version = '1.0.0',

            // The iframe

            iframe = document.getElementById('api-frame'),

            // Sketchfab API client object

            client = new Sketchfab(version, iframe),

            // If initialization fails, throw an error

            error = function () {

                console.error('Sketchfab API Error!');

            },

            // If initilization succeeds, start the model immediately

            success = function (api) {

                api.start();

            };

        // A function to load a model

        function loadModel(client, urlid) {

            console.log('loading a model');

            client.init(urlid, {

                success: success,

                error: error,

                preload: 1,

                autostart: 1

           });

        }



        // Listen for click events on the buttons

        blueButton.addEventListener('click', function () {

            loadModel(client, blueModel);

        });

        orangeButton.addEventListener('click', function () {

            loadModel(client, orangeModel);

        });

    </script>