Come creare un logo animato 3D in Javascript

April 12

Utilizzare la funzione setInterval di JavaScript per creare un logo animato 3-D in un programma che visualizza le immagini logo fatte in un'applicazione di modellazione 3-D. La funzione setInterval funziona chiamando ripetutamente una funzione specificata nel primo argomento al momento specificato nel secondo argomento. Questo intervallo è impostato in millisecondi, quindi se si vuole un mezzo secondo intervallo tra ogni fotogramma, inserire "500" per questo argomento. Per rendere l'animazione del logo più liscia, utilizzare il programma di modellazione 3-D per creare altre immagini per il programma da animare.

istruzione

1 Aprire un'applicazione di modellazione 3-D come Blender, Sketchup o AutoCAD. Utilizzare lo strumento di testo del programma per creare un logo 3-D. Leggere file di aiuto del vostro programma per le istruzioni dettagliate.

2 Salvare il logo come "logo1.jpg", quindi utilizzare lo strumento "Orbit" del vostro programma per ruotare il punto di vista in cui si sta visualizzando il logo. Salvare il logo con il nome del file "logo2.jpg", quindi ruotare di nuovo il punto di vista. Salvare il logo come "logo3.jpeg."

3 Aprire WordPad o un altro editor di testo. Incollare nella seguente pagina Web vuota. Queste dichiarazioni forniscono un quadro in cui installare un programma JavaScript per animare il vostro logo:

<Html>
<Head>
</ Head>
<Body>
<Img id = "TheLogos" name = "TheLogos" src = "logo1.jpg">
</ Body>
</ Html>

4 Incollare il codice seguente dopo il tag "<head>". Queste dichiarazioni definiscono un programma JavaScript che consente di visualizzare le immagini create a intervalli di tempo regolari per produrre l'effetto di un logo animato:

<Script type = "text / javascript">
var imgIndex = 1;
var = LOGO1 nuova immagine ();
logo1.src = "logo1.jpg";
var = logo2 nuova immagine ();
logo2.src = "logo2.jpg";
var = logo3 nuova immagine ();
logo3.src = "LOGO3.jpg";
Funzione animateImage (x)
{
if (imgIndex == 4)
{
imgIndex = 1;
}
var src_of_image = "logo" + imgIndex + ".jpg";
document.TheLogos.src = src_of_image;
imgIndex ++;
}
t = setInterval ( "animateImage (imgIndex)", 500);
</ Script>

5 Salvare la pagina Web nello stesso documento in cui è stato salvato le immagini del logo 3-D. Aprire il browser Web, quindi fare clic sul menu "File". Fare clic sul comando "Apri", quindi individuare e fare doppio clic sulla pagina Web è stato salvato. Il browser aprirà la pagina ed eseguire il programma JavaScript. Nell'estratto filatura logo animazione.