BERMAIN DENGAN
REACT 360
RIZAL IBNU
Frontend Engineer @kumparan
Membuat pengalaman 360 dan VR menarik menggunakan React
Slide 2
Slide 2 text
Teknologi yang membuat pengguna
dapat berinteraksi dengan suatu
lingkungan yang disimulasikan
oleh komputer
VR ?
—WIKIPEDIA
Slide 3
Slide 3 text
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
Slide 4
Slide 4 text
VR pada Web
Slide 5
Slide 5 text
WebVR
WebXR
Slide 6
Slide 6 text
Dukungan Browser
Slide 7
Slide 7 text
Dukungan Browser
Slide 8
Slide 8 text
React 360
https://github.com/facebook/react-360
Slide 9
Slide 9 text
React VR -> React 360
React 360 adalah sebuah kerangka kerja
“framework” untuk pembuatan antarmuka
360 dan VR yang dibangun di atas React.
Slide 10
Slide 10 text
Virtual Reality Prototyping with React VR at Airbnb
Slide 11
Slide 11 text
KEUNGGULAN
LINTAS PLATFORM
Bangun pengalaman untuk desktop, seluler, dan perangkat VR
MEDIA IMERSIF
Mendukung beragam media 360 dan 3D
02
01
- 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
Slide 14
Slide 14 text
No content
Slide 15
Slide 15 text
KOMPONEN
Menampilkan Objek
3D
Seperti
,
sebagai container
komponen lain
Menampilkan gambar
2D
Mendeteksi klik di
perangkat
Slide 16
Slide 16 text
Lembar Gaya
Slide 17
Slide 17 text
DEMO
Slide 18
Slide 18 text
CREDITS: This presentation template was created by Slidesgo,
including icons by Flaticon, and infographics & images by Freepik
TRIMS
rizalibnu
rizalibnu
Slide 19
Slide 19 text
- 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
