Figure geometriche in 3D

**saltodifondi** · 20-04-2006, 11:23

Ciao a tutti.
dovrei trovare il metodo x costruire graficamente parallelepipedi e cubi in 3D digitando la lunghezza dei lati x,y,z in pixel. sapete se esiste qualcosa di simile?

**fcaldera** · 20-04-2006, 11:47

in solo javascript è escluso, ma forse puoi integrando con SVG
Qui ci sono degli esempi d'uso: http://www.zvon.org/HowTo/Output/index.html

oppure qui
http://xml.html.it/guide/lezione/1775/scripting/

**fcaldera** · 20-04-2006, 14:46

copia e incolla il codice e provalo su firefox 1.5 (su explorer non funziona)
salva il codice con estensione .svg

codice:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="it" xml:lang="it">
<head>
    <style type="text/css">
        /* <![CDATA[ */
            body {
                font        : 12px 'Courier New';            
            }
            
            input {
                width       : 40px;
            }
            
            #createCube {
                width       : 100px;            
            }

        /* ]]> */
    </style>
        
    <script type="text/javascript">
        // <![CDATA[

            
          function createCube3D() {
          
            var rad2 = Math.sqrt(2);
            var cx = document.getElementById('coordx').value;
            var cy = document.getElementById('coordy').value;
            var cz = document.getElementById('coordz').value;
            
            //alert(cx+'-'+cy+'-'+cz+'-'+rad2);
            //alert(parseInt((120 - (cz * rad2)), 10));
            //alert(parseInt(10 + (cz * rad2), 10));
            
            // Base superiore
            document.getElementById('bs1').setAttribute('x1', parseInt((120 - (cz * rad2)), 10) );
            document.getElementById('bs1').setAttribute('y1', parseInt(10 + (cz * rad2), 10));
            document.getElementById('bs1').setAttribute('x2', 120);
            document.getElementById('bs1').setAttribute('y2', 10);
            
            document.getElementById('bs2').setAttribute('x1', 120);
            document.getElementById('bs2').setAttribute('y1', 10);
            document.getElementById('bs2').setAttribute('x2', parseInt((120 + (cx * rad2)), 10) );
            document.getElementById('bs2').setAttribute('y2', parseInt(10 + (cx * rad2), 10));
            
            document.getElementById('bs3').setAttribute('x1', parseInt((120 + (cx * rad2)), 10) );
            document.getElementById('bs3').setAttribute('y1', parseInt(10 + (cx * rad2), 10));
            document.getElementById('bs3').setAttribute('x2', parseInt((120 + (cx * rad2)), 10) - parseInt((cz * rad2), 10) );
            document.getElementById('bs3').setAttribute('y2', parseInt(10 + (cx * rad2), 10) + parseInt((cz * rad2), 10));
            
            document.getElementById('bs4').setAttribute('x1', parseInt((120 + (cx * rad2)), 10) - parseInt((cz * rad2), 10) );
            document.getElementById('bs4').setAttribute('y1', parseInt(10 + (cx * rad2), 10) + parseInt((cz * rad2), 10));
            document.getElementById('bs4').setAttribute('x2', parseInt((120 - (cz * rad2)), 10));
            document.getElementById('bs4').setAttribute('y2', parseInt(10 + (cz * rad2), 10));
            
            // altezze
            
            document.getElementById('ht1').setAttribute('x1', parseInt((120 - (cz * rad2)), 10) );
            document.getElementById('ht1').setAttribute('y1', parseInt(10 + (cz * rad2), 10));
            document.getElementById('ht1').setAttribute('x2', parseInt((120 - (cz * rad2)), 10) );
            document.getElementById('ht1').setAttribute('y2', parseInt(10 + (cz * rad2), 10) + parseInt(cy, 10));
            
            document.getElementById('ht2').setAttribute('x1', 120);
            document.getElementById('ht2').setAttribute('y1', 10);
            document.getElementById('ht2').setAttribute('x2', 120);
            document.getElementById('ht2').setAttribute('y2', 10 + parseInt(cy, 10));
                
            document.getElementById('ht3').setAttribute('x1', parseInt((120 + (cx * rad2)), 10) );
            document.getElementById('ht3').setAttribute('y1', parseInt(10 + (cx * rad2), 10));
            document.getElementById('ht3').setAttribute('x2', parseInt((120 + (cx * rad2)), 10) );
            document.getElementById('ht3').setAttribute('y2', parseInt(10 + (cx * rad2), 10) + parseInt(cy, 10));
            
            document.getElementById('ht4').setAttribute('x1', parseInt((120 + (cx * rad2)), 10) - parseInt((cz * rad2), 10) );
            document.getElementById('ht4').setAttribute('y1', parseInt(10 + (cx * rad2), 10) + parseInt((cz * rad2), 10));
            document.getElementById('ht4').setAttribute('x2', parseInt((120 + (cx * rad2)), 10) - parseInt((cz * rad2), 10) );
            document.getElementById('ht4').setAttribute('y2', parseInt(10 + (cx * rad2), 10) + parseInt((cz * rad2), 10) + parseInt(cy, 10));
            
            // Base inferiore
            document.getElementById('bi1').setAttribute('x1', parseInt((120 - (cz * rad2)), 10) );
            document.getElementById('bi1').setAttribute('y1', parseInt(10 + (cz * rad2), 10) + parseInt(cy, 10));
            document.getElementById('bi1').setAttribute('x2', 120);
            document.getElementById('bi1').setAttribute('y2', 10 + parseInt(cy, 10));
            
            document.getElementById('bi2').setAttribute('x1', 120);
            document.getElementById('bi2').setAttribute('y1', 10 + parseInt(cy, 10));
            document.getElementById('bi2').setAttribute('x2', parseInt((120 + (cx * rad2)), 10) );
            document.getElementById('bi2').setAttribute('y2', parseInt(10 + (cx * rad2), 10) + parseInt(cy, 10));
            
            document.getElementById('bi3').setAttribute('x1', parseInt((120 + (cx * rad2)), 10) );
            document.getElementById('bi3').setAttribute('y1', parseInt(10 + (cx * rad2), 10) + parseInt(cy, 10));
            document.getElementById('bi3').setAttribute('x2', parseInt((120 + (cx * rad2)), 10) - parseInt((cz * rad2), 10) );
            document.getElementById('bi3').setAttribute('y2', parseInt(10 + (cx * rad2), 10) + parseInt((cz * rad2), 10) + parseInt(cy, 10));
            
            document.getElementById('bi4').setAttribute('x1', parseInt((120 + (cx * rad2)), 10) - parseInt((cz * rad2), 10));
            document.getElementById('bi4').setAttribute('y1', parseInt(10 + (cx * rad2), 10) + parseInt((cz * rad2), 10) + parseInt(cy, 10));
            document.getElementById('bi4').setAttribute('x2', parseInt((120 - (cz * rad2)), 10));
            document.getElementById('bi4').setAttribute('y2', parseInt(10 + (cz * rad2), 10) + parseInt(cy, 10));
            
          }
            

        // ]]>

      </script>
