Sfera che ruota

[luca1962]

Buona sera.
Voglio trovare il modo di inserire in una mia pagina web un’immagine trasformata in una sfera (e fin qui ok) che ruota. Ho provato a cercare in internet ma anche quando ho trovato degli script, poi non riesco ad applicarli.
Qualcuno mi saprebbe aiutare?
Grazie.

[alemoppo]

Sinceramente non l'ho mai fatto, però in css3 c'é la proprietà "rotation". Potresti sfruttarla per far ruotare tramite js un'immagine...

EDIT:

Non avevo letto:

The rotation property is not supported in any of the major browsers.

Ciao!

[luca1962]

Eh, si, ma e' statica, mentre io la volevo rotante.

[karl94]

La proprietà rotation ha fatto una piccola comparsa solamente in una vecchia bozza (parliamo di cinque anni fa) del box model CSS3, mai più aggiornata. Intanto il team di WebKit è riuscito a standardizzare la loro proprietà transform, descritta nella bozza del modulo relativo alle trasformazioni CSS3. È proprio quest'ultima che ha avuto successo ed è largamente implementata.
La sola rotazione sul piano non è però sufficiente per ottenere la proiezione prospettica di una sfera, si potrebbe usare le funzioni di trasformazione tridimensionali ma sarebbe comunque difficile da gestire in quanto per ottenere una sfera decente serve qualche decina di poligoni (e dunque elementi HTML). La cosa migliore sarebbe usare la tecnologia WebGL, ma non è ancora largamente diffusa e necessita di hardware non sempre presente. Le altre alternative sono: disegnare la sfera su un canvas (magari usando librerie già pronte) o appoggiarsi ad un plugin esterno (Flash o Java).

Esattamente quali sono le tue esigenze?

Aggiornamento:
Se vuoi che ruoti basta modificare mediante uno script la matrice di rotazione costantemente (vale per tutte le proposte che ti ho esposto).

[alemoppo]

beh sìsì, io dicevo di farlo tramite (ad esempio) la setInterval(), modificando ogni volta l'attributo (aumentando i gradi se vuoi farlo in senso orario). Oppure con la .animate() di jQuery. Però quella proprietà non è supportata, quindi niente.

Ciao!

EDIT: preceduto, ma lascio :P

[luca1962]

Per essere piu' chiaro, vorrei un effetto come questo http://flash.html.it/movie/demo/897/globo/ o http://flash.html.it/movie/demo/879/sfera-3d/ dove ovviamente il"contenuto della sfera", lo metto io. Ad esempio potrei mettere sulla superficie della sfera, una faccia.

[alemoppo]

Da quanto ne so io, per adesso la miglior cosa è usare flash, purtroppo.
Se ho capito bene, quello che cerchi di fare è una cosa 3d. Con le canvas si potrebbe fare qualcosa, ma come detto sopra da karl non è largamente supportato (e tra l'altro, mi sa che non è nemmeno banale).

L'ultima immagine, penso che con una decina di fotogrammi in sequenza si riesca a fare (perché penso siano periodici).

Ciao!

[karl94]

Deve essere un qualcosa con il quale l'utente può interagire? Se è una banale animazione esistono le immagini animate: le vecchie GIF animate (che però ti concedono solamente 256 colori) o le più moderne APNG (poco supportate purtroppo).
Scomodare Flash Player per una banale animazione mi sembra eccessivo...

[luca1962]

Deve essere un qualcosa con il quale l'utente può interagire?

Infatti, e' quello che mi serve per scegliere il soggetto e le dimensioni!

[karl94]

Soggetto? Dimensioni? Non comprendo, puoi specificare cosa esattamente intendi creare? Altrimenti è impossibile suggerirti l'alternativa maggiormente adatta.

[luca1962]

Trasformare un'immagine in una sfera, e in questo non ho problemi, e poi far girare la sfera: tutto qui.

[karl94]

E come la trasformi tu?

[luca1962]

Ho un programma che trasforma un'immagine quadrata o rettangolare e quindi piatta in una sfera. Pensavo che la sfera ottenuta fosse la partenza per creare l'effetto rotazione.

[karl94]

Ma la rotazione la vuoi bidimensionale o tridimensionale? Attorno a quale asse dovrebbe ruotare?

[luca1962]

Dunque da una pagina ho ricavato questo codice:

<object type="application/x-shockwave-flash" data="/flash_movie/3danacar_by_gm.swf" width="500" height="400">
<param name="movie" value="/flash_movie/3danacar_by_gm.swf" />
<param name="quality" value="high" />
</object>

Sostituendo a "/flash_movie/3danacar_by_gm.swf" , appare l'immagine ma statica come fosse una qualsiasi immagine di internet.
Java l'ho installato. Devo installare anche flash?
Cosa mi manca da fare o che modifiche devo apportare?
Grazie.

[karl94]

Cerca di rispondere alle mie domande!
Il codice che hai inserito tu in quel modo serve solo ad inserire un'immagine statica.

[luca1962]

Ma la rotazione la vuoi bidimensionale o tridimensionale? Attorno a quale asse dovrebbe ruotare?

Possibilmente tridimensionale e rotazione attorno all'asse principale cioe' quello verticale.

[karl94]

Bene, e deve ruotare a velocità costante? In che verso? L'immagine disegnata sulla sfera è statica? L'utente può interagire con l'animazione? Se sì, come?

[luca1962]

Velocita' costante con rotazione antioraria, l'immagine disegnata sulla sfera e' fissa e la velocita' e il senso di rotazione sono fissi e non si possono cambiare se non da parte mia. In sintesi come un mappamondo o una trottola.

[luca1962]

Ringrazio chi ha tentato di aiutarmi, sopprattutto karl, ma il problema l'ho risolto col programma GIMP scaricabile gratuitamente da internet. Questo programma fa anche l'effetto Globo che ruota; dopo aver impostato i vari parametri, salvo con estensione .gif e carico nella pagina web come una normale immagine.
Ce l'ho fatta!

[karl94]

È proprio una delle cose che ti abbiamo proposto (usare una GIF animata), l'unico problema delle GIF è però (come ho scritto prima) il ristretto numero di colori.
Si può chiudere?

[luca1962]

Si, certo, puoi chidere.
Nel caso qualche utente avesse domande in merito, so come aiutarlo!