Skip navigation

WebStorm projekt készítése

Indítás

A WebStorm indításakor az utolsó állapotot állítja vissza: ha volt megnyitott projekt, akkor közvetlenül azt látjuk a szerkesztőben. Első indításkor, valamint kilépés előtt bezárt projekt esetén az indítóképernyőt látjuk.

  • A bal oldali listán az utóbbi időben megnyitott projektek nevei láthatók.
  • A jobb oldali panelen indíthatunk új projektet, valamint megnyithatunk már létezőt. Akár VCS rendszerből közvetlenül is letölthetünk projektet.

Új projekt készítése

A Create New Project gombra kattintva új projektet indíthatunk. A megjelenő dialógusablakban kiválaszthatjuk a projekt típusát (számos keretrendszert ismer és támogat a WebStorm), valamint meg kell adnunk a projekt elérési útvonalát.

A Three.js munkákhoz célszerű az üres projektsablont (Empty Project) választani.

Projekt nézetének beállítása

Üres projekt esetén kezdetben nem mutat semmit a szerkesztő. A bal alsó sarokban lévő gombra mozgatva az egérkurzort válthatunk a különféle nézetek között. Első nekifutásra válasszuk ki a Project feliratút.

Üres projekt konfigurálása

Az üres projekt – nevéhez illően – nem tartalmaz semmit, nekünk kell létrehozni a szükséges struktúrát. Ezt legegyszerűbb a WebStromon kívül, fájlböngészővel végezni.

Ha a jegyzet példaprogramjait szeretnénk kipróbálni, az új projekt mappába a nyitóoldalról letölthető példaprogramtár tartalmát csomagoljuk ki.

Egyébként új projekt kezdésekor az alábbi lépéseket végezzük el.

  • A projekt mappán belül hozzunk létre egy js nevű almappát!
  • Ide másoljuk be a three.js, stats.min.js, dat.gui.min.js, OrbitControls.js, valamint a TrackballControls.js fájlokat a Three.js forráscsomagból.

Adjunk hozzá új HTML fájlt a projekthez a WebStorm segítségével.

  • File / New / HTML File. Adjunk neki nevet (pl. First.html), valamint HTML 5 típust válasszunk a listából.
  • Írjuk meg a forráskódot, vagy másoljunk át egy már létező kódot!

Egy WebStorm projekt több HTML forráskódot is tartalmazhat, így akár egy projekten belül kezelhetjük a félév során előforduló példaprogramokat.

Three.js programok futtatása, nyomkövetése WebStorm környezetben

Programok futtatását, nyomkövetését többféle módon végezhetjük.

  • Run / Run... menüpont.
  • A legutóbb indított fájlok nevei elérhetők a felső panel jobb oldali részén található listában. A zöld háromszög az aktuális program futtatását, a bogár ikon a nyomkövetés indítását jelenti. Az eredményt az alapértelmezett böngészőben fogjuk látni.
  • Az alapértelmezett programot a Shift+F10 billentyűkombinációval is indíthatjuk.
  • Ha az egérrel közelítünk a szerkesztőablak jobb felső sarka felé, ott megjelennek a rendszerben elérhető böngészők ikonjai. A kiválasztottra kattintva a szerkesztőablakban megnyitott program kerül megnyitásra a kiválasztott böngészőben.
  • Ha a Project panel az aktív, a Project listában aktuálisan kiválasztott programot a CTRL+Shift+F10 billentyűkombinációval futtathatjuk. Ha szerkesztőablakban vagyunk, akkor az ott megnyitott program indul.

További futtatási és nyomkövetési információk külön oldalon kerülnek ismertetésre!