آموزش با استفاده از React VR و React 360 اپلیکیشن های واقعیت مجازی ایجاد کنید

سرفصل ها و درس ها

معرفی Introduction

• مقدمه ای بر React VR و React 360 Introduction to React VR and React 360

• نصب و راه اندازی Installation

• ایجاد اولین پروژه و درک فایل های پروژه Create 1st Project & Understanding project files

• اجزای مختلف در کد React VR Different components in React VR code

• درک مفهوم دولت Understanding the State concept

• درک مفهوم Props Understanding the Props concept

اشکال سه بعدی 3D Shapes

• رندر مکعب و مکعب سه بعدی با جزء جعبه Rendering 3D Cube & Cuboid with Box component

• رندر کره و سیلندر Rendering Sphere & Cylinder

سیستم مکان نما و سبک ها Cursor System and Styles

• سیستم مکان نما Cursor System

• فلکس باکس Flexbox

• برگه سبک Stylesheet

تصاوير متحرك Animations

• مقدمه ای بر انیمیشن Introduction to Animation

• انیمیشن زمان بندی Timing Animation

• آسان کردن انیمیشن Easing animation

• انیمیشن پوسیدگی Decay Animation

• انیمیشن بهار Spring Animation

• آزمون 1 QUIZ 1

• تکلیف مسابقه اتومبیل رانی Car Race Assignment

درک مدل ها Understanding Models

• مقدمه ای بر مدل ها Introduction to Models

• مدل های چرخشی Rotating Models

چراغ ها Lights

• نور نقطه ای Point Light

• نور محیط Ambient Light

• نور جهت دار Directional Light

• نور افکن Spot Light

• تخصیص چراغ های دیسکو Disco Lights Assignment

پروژه 1 - منظومه شمسی Project 1 - Solar System

• الزامات پروژه Project Requirements

• پیکربندی پروژه Configuring the Project

• افزودن خورشید به منظومه شمسی Adding Sun in Solar System

• افزودن سیارات در منظومه شمسی Adding Planets in Solar System

• چرخش حول محور خود Rotation around own axis

• چرخش به دور خورشید Rotation around Sun

• افزودن جعبه توضیحات سیاره - قسمت 1 Adding planet's description box - Part 1

• افزودن جعبه توضیحات سیاره - قسمت 2 Adding planet's description box - Part 2

پروژه 2 - پنهان و جستجو Project 2 - Hide & Seek

• الزامات پروژه Project Requirements

• اضافه کردن مدل های خانه و ربات سه بعدی Adding 3D House & Robot models

• افزودن قابلیت به روبات ها - قسمت 1 Adding functionality to robots - Part 1

• افزودن قابلیت به روبات ها - قسمت 2 Adding functionality to robots - Part 2

• افزودن صفحه شروع (ایستا) Adding Start Screen (Static)

• افزودن صفحه شروع (دینامیک) Adding Start Screen (Dynamic)

• اضافه کردن کارت امتیاز Adding Score Card

• آزمون 2 Quiz 2

React 360 React 360

• مقدمه ای بر React 360 Introduction to React 360

• نصب و راه اندازی Installation

• آشنایی با دایرکتوری های پروژه React 360 Understanding React 360 Project directories

• انتقال کد React VR به React 360 Migrating React VR code to React 360

سطوح در React 360 Surfaces in React 360

• سطح سیلندر Cylinder Surface

• سطح سیلندر ادامه داد Cylinder Surface continued

• سطح صاف Flat Surface

• رندر کردن چندین سطح در یک صفحه نمایش Rendering multiple surfaces in a screen

رندر مدل های سه بعدی در React 360 Rendering 3D Models in React 360

• رندر مدل های سه بعدی در React 360 Rendering 3D Models in React 360

جاسازی AUDIO در یک صحنه 360 Embedding AUDIO in a 360 scene

• PlayOneShot Audio playOneShot Audio

• افزودن صدا به محیط Adding audio to Environment

• پخش کننده صوتی سفارشی ایجاد کنید Create Custom Audio Player

• صوتی سه بعدی 3D Audio

• امتحان 3 Quiz 3

جاسازی VIDEO در یک صحنه 360 Embedding VIDEO in a 360 scene

• یک ویدیو در سرفیس رندر کنید Render a video on Surface

• رندر ویدیو در پس زمینه Render Video in Background

• وظیفه Assignment

پروژه 3 - گالری هنر Project 3 - Art Gallery

• الزامات پروژه Project Requirements

• ایجاد طرح پروژه Creating Project Blueprint

• قرار دادن مودال و چراغ ها Placing Modal and Lights

• درک منطق حرکت در گالری هنری Understanding logic for Motion in Art Gallery

• پیاده سازی منطق حرکت - قسمت 1 Implementing motion logic - Part 1

• پیاده سازی منطق حرکت - قسمت 2 Implementing motion logic - Part 2

• رندر تصاویر در سرفیس - قسمت 1 Rendering pictures on Surface - Part 1

• رندر تصاویر در سرفیس - قسمت 2 Rendering pictures on Surface - Part 2

جایزه BONUS

• جایزه Bonus