Skip to content

Latest commit

 

History

History
27 lines (21 loc) · 2.32 KB

README.md

File metadata and controls

27 lines (21 loc) · 2.32 KB
Raw

Star Power ✨

If you like my work please star ⭐ the repo.


Disclaimer

This project is a WIP. It is the first VR project I made after transitioning from ReactVR to React360. It is in need of a facelift. It is currently hosted on Netlify, but I am considering moving it to PM2/NGINX on DigitalOcean.

React-360-Venues

Tech Stack:

Check out my other tech stacks here

React-360-Venues provide two example ways to place hotspots, which you can switch by setting useDynamicSurface to true/false in index.html

  1. Use dynamic surface: (useDynamicSurface = true):
    • This is recommended for most case, it has less limitation and allow you to place hotspots on any position(e.g. on the top or bottom). From performance wise, less than 8 hotspots per scene should works fine on mobile.
    • Each hotspot will be rendered on a different surface, and surface will be place on the right position dynamically by the hotspot setting.
    • You don't need to care about the creating, destroying, placing the surface. TourHotspot uses a custom native view "WorkInProgressSurface", which allow you to create and rotate a surface from react side by using this view.
    • "RCTWorkInProgressSurface" provides a custom native view to create a surface and place it in 3D space from react side.
  2. Use one cylinder surface: (useDynamicSurface = false)
    • If all of you hotspots are in the place that a cylinder surface can cover, and you want simpler layout logic of hotspots that just maps position from 2D space of cylinder layer to the world. You can try this way.
    • It has two limitation: 1. You can't place a hotspot outside of the edge of the cylinder surface, otherwise it will be cropped. 2. There's an edge of cylinder surface on the back, if a hotspot is placed across the edge, it will also get cropped. (This template solves this by placing tooltip of a hotspot on the left if it's close to right edge).
    • It uses the translation on X direction on cylinder layer space to map hotspots' rotation to 3D space.
    • If you want to go with this way, you can remove the RCTWorkInProgressSurface and WorkInProgressSurface related codes.