Creating VR Experiences with React 360

build a virtual real estate viewer using react 360 from the ground up, covering basic components, 360 photos, and state and props, with deployment to the real world.

Set up a React 360 project, render a 360 background with a half-cylinder surface, and implement a two-panel flexbox layout to show room info from the house data.

Explore how to use a VR button to change state in React 360, updating panels and the environment as you navigate rooms.

Split the default cylinder panel into two flat panels (buttons and info) and position them on an imaginary sphere with set angle, preparing for inter-panel communication in the next lecture.

Create a global store to manage room, info, and adjacent rooms, connect React 360 components via a parent wrapper, and synchronize data so button clicks update the UI and background.

Clean up the React 360 app by removing unused code, refactoring into an info panel and a hover-enabled button component, and applying cohesive styling for panels and buttons.

Learn to add ambient audio to a React 360 VR app by using the native audio module to play environmental music and control it with an on/off audio panel.

Create a landing page for your React 360 house tour using index.html and Bootstrap, add an enter button that launches the app and renders 3D content on the web.

Deploy your VR app by building a production version with npm run, then publish it on the Surge static hosting platform and view the live URL.

Explore dynamic surfaces in React 360 by transforming a flat surface into a cylinder, adjusting its dimensions, resetting, destroying, and recreating panels for versatile VR scenes.

Learn to use native modules in React 360 to store values, query controllers, and manipulate the rendered environment. Declare and implement a surface module, wiring index and client code.

Learn how to switch a React 360 surface between flat and cylinder by building a change surface type method, wiring it to buttons, and rendering the updated shape.

Learn to dynamically resize a React 360 surface by implementing a width and height resize, updating state, and aligning styling to keep the surface correct across different shapes.

Learn to dynamically destroy and recreate surfaces in a react 360 scene by implementing destroy and create panel methods, detaching and reattaching the root, and wiring button controls.

Explore tourism VR using shared services in React 360 to create information hotspots, building on the Dynamic Surfaces project to integrate interactive content in a virtual environment.

Map a single React 360 component to multiple surfaces to power tourism VR info hotspots by rendering an info panel with an image across market, museum, restaurant, and shopping panels.

Create an introduction scene in a React 360 VR app using a Polish flag panel. Trigger the VR button to start the service module, then detach the intro panel.

Hover info icons to dynamically display hotspot details, using unique IDs for each panel and resizing surfaces to show text and imagery in a React 360 tourism VR app.

We wrapped up a tourism VR app with React 360, building dynamic info panels and sharing uniform surfaces on a single panel. Future modules will cover video and animation.

Create a polished crypto dashboard VR by importing, manipulating, and animating 3D objects in React 360, and fetch data via API calls to display live crypto info on desktop.

Learn to add 3d objects in React 360 by loading models, positioning them in 3d space with transforms, and fetching API data to display.

Create left and right panels in React 360 with 300 by 600 surfaces, angled to face the user. Style the panels to display API information in the next lesson.

Fetch crypto data with fetch() in componentDidMount from crypto compare API, populate left and right panels, and render BTC USD open, high, low, close, and volume.

Explore building a data store and synchronization in a React 360 crypto dashboard by connecting panels to a parent wrapper, cycling crypto with index, and fetching data on prop changes.

Learn to animate VR panels and crypto models using React 360's animated library, implementing fade, rotation, and bounce effects with animated views.

Lesson six guides polishing and deploying crypto dashboard VR with React 360, refining left and right panels, styling, and adding audio feedback before bundling for web deployment.

Recap how react 360 uses photos and basic components, then expands to 3-D objects and animations to build VR experiences. Join the upcoming third project to continue learning.

Learn video integration in React 360, including 2D flat screens, a slideshow, and 360 video, as you finish the project series.

Create a 360 video experience in react 360 by rendering a 2D video on a scene, using a new folder structure and a promo component.

Implement a 360 video in a React 360 app by creating Rock Star Beach component, loading the 360 video, and applying a background transform with rotate y at 180 degrees.

Build a 360 VR slideshow in React 360 by cycling through event images with back and forward buttons, while playing environment audio and updating the scene title.

Credit asset authors and customize the home page for your React 360 VR scenes, ensuring proper accreditation for icons, including flat icons, and note deployment remains unchanged.

Learn to enhance VR videos in React 360 by integrating the common UI library, adding play, seek slider, and volume controls for immersive playback.

Learn to implement VR geometry objects such as a cube, sphere, cylinder, and plane in your React 360 project, with guidance on adding them and evaluating the pros and cons.

Learn to render 3d objects in geometry objects vr by importing a location, setting a watercolor world image, and rendering a green box with dim and transform translations.

Render a cylinder in React 360, with radius top and bottom 0.25, height 2, and segments for smoothness; apply yellow color and a translate transform to position it.

Import and render a red sphere, center it with a translate transform, set radius to 0.5 with 20 segments and a height segment of 12 for a smoother look.

Implement a purple plane in React 360 by passing width and height props, translating to (0, -5, -3) and rotating the x axis by -90 degrees.

Learn how to locate and use React VR geometry objects like box and sphere. Inspect props such as radius and segments to understand sphere geometry and note documentation gaps.