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 jobb oldali listán az utóbbi időben megnyitott projektek nevei láthatók.
• Amennyiben az egeret egy projekt nevére húzzuk, a jobb szélen megjelenik egy fogaskerék ikon, amire kattintva egy menü jelenik meg a lehetséges funkciókról (pl. projekt megnyitása, levétel a listáról, stb.).
• A jobb felső gombokkal indíthatunk új projektet, valamint megnyithatunk már létezőt. Akár verziókövető (VCS) rendszerből közvetlenül is letölthetünk projektet.

A 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.

A Location mezőben adjuk meg a projekt mappa elérési útvonalát. Létező mappát nem választhatunk, újat kell megadni. Célszerű az "untitled" helyett beszédesebb nevet választani.

A korábbi verziókhoz képest újdonság, hogy további beállítási lehetőségeket is kapunk.A Create Git Repository kapcsolót kapcsoljuk ki, ha nem akarjuk verziókövető rendszerbe feltölteni a projekt fájljait. A Language az alapértelmezett JavaScript legyen. Tippekkel ellátott minta projekre sincs szükségünk.

Szintén újdonság, hogy a WebStorm működéséhez a Node.js keretrendszer telepítését kéri. Erre a példatárhoz nem lesz szükségünk, így az alapértelmezett beállításokkal megfelelő a telepítést elindítani.

Új, üres projekt esetén a Projekt nézetet kapjuk a bal oldali panelen, összecsukott mappa állapotban.

Egy becsukott mappát a neve előtt szereplő > (nagyobb kacsacsőr) jel jelez. A jelre kattintva a tartalma "kinyílik", lefelé mutató nyílra változik. Erre kattintva pedig a mappa újra becsukható.

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 WebStormon 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 ide.

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! Célszerű lehet a mappanév végére odaírni, melyik Three.js verziót tartalmazzák a fájlok (pl. js-r143).
• Ide másoljuk be a Three.js build mappáját, ami tartalmazza a three.module.js fájlt.
• Szükség esetén hozzuk létre az examples/jsm almappát, azon belül pedig a controls, loaders, libs, helpers almappákat, és másoljuk be a Three.js examples/jsm almappáiból a szükséges kiegészítő fájlokat! Mivel a modulok csomagnevekkel hivatkoznak egymásra, így nem szükséges az eredeti mappaszerkezet megtartása, de az egyszerűbb áttekinthetőség miatt célszerű lehet.
• Összetettebb programok esetén további JavaScript források bemásolása is szükséges lehet!

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

• Kattintsunk jobb egérgombbal a projekt nevén a bal oldali Project panelen, és válasszuk a New > HTML File opciót.
• 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 egy projekten belül kezelhetjük a félév során előforduló példaprogramokat.

A mappastruktúra is megjelenik a projekt nézetben.