Sketchfab Forum

Need to rotate canopy from actual position

(Stefan Lengyel) #1

Hey guys,

can someone help me to rotate node in my scene?
I'am using rotate(); and can't figure out how to do side rotation from actual position on canopy in my scene.

Maybe i need to do it with setMatrix(glMatrix); but when i see these numbers i get headache :smile:

See the Pen Sketchfab API test by Stefan (@HeJabko) on CodePen.

<html>
<head>
<meta charset="UTF-8">
<title>Sketchfab Viewer API</title>

<script type="text/javascript" src="https://static.sketchfab.com/api/sketchfab-viewer-1.0.1.js"></script>

<style >
    
    * {
        margin: 0;
        padding: 0;
    }

    #container {
        width: 800px;
        margin: 100px auto;
    }

    #slider {
        position: relative;
        top: -540px;
        left: 30px;
        z-index: 1;
    }

    #placeHolder {
        position: relative;
        top: -540px;
        left: 35px;
        z-index: 1;
        color: white;
        font-size: 2.5em;
        text-align: center;
        width: 15%;
    }

    #slider2 {
        position: relative;
        top: -540px;
        left: 30px;
        z-index: 1;
    }

    #placeHolder2 {
        position: relative;
        top: -540px;
        left: 35px;
        z-index: 1;
        color: white;
        font-size: 2.5em;
        text-align: center;
        width: 15%;
    }

</style>
</head>

<body>
   
<div id="container">

    <iframe src="" id="api-frame" allowfullscreen mozallowfullscreen="true" webkitallowfullscreen="true" width="800" height="600"></iframe>

    <input id="slider" type="range" min="0" max="360" value="0" step="0.1">
    <div id="placeHolder">0</div>

    <input id="slider2" type="range" min="0" max="360" value="0" step="0.1">
    <div id="placeHolder2">0</div>



</div>

<script type="text/javascript">
var iframe = document.getElementById( 'api-frame' );
var version = '1.0.0';
var urlid = '5e888f8b4b4747428c58a0cdbd03ba31';
var client = new Sketchfab( version, iframe );

var placeHolder = document.getElementById('placeHolder');
var rangeInput  = document.getElementById('slider');

var placeHolder2 = document.getElementById('placeHolder2');
var rangeInput2  = document.getElementById('slider2');

var degToRad;

client.init( urlid, {
    success: function onSuccess( api ){
        api.start();

        api.addEventListener( 'viewerready', function() {
            api.getNodeMap(function(err, nodes) {
                if(!err){
                    console.log(nodes);
                }
            });
            api.getMatrix( 628, function(err, matrices) {
                console.log(matrices);
            });

        });
        

        rangeInput.addEventListener('input', function() {
            
            placeHolder.textContent = rangeInput.value;
            degToRad = rangeInput.value / 57.2958;
            
            api.rotate(610, [degToRad, 0, 1, 0], 0, "easeOutQuad");
            api.rotate(528, [degToRad, 0, 1, 0], 0, "easeOutQuad");
            api.rotate(420, [degToRad, 0, 1, 0], 0, "easeOutQuad");


        });

         rangeInput2.addEventListener('input', function() {
            
            placeHolder2.textContent = rangeInput2.value;
            degToRad = rangeInput2.value / 57.2958;
            
            api.rotate(610, [degToRad, 1, 0, 0], 0, "easeOutQuad");
            api.rotate(528, [degToRad, 1, 0, 0], 0, "easeOutQuad");
            api.rotate(420, [degToRad, 1, 0, 0], 0, "easeOutQuad");


        });

    },
    error: function onError() {
        console.log( 'Viewer error' );
    }
} );
</script>
</body>
</html>
(Stefan Lengyel) #2

Why these node numbers are always changing?

#3

The node numbers are not permanent and can change each time the viewer loads. You'll need to parse them by name each time and define variables for the nodes.

Some super quick and dirty code:

var object_1_name = "OBJECT_1";
var object_2_name = "OBJECT_2";
var object_1_node;
var object_2_node;

...
...

api.getNodeMap( function ( err, nodes) {
    if ( !err ) {
        for ( var node in nodes ) {
            if ( nodes.hasOwnProperty( node ) ) {
                if ( nodes[ node ].name === object_1_name ) {
                    object_1_node = nodes[ node ].instanceID;
                } else if ( nodes[ node ].name === object_2_name ) {
                    object_2_node = nodes[ node ].instanceID;
                }
            }
        }
    }
});

...
...

api.rotate( object_1_node, [degToRad, 0, 1, 0], 0, "easeOutQuad" );