</head>
<body>
    <form>
    <label for="coordx">Coord X</label> <input type="text" id="coordx" value="10" />

    <label for="coordx">Coord Y</label> <input type="text" id="coordy" value="10" />

    <label for="coordx">Coord Z</label> <input type="text" id="coordz" value="10" />


    <input type="button" id="createCube" value="createCube" onclick="createCube3D()" />
    </form>

    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="300" height="300">
      <g id="basesup">
        <line id="bs1" x1="0" y1="0" x2="0" y2="0" style="stroke:rgb(99,120,150);stroke-width:1" />
        <line id="bs2" x1="0" y1="0" x2="0" y2="0" style="stroke:rgb(99,120,150);stroke-width:1" />
        <line id="bs3" x1="0" y1="0" x2="0" y2="0" style="stroke:rgb(99,120,150);stroke-width:1" />
        <line id="bs4" x1="0" y1="0" x2="0" y2="0" style="stroke:rgb(99,120,150);stroke-width:1" />

      </g>
      
      <g id="altezze">
        <line id="ht1" x1="0" y1="0" x2="0" y2="0" style="stroke:rgb(99,120,150);stroke-width:1" />
        <line id="ht2" x1="0" y1="0" x2="0" y2="0" style="stroke:rgb(99,120,150);stroke-width:1" />
        <line id="ht3" x1="0" y1="0" x2="0" y2="0" style="stroke:rgb(99,120,150);stroke-width:1" />
        <line id="ht4" x1="0" y1="0" x2="0" y2="0" style="stroke:rgb(99,120,150);stroke-width:1" />
      </g>
      
      <g id="baseinf">
        <line id="bi1" x1="0" y1="0" x2="0" y2="0" style="stroke:rgb(99,120,150);stroke-width:1" />

        <line id="bi2" x1="0" y1="0" x2="0" y2="0" style="stroke:rgb(99,120,150);stroke-width:1" />
        <line id="bi3" x1="0" y1="0" x2="0" y2="0" style="stroke:rgb(99,120,150);stroke-width:1" />
        <line id="bi4" x1="0" y1="0" x2="0" y2="0" style="stroke:rgb(99,120,150);stroke-width:1" />
      </g>
    </svg>
		
    </body>
</html>

Ciao

**saltodifondi** · 20-04-2006, 18:03

GRAZIE MA....CHE STRANO, NON SI MUOVE NULLA. E NON DA NEMMENO ERRORI DI JS

**fcaldera** · 20-04-2006, 18:21

non deve muoversi... il codice disegna solo il parallelepipedo

e, ripeto, io l'ho provato su Firefox 1.5 salvato con estensione svg

**saltodifondi** · 20-04-2006, 20:28

NO NO, INFATTI PER "NON SI MUOVE NULLA" intendevo non si vede nulla.

**fcaldera** · 20-04-2006, 21:59

posta uno screenshot della finestra se puoi... e la versione di Firefox che stai usando... io lo vedo bene.

**fcaldera** · 20-04-2006, 22:16

evt fai un "quote" del mio post e copia il codice da lì...

io lo vedo così

Discussione: Figure geometriche in 3D

Strumenti discussione

Ricerca discussione

Visualizza

Figure geometriche in 3D

Permessi di invio