Než začneme
V tomto článku bychom vytvořili toto, 3D Tesla Cybertruck, který lze řídit pomocí kláves se šipkami a kláves WASD ve vašem prohlížeči. Tento projekt bychom budovali s pomocí RV-Engine, což je prohlížeč Raycast Vehicle Engine.
Tento projekt bude vyžadovat, abyste měli nějaké znalosti v Threejs i Cannon-ES. Ačkoli to, co zde vytváříme, by bylo postaveno na enginu založeném na prohlížeči, nepotřebujete extrémní znalosti o těchto knihovnách, protože si můžete jednoduše stáhnout veškerý kód auta, který vyladíte na enginu a nainstalovat jej pomocí 03 na tvém počítači. Přečtěte si pozorně tento článek, abyste pochopili, jak ovládat svůj 3D model čtyřkolového vozidla v prohlížeči.
Nechcete číst tento článek?
Podívejte se na video verzi tohoto článku na mém kanálu youtube!
Úvod
Dobře, tak to mělo začít. Všichni jste museli vidět vývojáře z celého světa, jak vytvářejí opravdu úžasné projekty s threejs. Nyní mají tyto projekty něco docela velkolepého, čemu říkáme Fyzika . Některé příklady pro 3D fyzikální projekty by byly,
Bruno Simon
Portfolio legendárního Bruna Simona, které obsahuje 3D auto, se kterým může uživatel jezdit po tomto 3D světě, narazit na cihly a srazit věci. Tento projekt využívá CannonJS od Stefana Hedmana pro podporu fyziky.
Závodní hra
Závodní hra s otevřeným zdrojovým kódem vyvinutá Poimandres a dalšími přispěvateli na Github. Hra obsahuje 3D auto na dráze a uživatel by měl co nejdříve dojet na konec dráhy tím, že dojede autem na konec dráhy. Tento projekt využívá Cannon-ES, fyzikální knihovnu, která je rozvětvením původního CannonJS od Stefana Hedmana, který je v současné době vyvíjen vlastními vývojáři a dalšími přispěvateli Poimandres.
O
Nyní dost ukázek dalších 3D projektů založených na fyzice. Možná se ptáte, o čem přesně je tento článek?
V obou výše uvedených projektech, jak jste si mohli všimnout, je jedna věc společná a je to také MC her, A CAR! Nebo jak tomu my, vývojáři rádi říkáme, Raycast Vehicle. Nyní je stavba raycastového vozidla velmi obtížná, protože je to jedna z nejsložitějších funkcí fyzikální knihovny. Přestože existují kurzy, jak vytvořit raycastové vozidlo, většina z nich je placená nebo prostě nedávají smysl. I když bych řekl, že Cannon-ES má pěknou dynamitovou dokumentaci, ale trvalo mi skoro týden, než jsem vytvořil své první raycastové vozidlo a projel ho na svém prohlížeči.
Fyzika sama o sobě je dost těžko pochopitelná, když se snažíte, aby fungovala ve vašem prohlížeči, a když k ní přidáváte nějaké kouzlo threejs, všechno to jen trochu ztíží.
Všichni nenávidí procházení dokumentů, tedy alespoň většina vývojářů, které znám, nenávidí čtení dokumentů poměrně hodně, ale threejs, ačkoli je velmi populární a komunita, která jej používá, neustále roste, není mnoho informací o tom, jak stavět určité věci online, pokud na věci nepřijdete sami. Musel jsem projít tou strastiplnou cestou, kdy jsem se snažil přijít na to, jak zprovoznit raycastové vozidlo v mém prohlížeči. Existuje kurz od Nika Levera, jak vytvořit 3D závodní hru pro auta s threejs a cannonjs. Téměř jsem se dostal do bodu, kdy jsem se chystal koupit jeho kurz, o kterém jsem si jistý, že je výborný, ale zase není zadarmo. Poté, co jsem si trochu důkladněji prošel dokumentaci as pomocí Poimandresových vývojářů na Discordu a prošel Brunův kód pro jeho portfolio, jsem konečně přišel na to, jak zprovoznit raycastové vozidlo v mém prohlížeči. Chlapče, cítil se dobře, ale stálo to hodně úsilí, protože dokumenty nejsou tak užitečné, a nejlepší způsob, jak zprovoznit něco na vašem počítači, je v podstatě hrát si s projektem, který je již vytvořen pomocí stejné technologie jako vy. pokoušíte se jej implementovat a snažíte se jej reprodukovat pro váš projekt.
Co je Raycast Vehicle Engine?
Jakmile jsem skončil s nastavením svého prvního raycastového vozidla, byl jsem na sebe docela hrdý. I když jsem si přál, aby existovala webová stránka, kam bych mohl nahrát svůj model auta a s některými vylepšeními vygenerovat veškerý kód potřebný k sestavení vozidla raycast. Nyní generování kódu v prohlížeči a jeho stahování jako souborů a složek je něco, co není příliš snadné vyvinout IRL, ale je to velmi zábavný a pravděpodobný problém k vyřešení. A tak se zrodil nápad na Raycast Vehicle Engine. Engine založený na prohlížeči, do kterého může vývojář nahrát model auta, pomocí grafického uživatelského rozhraní provést některá vylepšení v kódu pro vozidlo, a až budete s úpravami spokojeni, snadno si kód stáhnete a nainstalujete pomocí 12 a spusťte pomocí 20 . Zní to docela zajímavě, že? To je jen začátek.
Pojďme postavit Cybertruck!
Abychom mohli postavit Cybertruck, který lze řídit pomocí kláves se šipkami ve vašem prohlížeči, potřebujeme nejprve Cybertruck! Přesněji model podvozku a model kola pro Cybertruck. Možná se ptáte, odkud mám získat 3D model Cybertrucku, můžete si ho snadno stáhnout z níže uvedeného odkazu.
Pokračujeme, další věc, kterou byste měli udělat, je jednoduše přetáhnout modely podvozku a kol na příslušné vstupy pro nahrávání.
Pokud se nyní pokoušíte stavět pomocí nějakého jiného modelu auta, mějte na paměti těchto pár věcí
- Modelem nemůže být jeden soubor auta, budete muset samostatně nahrát podvozek a kolo, jinak motor obytného vozu nebude fungovat a bude mít podivné problémy. Opět můžete použít mixér, abyste oddělili podvozek od kol, jako jsem to udělal u Cybertrucku sám na mixéru.
- Modely, které nahrajete, musí být GLTF. Pokud nevíte, jak převést svůj model do GLTF, doporučil bych vám zhlédnout toto video na youtube.
Až nahrajete své 3D modely, podívejte se na následující video na youtube, které jsem vytvořil, abyste lépe pochopili, jak můžete vytvořit 3D Cybertruck ve svém prohlížeči.
A voila to je ono! Jsem si jistý, že jste pochopili, jak si můžete vytvořit svůj vlastní cybertruck ve webovém prohlížeči, když se podíváte na výše uvedené video. Docela jednoduché že? Vývoj toho, co mi trvalo 2–3 dny, vám s pomocí Raycast Vehicle Engine zabere pouze 10–20 minut.
Co bude dál?
Nyní, když jste konečně vytvořili 3D auto, které lze řídit pomocí kláves se šipkami ve vašem webovém prohlížeči. Možná se ptáte, co mám dělat dál? Kolem svého modelu auta si můžete postavit celý svět, svět, kde můžete mít všude více 3D objektů, kde se vaši uživatelé mohou snadno projíždět, narážet do věcí a v podstatě si hrát, aby prozkoumali více jako Brunovo portfolio. S fyzikou a threejs můžete postavit neomezené množství věcí a jsem si jistý, že vytvoříte něco, co by bylo super kreativní a ohromující, protože takový je threejs a webgl. Pokud čtete tento článek a nemáte ponětí, jak přidat další a upravit 3D svět a přidat nějaké další 3D objekty založené na fyzice, doporučoval bych vám určitě se podívat na Bruno's Course, Threejs Journey, abyste lépe porozuměli nejen tento článek, ale také threejs a cannonjs ve všech.
Závěr
RV engine je zdarma a s otevřeným zdrojovým kódem, určitě byste se na něj měli podívat na githubu a nezapomeňte zanechat hvězdičku, protože by to pro mě znamenalo opravdu hodně.
Raycast Vehicle Engine
Stačí nahrát model podvozku vašeho oblíbeného auta a model kol auta a RV Engine automaticky vytvoří auto se stejným vzhledem a dojmem. Uměl by také ovládat pohyb a rotaci vozu. Přidejte do auta fyziku a vše ostatní, co chcete, a můžete vyrazit. Poté si to můžete jednoduše stáhnout jako soubor zip. Postupujte podle stejného postupu nastavení a máte vygenerováno nové raycastové vozidlo.
Funkce
- Fyzika vozidel
- Změňte hmotnost vozidla, sílu odpružení, tlumení odpružení atd.
- Změňte polohu každého kolečka, nastavte velikost každého kolečka a mějte všechny ovládací prvky pro sebe.
- Změňte maximální rychlost auta, ovládání pohybu atd. přímo z GUI.
- Umístěte šasi z GUI, viz pomocník pro zobrazení šasi ve světě fyziky. Totéž platí pro všechna kola.
- Vygenerujte kód, jednoduše buď…
Nezapomeňte mě sledovat na Github, abyste viděli věci, které vytvářím a hvězdám. Opravdu mě baví vývoj webových aplikací a webgl pro vytváření interaktivních a pohlcujících zážitků. Vývoj tohoto projektu mi zabral celkově měsíc a nebyl by možný bez následujících úžasných opensource projektů
- ThreeJS – JavaScriptová 3D knihovna
- Webpack – balíček modulů
- Babel – transpilátor ES6 na ES5
- Cannon-ES – 3D fyzikální engine
- Guify – framework GUI
- JSZip – JSZip je javascriptová knihovna pro vytváření, čtení a úpravy souborů .zip s krásným a jednoduchým rozhraním API.
- Stats.JS – Monitor výkonu JavaScriptu
- Spořič souborů – ukládání souborů na disk
Existuje mnoho dalších úžasných funkcí, které plánuji přidat do motoru, a vy mi s tím můžete pomoci také. Takže to fork na githubu. Děkujeme všem, kteří přispěli k tomuto projektu a umožnili jej a děkujeme vám za přečtení tohoto článku.