2. díl - Vylepšování základní scény

JavaScript 3D webová hra Vylepšování základní scény

Unicorn College ONEbit hosting Tento obsah je dostupný zdarma v rámci projektu IT lidem. Vydávání, hosting a aktualizace umožňují jeho sponzoři.

V minulém díle jsem ukázal, jak vytvořit jednoduchou scénu, kam se dají přidávat krychličky pomocí klikání myší. V tomto díle napíšu jak tyto krychle zarovnám do mřížky, jak je z této scény mohu mazat pomocí pravého tlačítka myši, něco o materiálech a jak docílit hover efektu.

Webová hra

Zarovnání do mřížky

Pokud chci, aby se mi nová krychle zarovnala do mřížky, nemůžu používat přímo hodnotu pickInfo.picked­Point(viz. předchozí článek), ale musím to napsat malinko složitěji.

function onPointerUp(event) {
    const pickInfo = scene.pick(scene.pointerX, scene.pointerY);
    if (pickInfo.hit) {
        const currentMesh = pickInfo.pickedMesh;
        const newBox = currentMesh.clone();
        newBox.position = currentMesh.position.clone();//vytvářím novou krychli na stejné pozici.

        const diff = currentMesh.position.subtract(pickInfo.pickedPoint);//Beru rozdíl mezi středem krychle, na kterou jsem klikl a bodem na jejím povrchu, na který jsem klikl.
        //Pro každou dimenzi zjišťuji, zda v ní došlo k posunu právě o 0.5. Nepoužívám přesně 0.5, ale dávám tam taleranci 0.001, je to kvůli častému problému, kdy mám v proměnné místo 5 0.499999...
        ['x', 'y', 'z'].forEach((dimension) => {
            if (diff[dimension] >= 0.5 - 0.001) {//
                newBox.position[dimension]--;
            } else
            if (diff[dimension] <= -0.5 + 0.001) {
                newBox.position[dimension]++;
            }
        });
    }
}

Mazání krychlí

Do funkce onPointerUp přidáme swich, abychom určili, zda klikáme levým či pravým tlačítkem.

function onPointerUp(event) {
    const pickInfo = scene.pick(scene.pointerX, scene.pointerY);
    if (pickInfo.hit) {
        const currentMesh = pickInfo.pickedMesh;
        switch (event.button) {

            case 0:
                const newBox = BABYLON.Mesh.CreateBox("box", 1, scene);
                newBox.position = currentMesh.position.clone();

                const diff = currentMesh.position.subtract(pickInfo.pickedPoint);
                ['x', 'y', 'z'].forEach((dimension) => {
                    if (diff[dimension] >= 0.5 - 0.001) {
                        newBox.position[dimension]--;
                    }else
                    if (diff[dimension] <= -0.5 + 0.001) {
                        newBox.position[dimension]++;
                    }
                });
                break;

            case 2:
                currentMesh.dispose();//Každý mesh můžeme smazat valmi jednoduše zavoláním metody dispose.
                break;
        }

    }
}

Pokud však klikám na canvas pravým tlačítkem, vyskočí mi kontextové menu a to nechci. Pomocí události contextmenu a metody preventDefault tomu zabráním.

function onContextMenu(event){event.preventDefault()}
canvas.addEventListener("contextmenu",onContextMenu, false);

Materiály

Všechny vytvořené krychle zatím dostávali defaultní šedý povrch. Abychom mohli docílit jiné, než základní šedé, potřebujeme použít materiály. Materiály určují vzhled jednotlivých meshů. Každý materiál se skládá ze 4 složek:

  • Ambient - Okolní konstantní osvětlení, co osvětluje předmět rovnoměrně bez ohledu na směr osvětlení.
  • Diffuse - Světlo rozptýlené do všech stran. Díky této složce je na předmětu vytvořený "3D efekt".
  • Specular - Světlo odrážející se převážně v jednom směru, co tvoří odlesk.
  • Emissive - Světlo vyzařované z meshe, hodí se např. pro vytvoření monitoru nebo kina ve scéně.

Pokud chceš vědět více přečti si něco o Phongově osvětlovacím modelu .

Každou z těhto 4 složek můžeme naplnit barvou nebo texturou. Existují i velmi pokročilé textury, pomocí kterých můžeme vytvořit efekt zrcadla, vodní kapku a místo statického obrázku zobrazovat video či na texturu kreslit, jako na canvas.

V této ukázce však budeme používat pouze jednobarevné materiály.

Ve funkci createScene (před místo, kde vytvářím první krychli) vytvoříme dva materiály - jeden pro normální krychli a jeden pro krychli na které bude hover efekt.

const materialNormal = new BABYLON.StandardMaterial("material-normal", scene);
materialNormal.diffuseColor = new BABYLON.Color3(0.4, 0.4, 0.4);//Také bych mohl vyrobit barvu z hexadecimálního zápisu BABYLON.Color3.FromHexString("#666666");

const materialHover = new BABYLON.StandardMaterial("material-hover", scene);
materialHover.diffuseColor = new BABYLON.Color3(0.4, 1, 0.4);

A rovnou nastavíme materialNormal první krychli.

const box = BABYLON.Mesh.CreateBox("box", 1, scene);
box.material = materialNormal;

Poznámka: Typická věc pro BabylonJS je, že každá věc, která se váže s konkrétní instancí scény Camera, Mesh, Light, Material a mnoho dalších má název jako první parametr v konstruktoru a jako poslední parametr má scénu.

Hoover efekt

Tam, kde se nachází posluchač události pointerup, přidám navíc posluchač události pointermove.

let lastMesh = null;
function onPointerMove(event) {
    if (lastMesh) {
        lastMesh.material = materialNormal;
    }
    const pickInfo = scene.pick(scene.pointerX, scene.pointerY);
    if (pickInfo.hit) {
        const currentMesh = pickInfo.pickedMesh;
        currentMesh.material = materialHover;
        lastMesh = currentMesh;
    } else {
        lastMesh = null;
    }

}
canvas.addEventListener("pointermove", onPointerMove, false);

Rozdělanou hru si můžeš stáhnout pod článkem, nebo jít do Git repozitáře, kde najdeš nejnovější verzi zdrojových kódů. Nebo si ji rovnou můžeš vyzkoušet na hejny.github.io/web-game. V dalším díle ukáži, jak můžu držet stav celé aplikace lépe, než přímo ve scéně.


 

Stáhnout

Staženo 32x (4.07 kB)
Aplikace je včetně zdrojových kódů v jazyce JavaScript

 

 

Článek pro vás napsal Pavol Hejný
Avatar
Jak se ti líbí článek?
Ještě nikdo nehodnotil, buď první!
Web app developer • Game developer • Fractal artist • Crypto lover
Miniatura
Předchozí článek
Vytvoř si vlastní webovou hru
Miniatura
Všechny články v sekci
Vytvoř si vlastní 3D webovou hru
Miniatura
Následující článek
Stav hry
Aktivity (8)

 

 

Komentáře

Avatar
Šimon Rataj
Člen
Avatar
Šimon Rataj:24. března 17:48

ale dávám tam taleranci 0.001

 
Odpovědět 24. března 17:48
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 1 zpráv z 1.