:heart::heart::heart: Framework for creating Live Tours. Add React VR components. :heart::heart::heart: LiveTourLab is a framework for creating Live Tours. 21 ready components, easily add your own React VR code. Demo (click play to enter) 10x more interactive than 360 videos 10x more immersive than 2D 10x more extensible than GUI apps 10x faster creation than game engine VR 100% open source 100% standard camera compatible 0 lock-in with static build Minutes to get started, a lifetime to master Please Star and Watch! The repo includes components for navigation, cards, preloading, blending photography and video and much more. Easily add your own React VR code. Once done, you define the tour in a separate JSON file, meaning you can use the same all-static code build for many tours: Getting started Create a new React VR & LiveTourLab project npm install -g react-vr-clireact-vr init MyLiveTourcd MyLiveTournpm install live-tour-lab --savenpm install index.vr.js While waiting for install, open index.vr.js and change it to:```import React from 'react';import { AppRegistry } from 'react-vr'; import {LiveTour} from 'live-tour-lab'; export default class MyLiveTour extends React.Component { render() { return ( ); }}; AppRegistry.registerComponent('MyLiveTour', () => MyLiveTour);``` Grab the Hello World Tour Replace the React VR hello world with the LiveTourLab hello world: rm -rf static_assetsgit clone https://github.com/livetourlab/hello-world.git static_assets Run your first Live Tour! npm start Point the browser as instructed, see build progress in the terminal window. Hello world is done. Now time for code! Create New React VR Component Create a new file Hero.js Let's add a new component. Create a new file in your main directory, MyLiveTour/Hero.js with the contents below```import React from 'react';import { asset, View, Animated, AnimatedImage,} from 'react-vr'; export default class Hero extends React.Component { static defaultProps = { op: 1, // opacity of hero picture...
Tags: GitHub;code;software;git