I don't have much experience using the setMatrix() function. Maybe @shaderbytes or @klaasnienhuis has a demo?

(Stefan Lengyel) #4

Thank you James.

(Stefan Lengyel) #5

Works! you are genius :smile:

but i need to point one change in if statement

if (nodes[node].name === kabina && nodes[node].type === "MatrixTransform") { ............
need to be MatrixTransform for rotation.




Sketchfab Viewer API

    <script type="text/javascript" src="https://static.sketchfab.com/api/sketchfab-viewer-1.0.1.js"></script>

    <style >
        
        * {
            margin: 0;
            padding: 0;
        }

        #container {
            width: 800px;
            margin: 100px auto;
        }

        #slider {
            position: relative;
            top: -540px;
            left: 30px;
            z-index: 1;
        }

        #placeHolder {
            position: relative;
            top: -540px;
            left: 35px;
            z-index: 1;
            color: white;
            font-size: 2.5em;
            text-align: center;
            width: 15%;
        }

        #slider2 {
            position: relative;
            top: -540px;
            left: 30px;
            z-index: 1;
        }

        #placeHolder2 {
            position: relative;
            top: -540px;
            left: 35px;
            z-index: 1;
            color: white;
            font-size: 2.5em;
            text-align: center;
            width: 15%;
        }

    </style>
</head>

<body>
   
    <div id="container">

        <iframe src="" id="api-frame" allowfullscreen mozallowfullscreen="true" webkitallowfullscreen="true" width="800" height="600"></iframe>

        <input id="slider" type="range" min="0" max="360" value="0" step="0.1">
        <div id="placeHolder">0</div>

        <input id="slider2" type="range" min="0" max="360" value="0" step="0.1">
        <div id="placeHolder2">0</div>


    
    </div>
    
    <script type="text/javascript">
    var iframe = document.getElementById( 'api-frame' );
    var version = '1.0.0';
    var urlid = '5e888f8b4b4747428c58a0cdbd03ba31';
    var client = new Sketchfab( version, iframe );

    var placeHolder = document.getElementById('placeHolder');
    var rangeInput  = document.getElementById('slider');

    var placeHolder2 = document.getElementById('placeHolder2');
    var rangeInput2  = document.getElementById('slider2');

    var degToRad;

    var kabina        = "kabina";
    var	skloInverted  = "sklo1_inverted";
    var	sklo          = "sklo1";

    var kabinaNode;
    var	skloInvertedNode;
    var	skloNode;	

    client.init( urlid, {
        success: function onSuccess( api ){
            api.start();

            api.addEventListener( 'viewerready', function() {
                api.getNodeMap(function(err, nodes) {
                    if(!err){
                        console.log(nodes);
                        for (var node in nodes) {
                        	if (nodes.hasOwnProperty(node)) {
                        		if (nodes[node].name === kabina && nodes[node].type === "MatrixTransform") {
                        			kabinaNode = nodes[node].instanceID;
                        		} else if (nodes[node].name === skloInverted && nodes[node].type === "MatrixTransform") {
                        			skloInvertedNode = nodes[node].instanceID;
                        		} else if (nodes[node].name === sklo && nodes[node].type === "MatrixTransform") {
                        			skloNode = nodes[node].instanceID;
                        		}
                        	}
                        }
                    }

                    console.log(kabinaNode);
                    console.log(skloInvertedNode);
                    console.log(skloNode);


                });

                api.getMatrix( 628, function(err, matrices) {
                    console.log(matrices);
                });

            });
            

            rangeInput.addEventListener('input', function() {
                
                placeHolder.textContent = rangeInput.value;
                degToRad = rangeInput.value / 57.2958;
                
                api.rotate(kabinaNode,       [degToRad, 0, 1, 0], 0, "easeOutQuad");
                api.rotate(skloInvertedNode, [degToRad, 0, 1, 0], 0, "easeOutQuad");
                api.rotate(skloNode,         [degToRad, 0, 1, 0], 0, "easeOutQuad");


            });

             rangeInput2.addEventListener('input', function() {
                
                placeHolder2.textContent = rangeInput2.value;
                degToRad = rangeInput2.value / 57.2958;
                
                api.rotate(kabinaNode,       [degToRad, 1, 0, 0], 0, "easeOutQuad");
                api.rotate(skloInvertedNode, [degToRad, 1, 0, 0], 0, "easeOutQuad");
                api.rotate(skloNode,         [degToRad, 1, 0, 0], 0, "easeOutQuad");


            });

        },
        error: function onError() {
            console.log( 'Viewer error' );
        }
    } );
    </script>
</body>
</html>