Tutorials

Creating a rotate slider

You can rotate the 3D map with the mouse right button or with a multi touch two finger combination. But if You need to make Your own interface there is a little how to:

We will now create a slider to rotate the camera.
First, we must create a slider control in the body.

<input id="rotationSlider" type="range" min="0" max="1" step="0.01"></input>

Then in the main function we add the following. This makes it so, that a function is called when we change the value of the slider. 

$('#rotationSlider').change(changeRotation);

And now we create the changeRotation function to be called. Wayfinder has a component called orbitController, which is the camera we use to look at the floor plan. We can manually set the rotation of the camera from code by accessing the orbitController’s rotation with wayfinder.orbitController.rotation.
This rotation has three components: pitch, yaw and roll.

We use the slider value as a multiplier between 0 and 2Ï€ and use it to set the yaw of the camera.

function changeRotation() {
    var val = parseFloat($('#rotationSlider').val());
    wayfinder.orbitController.rotation[1] = Math.PI * 2.0 * val;
}

Full example code 

<html>
    <body>
        <canvas id="map" width="1024" height="768"></canvas>
        <div style="float:right; position:relative; top:50%; transform:translateY(-50%);">
            <input id="rotationSlider" type="range" min="0" max="1" step="0.01"></input>
        </div>
        <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        <script src="//cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.11/jquery.mousewheel.min.js"></script>
        <script src="//static.3dwayfinder.com/projects/shared/js/minified/frak-stable.min.js"></script>
        <script src="//static.3dwayfinder.com/js/dist/3d/latest/Wayfinder3D.min.js"></script>
        <script type="text/javascript">
            var wayfinder = false;
            function changeRotation() {
                var val = parseFloat($('#rotationSlider').val());
                wayfinder.orbitController.rotation[1] = Math.PI * 2.0 * val;
            }
            $(function() {  // Make sure the document is loaded, aka the "main" function
                wayfinder = new Wayfinder3D();
                wayfinder.open();
                $('#rotationSlider').change(changeRotation);
            });
        </script>
    </body>
</html>