Bermain dengan React 360

Membuat pengalaman 360 dan VR menarik menggunakan React

Transcript

1. BERMAIN DENGAN REACT 360 RIZAL IBNU Frontend Engineer @kumparan Membuat pengalaman 360 dan VR menarik menggunakan React
2. Teknologi yang membuat pengguna dapat berinteraksi dengan suatu lingkungan yang disimulasikan oleh komputer VR ? —WIKIPEDIA
3. RIWAYAT STEREOSCOPES Foto Stereoscopic 1838 MORTON HEILIG VR pertama yang terpasang di kepala SEGA VR SEGA mengumumkan headset SEGA VR OCULUS FB membeli Oculus VR seharga US$ 2 miliar 1960 1993 2014 Sumber: https://www.vrs.org.uk/virtual-reality/history.html
4. VR pada Web
5. WebVR WebXR
6. Dukungan Browser
7. Dukungan Browser
8. React 360 https://github.com/facebook/react-360
9. React VR -> React 360 React 360 adalah sebuah kerangka kerja “framework” untuk pembuatan antarmuka 360 dan VR yang dibangun di atas React.
10. Virtual Reality Prototyping with React VR at Airbnb
11. KEUNGGULAN LINTAS PLATFORM Bangun pengalaman untuk desktop, seluler, dan perangkat VR MEDIA IMERSIF Mendukung beragam media 360 dan 3D 02 01
12. Technical Stack React 360 Three.js / OVRUI Web Worker Browser WebVR / WebGL
13. - Unduh NodeJS - Jalankan perintah dibawah ini pada terminal PERSIAPAN npm install -g react-360-cli react-360 init Hello360 // direktori baru bernama Hello360 telah dibuat cd Hello360 npm start
15. KOMPONEN <Image /> <View /> Menampilkan Objek 3D Seperti <div />, sebagai container komponen lain Menampilkan gambar 2D Mendeteksi klik di perangkat <Entity /> <VrButton />
16. Lembar Gaya
17. DEMO
18. CREDITS: This presentation template was created by Slidesgo, including icons by Flaticon, and infographics & images by Freepik TRIMS rizalibnu rizalibnu
19. - Object 3D Example https://github.com/rizalibnu/React-360-Object3D-Ex ample - Virtual Tour Example https://github.com/rizalibnu/React-360-Virtual-Tou r-Example Demo App Repository