Calculate Area using ThreeJS

0

I'm introducing myself to ThreeJS. And I'm creating an Uploader, that uploads a "stl" file and tells me the measurements, since, those models I need them to calculate a price of a 3D printing for it, I need that data.

Thanks in advance.

    <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('image/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>
    
asked by Tone RV 24.09.2018 в 11:59
source

0 answers