<table width="500" height="500" align="center" class="colorborder"> <tr> <td width="500" height="500" class="colorborder"> <div id="v3D3stl_cont" style="width:500px;height:500px;margin:0 auto;"></div></td> </tr> <tr><td align="center"> <input id="v3D3checkSym" type="checkbox" />start </td></tr> <tr><td align="center"> 1: <input type="range" id="v3D3radius" max="400" min="0" value="0" oninput="{document.getElementById('v3D3spanradius').innerHTML = document.getElementById('v3D3radius').value; v3D3TrackBar1Position = document.getElementById('v3D3radius').value;}" /> <span id="v3D3spanradius">30</span> </td></tr> <tr><td align="center"> 2: <input type="range" id="v3D3size" max="400" min="0" value="0" oninput="{document.getElementById('v3D3spansize').innerHTML = document.getElementById('v3D3size').value; v3D3TrackBar2Position = document.getElementById('v3D3size').value;}" /> <span id="v3D3spansize">30</span> </td></tr> <tr><td align="center"> 3: <input type="range" id="v3D3count" max="400" min="0" value="0" oninput="{document.getElementById('v3D3spancount').innerHTML = document.getElementById('v3D3count').value; v3D3TrackBar3Position = document.getElementById('v3D3count').value;}" /> <span id="v3D3spancount">0</span> </td></tr> <tr><td align="center"> 4: <input type="range" id="v3D3noise" max="400" min="0" value="0" oninput="{document.getElementById('v3D3spannoise').innerHTML = document.getElementById('v3D3noise').value; v3D3TrackBar4Position = document.getElementById('v3D3noise').value;}" /> <span id="v3D3spannoise">0</span> </td></tr> <tr><td align="center"> 5: <input type="range" id="v3D3speed" max="400" min="0" value="0" oninput="{document.getElementById('v3D3spanspeed').innerHTML = document.getElementById('v3D3speed').value; v3D3TrackBar5Position = document.getElementById('v3D3speed').value;}" /> <span id="v3D3spanspeed">0</span> </td></tr> </table> <script> var v3D3TrackBar1Position = 0.0; var v3D3TrackBar2Position = 0.0; var v3D3TrackBar3Position = 0.0; var v3D3TrackBar4Position = 0.0; var v3D3TrackBar5Position = 0.0; function v3D3load_prog() { v3D3stl_viewer.set_scale(0, 0.95); v3D3stl_viewer.set_scale(1, 0.96); v3D3stl_viewer.set_scale(2, 0.98); v3D3stl_viewer.set_scale(3, 0.97); v3D3stl_viewer.set_scale(4, 0.99); v3D3stl_viewer.set_color(0, "#C7C7C7"); v3D3stl_viewer.set_color(1, "#64B4F3"); v3D3stl_viewer.set_color(2, "#F3647A"); v3D3stl_viewer.set_color(3, "#64F36F"); v3D3stl_viewer.set_color(4, "#EFF364"); v3D3stl_viewer.set_position(0, 0.0, 0.0, 0.0); v3D3stl_viewer.set_position(1, 0.0, 0.0, 0.0); v3D3stl_viewer.set_position(2, 0.0, 0.0, 0.0); v3D3stl_viewer.set_position(3, 0.0, 0.0, 0.0); v3D3stl_viewer.set_position(4, 0.0, 0.0, 0.0); // var v3D3timer = setInterval(v3D3fSortAnimver, 40); function v3D3fSortAnimver() { v3D3stl_viewer.set_position(0, 0.0, (v3D3TrackBar1Position-150)/10, 0.0); v3D3stl_viewer.set_position(1, 0.0, (v3D3TrackBar2Position-150)/10, 0.0); v3D3stl_viewer.set_position(2, 0.0, (v3D3TrackBar3Position-150)/10, 0.0); v3D3stl_viewer.set_position(3, 0.0, (v3D3TrackBar4Position-150)/10, 0.0); v3D3stl_viewer.set_position(4, 0.0, (v3D3TrackBar5Position-150)/10, 0.0); if (document.getElementById('v3D3checkSym').checked) { v3D3stl_viewer.rotate(0, 0.0, 0.25*3.141528/180.0, 0.0); v3D3stl_viewer.rotate(1, 0.0, 0.25*3.141528/180.0, 0.0); v3D3stl_viewer.rotate(2, 0.0, 0.25*3.141528/180.0, 0.0); v3D3stl_viewer.rotate(3, 0.0, 0.25*3.141528/180.0, 0.0); v3D3stl_viewer.rotate(4, 0.0, 0.25*3.141528/180.0, 0.0); } } } </script> <script src="/public/htmlsputnik/stl_viewer.min.js"></script> <script> var v3D3fileelka1 = "/public/htmlsputnik/elkac1.stl"; var v3D3fileelka2 = "/public/htmlsputnik/elkac2.stl"; var v3D3fileelka3 = "/public/htmlsputnik/elkac3.stl"; var v3D3fileelka4 = "/public/htmlsputnik/elkac4.stl"; var v3D3fileelka5 = "/public/htmlsputnik/elkac5.stl"; var v3D3stl_viewer=new StlViewer ( document.getElementById("v3D3stl_cont"), { all_loaded_callback:v3D3load_prog, models: [ {id:0, filename: v3D3fileelka1 }, {id:1, filename: v3D3fileelka2 }, {id:2, filename: v3D3fileelka3 }, {id:3, filename: v3D3fileelka4 }, {id:4, filename: v3D3fileelka5 } ] } ); </script>