diff --git a/js/importMenu.js b/js/importMenu.js index f4257250ac2955788e57929bf73921a8222bb5f0..9c447ef5999f367a02877936a309cd9286db0746 100644 --- a/js/importMenu.js +++ b/js/importMenu.js @@ -19,6 +19,7 @@ $(function(){ modelMesh = new THREE.Mesh(geometry); three.scene.add(modelMesh); three.render(); + showDimensions(1); $("#STLImportStats").fadeIn(); }); @@ -63,10 +64,35 @@ $(function(){ modelScaleSlider.change(function(){ var value = $(this).slider('getValue'); modelMesh.scale.set(value,value,value); + showDimensions(value); three.render(); }); function setFileName(name){ $("#STLFilename").html("Current file loaded:  "+name); } + + function showDimensions(scale){ + var boundingBox = modelMesh.geometry.boundingBox; + $("#meshDimensions").html("Dimensions: " + ((boundingBox.max.x - boundingBox.min.x)*scale).toFixed(1) + " x " + + ((boundingBox.max.y - boundingBox.min.y)*scale).toFixed(1) + " x " + ((boundingBox.max.z - boundingBox.min.z)*scale).toFixed(1)); + } + + $("#stlRotateX").click(function(e){ + e.preventDefault(); + modelMesh.rotateX(Math.PI/2); + three.render(); + }); + + $("#stlRotateY").click(function(e){ + e.preventDefault(); + modelMesh.rotateY(Math.PI/2); + three.render(); + }); + + $("#stlRotateZ").click(function(e){ + e.preventDefault(); + modelMesh.rotateZ(Math.PI/2); + three.render(); + }); }); \ No newline at end of file diff --git a/main.html b/main.html index c5ea649b39eb15429aee4ddab8b603d7c5a253c4..f8c5f130962784ae6cb900af0a30e8d87c101715 100644 --- a/main.html +++ b/main.html @@ -98,10 +98,19 @@ </div><!-- /btn-group --> </div> </div> <!-- /.col-xs-3 --> - <div id="STLImportStats" class="col-xs-8"> - <div id="STLFilename"></div><br/>Dimensions:<br/> - Change model scale: + <div id="STLImportStats" class="col-xs-9"> + <div id="STLFilename"></div><br/><div id="meshDimensions"></div> + <div>Change model scale:</div> <input id="stlModelScale" type="text" data-slider-min="0.0" data-slider-max="20" data-slider-step="0.1" data-slider-value="1"/> + <div class="col-xs-4"> + <a href="#" id="stlRotateX" class="btn btn-block btn-lg btn-default">Rotate X</a> + </div> + <div class="col-xs-4"> + <a href="#" id="stlRotateY" class="btn btn-block btn-lg btn-default">Rotate Y</a> + </div> + <div class="col-xs-4"> + <a href="#" id="stlRotateZ" class="btn btn-block btn-lg btn-default">Rotate Z</a> + </div> </div> </div> </div>