Co je whitestorm.js?
Whitestorm.js je rámec pro vývoj 3D aplikace nebo hry, které běží v prohlížeči. Tento framework je v podstatě obal kolem Three.js knihovna (jako jQuery obalí DOM pro snazší použití). Rozšiřuje Three.js s jednoduchým API a systémem komponent, aby byl vývoj jednodušší a lepší. Používá WebGL k vykreslení 3D , takže aplikace poběží i na chytrém telefonu nebo tabletu.
Příklady :https://whs-dev.surge.sh/examples/
Existuje také několik skvělých projektů vytvořených pomocí Three.js již (výloha):
- Zkušenosti OMM
- Dost
- Zoetrop Nike
Myšlenka rámce WhitestormJS
Jeho hlavním cílem je kombinovat 3D vykreslování pomocí fyzikálních simulací v reálném čase v jednoduchém a flexibilním API . Poskytuje několik hlavních funkcí:
- Komponentní graf scény
- Integrovaná vysoce výkonná fyzika s
Worker
(vícevláknové čtení) - Automatizace vykreslování
- Vylepšená softbody
- Na základě ES2015+
- Webový balíček přátelský
- Integrované Tři.js vykreslovací modul
Další funkce najdete v README projektu na github .
Instalace
Existuje několik způsobů instalace whitestorm.js . Pojďme si ten popsat pomocí tag a ten s webpack .
Včetně dokumentu
Jediné, co byste měli udělat, je přidat whitestorm.js do dokumentu pomocí značky skriptu. Tento soubor si můžete stáhnout ze složky build.
<!-- WhitestormJS library --> <script src="whitestorm.js"></script> <!-- App written in WhitestormJS --> <script src="app.js"></script>
To je vše. Nyní můžete svou aplikaci napsat pomocí whitestorm.js v app.js.
Webový balíček
Spusťte npm install whs . Poté byste měli do kódu přidat jmenný prostor WHS.
import * as WHS from 'whs'; // ...
Dalším krokem je konfigurace webového balíčku.
plugins: [ new webpack.NormalModuleReplacementPlugin(/inline\-worker/, 'webworkify-webpack') // ... ],
To by mělo být provedeno pouze v případě, že používáte verzi s fyzikou. Další informace o variantách whitestorm.js naleznete a Použití s webovým balíčkem v dokumentaci.
Použití
WHS.World
Nyní je čas vytvořit svůj první whitestorm.js aplikace. První věc, kterou byste měli udělat, je nastavit World
objektu . Když to uděláte, budete dělat více věcí najednou:
- Nastavení
THREE.Scene
(neboPhysijs.Scene
) - Vytvořte perspektivní kameru a přidejte do ní scénu
- Nastavte gravitaci (pokud je fyzika zapnutá)
- Použít pozadí a další možnosti vykreslování
- Nastavte automatickou změnu velikosti/statistiky (navíc)
const world = new WHS.World({ autoresize: "window", stats: 'fps', // Statistics tool for developers. rendering: { background: { color: 0x162129 } }, gravity: [0, -100, 0], // Physic gravity. camera: { position: { z: 50 } } });WHS.World:Inicializujte scénu, renderer a kameru.
WebGL canvas bude automaticky přidán do document.body
uzel. Cíl můžete změnit nastavením prvku DOM na container
vlastnost konfiguračního objektu, kterou předáme do WHS.World
.
WHS.Sphere
Další věc, kterou musíte udělat, je vytvořit jednoduchý sphere
která spadne na letadlo. Jelikož již máme nastavenou scénu, kameru a renderer, můžeme rovnou začít vyrábět kouli. Chcete-li vytvořit jednoduchou kouli, použijte WHS.Sphere
komponent. Je to speciální komponenta, která obaluje THREE.SphereGeometry
, síťovina a fyzika.
// const world = ... const sphere = new WHS.Sphere({ // Create sphere comonent. geometry: { radius: 3, widthSegments: 32, heightSegments: 32 }, mass: 10, // Mass of physics object. material: { color: 0xF2F2F2, kind: 'basic' }, position: [0, 10, 0] }); sphere.addTo(world); // Add sphere to world.
Nyní, když otevřete dokument, uvidíte kouli, která spadne.
Odkazy
- Github:https://github.com/WhitestormJS/whitestorm.js
- Web:https://whsjs.io/
- Výklad:https://whs-dev.surge.sh/examples/