Upload and Calculate Area from STL File

Questions
1

Good afternoon

I’m new to Three.js and I wanted to know if they could help me out. I’m doing a small project, where uploading an STL file, I need to calculate the area and volume of the object.

I’ve only been able to create what would be the file manager with the scene. I attached the code.

<script src="js/jquery.min.js"></script>
<link rel="stylesheet" href="js/jcrop/jquery.Jcrop.css" type="text/css" />
<link rel="stylesheet" href="js/modal/jquery.modal.css" type="text/css" media="screen" />
<!-- scripts plugins -->
	<!-- canvasresize-->
	<script src="js/threejs/three.min.js"></script>
	<script src="js/threejs/OrbitControls.js"></script>
	<script src="js/canvasresize/binaryajax.js"></script>
	<script src="js/canvasresize/exif.js"></script>
	<script src="js/canvasresize/canvasResize.js"></script>
	<!-- jcrop -->
	<script src="js/jcrop/jquery.Jcrop.min.js" type="text/javascript"></script>
	<!-- modal-->
	<script src="js/modal/jquery.modal.js" type="text/javascript" charset="utf-8"></script>
	<title>Uploader 3D</title>
	<h1>Suba su modelo en 3D!</h1>
<center>
<img class="email-avatar" id="img_front" height="64" width="64" src="48px-Image_upload-tango.png">
</center>
<div id="render"></div> 
        <div id="popup" class="popup" style="display: none;width: 714px; height: 536px;">
				<img src="" id="target" alt="Flowers" />
				<button  onclick="javascript:$.modal.close();"  class="pure-button primary-button" id="Ready">Ready</button>
		</div>
<script>
	// icon image search
	jQuery(document).ready(function($){
	Iconcontroller('img_front',150,150,1);
	});
	
</script>
<script>
			/******************************* variables *******************/
			//Preparamos el render
			var Render=new THREE.WebGLRenderer();
			//El escenario
			var Escenario=new THREE.Scene();
			// la Figura 
			var Figura;
			var controls;
			var Ancho=window.innerWidth-15;
			var Alto=window.innerHeight-10;
			var Angulo = 45;	
			var Aspecto=Ancho/Alto;
			var cerca=0.1;
			var lejos=10000;
			//La cámara
			var Camara=new THREE.PerspectiveCamera(Angulo,Aspecto,cerca,lejos);
			/******************************* inicio *******************/
			function inicio(){
					//Tamaño del render(resultado)
					Render.setSize(Ancho,Alto);
					//Se agrega el render al documento html
					document.getElementById('render').appendChild(Render.domElement);
					//Acercamos la cámara en z es profundidad para ver el punto
					Camara.position.z=1500;
					//agregando la cámara al escenario
					Escenario.add(Camara);
					// Territorio 
					crear_plano();
				
					// agregamos todo el escenario y la cámara al render
					controls=new THREE.OrbitControls(Camara,Render.domElement);
			}
			
			function crear_plano(){
					//Geometría del plano
					Geometria_plano=new THREE.PlaneGeometry(1000,1000,10,10);
					//Textura
					Textura_plano=new THREE.ImageUtils.loadTexture("cesped.jpg");
					Textura_plano.wrapS=Textura_plano.wrapT=THREE.RepeatWrapping;
					Textura_plano.repeat.set(10,10);
					// Material y agregado la textura
					Material_plano=new THREE.MeshBasicMaterial({map:Textura_plano,side:THREE.DoubleSide});
					// El plano (Territorio)
					Territorio=new THREE.Mesh(Geometria_plano,Material_plano);
					Territorio.rotation.y=-0.5
					Territorio.rotation.x=Math.PI/4;


					Escenario.add(Territorio);
			}
			function animacion(){
					requestAnimationFrame(animacion);
					render_modelo();
			}
			function render_modelo(){
					controls.update();
					
					Render.render(Escenario,Camara);
			}
			/**************************llamado a las funciones ******************/
			// load function
			jQuery('#Ready').click(function() {
			var	data_image_1=$('#img_front_CANVAS_PREVIEW')[0].toDataURL(' /png');
			
			if($('#img_front_FILES_INPUT').val()!=''){
								Territorio.material.map=new THREE.ImageUtils.loadTexture( data_image_1 );
								
			}
			});
			inicio();
			animacion();
	</script>
<script src="js/tools/tools-picker_big.js"></script>
2

I would suggest approaching this in three steps:

(1) load an STL model from a local file (see this example)
(2) calculate area of the mesh (see https://stackoverflow.com/questions/30878461/calculating-the-volume-of-a-mesh-in-threejs-is-greater-than-bounding-box-volume)
(3) allow user to “upload” their own model once the other two are working

I think (2) is likely to be the difficult one, you mean “surface area” and volume, right?

1 Like
4

Yes, I need the area and volume to be able to print the model in 3D on a printer