Animacje 3D na Mapie w React Native - Three.js + MapView

[konradhanus]

WHY - MOTIVATION
Czy słyszałeś o fenomenie Pokemon Go?

Nigdy do tej pory ludzie nie grali w gry wideo w ten sposób,
wspólnie wychodząc na spacery i poznając nowych ludzi.

Mnie zaintrygował, jeden, inny aspekt.
Jak została zaprojektowana, wykorzystując.

• renderowanie postaci w 3D,
• jednocześnie umieszczające je na mapie świata.

Postawiłem tezę:
Czy w 2022 roku da się napisać aplikację pokroju PokemonGO w React Native,
która jest na tyle wydajna aby płynnie animować postacie w 3D?

HOW - Main challenges
Główne problemy do rozwiązania

• Jak wykorzystać mapę świata aby była planszą gry
• Jakie mamy możliwości animacji w react native
• Jak umieścić na mapie modele 3D i je animować

WHAT
Na prelekcji podzielę się doświadczeniem

MapView:

• jak renderować mapy googla w react native,
• jak je modyfikować kolorystykę map
• jak umieszczać znaczniki
• jak używać perspektywy na mapie

Three.js

• jak dodać three.js do projektu react-native
• jak tworzyć scenę
• jak dodać światło
• jak dodać model
• jak animować model

[naugtur]

Super temat!

Mierzyłeś ile czasu potrzebujesz na prelekcję? Zwyczajowo mamy 25 minut plus pytania.
Tylko slajdy, czy jakieś demo z kodem?

[konradhanus]

5 minut wprowadzenie
10 minut przykład z map mapView
10 minut przykład z osadzaniem Three.js i wyświetleniem modelu 3D
plus pytania

aby demo było sprawniejsze, przygotowane wcześniej snippety i uruchomienie ich na telefonie (live demo)

Głównym moim celem jest inspiracja i zachęcenie do dalszej eksploracji tych bibliotek.

[SebastianPozoga]

Cześć
Chcesz przygotować prezentację 14.11.2023??