Create VR tours. Built on React VR. LiveTourLab is the #1 open source framework and ecosystem for creating Live Tours. Extend with your own VR components in minutes.
Point the browser as instructed, see build progress in the terminal window.
Hello world is done. Now time for code!
Create your Own Component in minutes
Create a new file Hero.js
Surely you feel a pressing need for a component that displays my rotating portrait in your tours. Let's create one! Create a new file in your main directory, MyLiveTour/Hero.js with the contents below
Open index.vr.js again. Import your new component and send it as a child to LiveTourLab. Full code again:
import React from 'react';
import { AppRegistry } from 'react-vr';
import {LiveTour} from 'live-tour-lab';
import Hero from './Hero';
export default class MyLiveTour extends React.Component {
render() {
return (
<LiveTour tourURI='hello-world.json' >
<Hero entries="heroes" />
</LiveTour>
);
}
};
AppRegistry.registerComponent('MyLiveTour', () => MyLiveTour);
Edit static_assets/hello-world.json
You indicated above that the Hero component will take care of "heroes" entries. So locate the last scene "Backyard", and add a "heroes" section, as follows. The elements are sent as props to your Hero.js component.
With the dev=1 flag, looking down and clicking the semi-transparent circular arrow reloads the json tour definition file, updating the scene definition while keeping all states intact. This works also a production build of the code. Try changing something in one of the "heroes" entries above and reload the json to instantly see the result.
Tour defaults
A lot of information was the same in the 2 hero entries. While you could of course change the defaults in your Hero.js component code, it is often the case that you want different looks in different tours. So go ahead and set a default for our tour instead. Add an entry to the defaults section at the top of the json file:
I know that the greater purpose usually isn't in the readme, but I think that is wrong. The WHY and the HOW always beats the WHAT over time and is thus critical to assess the outlook of any initiative.
We built the world's first platform of this kind, in the hot VR field, and we give it away as open source. We could have sold it, we had several good offers. But I want to do something bigger and it is here on Github that the world's best minds are found.
With love and respect, I invite you to take part in creating this entirely new media format. Here and now, I ask two things from you.
If you in any way feel inspired by VR and what it can do for mankind, please Star & Watch this Github repo and take part in its evolution. This is a humble beginning. It took 20 years to democratize communication and information, putting an Internet connected mobile phone in the hand of every person the planet. What you see in the repo today, is not an end result. I have big visions of where we can take VR. Welcome to join me from day 1.
Please take my short course to get up to speed faster. Time is our most precious asset. With great love and care I have therefore crafted a small course in live tour creation, with the ambition to save time. Please take the course and then join me in creating the future. It will be fun.
I also want to express a profound thank you to the amazing Facebook team that open sourced React VR, which this version of LiveTourLab is built on. We had written 75% of the code on another platform when I took the decision to re-write it on React VR instead. Result became literally 1/10 of the code in 1/10 of the time. Well done building an amazing piece of software! I hope that LiveTourLab will add to Mark's vision of democratizing VR. He talked about it when we met in Jakarta already in 2014. A great visionary!
I've had the immense blessing of getting to play a role in changing the world once already, in telecommunication. 7.1 billion mobile subscriptions now exceed the world population. Facebook & Google's 2-3 billion users still has a way to go ;-)
I am convinced that VR will change the world, just as telecommunication and the Internet did. Transferring immersive experiences is profoundly different from transferring information. I have decided to try to play a part in changing the world a 2nd time, with VR, honoring my roots in computer graphics. “Those who are crazy enough to think they can change the world usually do.”
Again, I have put my heart and soul into this, please do me the honor of both Starring and Watching the Repo. Let's do magic!
// Anders
Please Contribute
This is a beginning. We have now 21 live tour components today and I foresee that we will have 100'ds of components soon, for every application that is suited to the format.
Even without any react experience, you can easily build custom components. Just look at the existing components and you'll figure it out easily.
Personally I had completely switched to Vue for my front-ends, but I must say I like React for VR, it is well fit for this more programmatic model.
Just define a namespace for the json markup and follow the example above. When done, please contribute your creation to the repo if you think it is of general interest.
When integrating your component into the LiveTourLab core main repo, you can also receive callback functions to your components to update the tour state, similar to the Navigation component.
Welcome to send me an email directly. I'm the founder and main developer. I have always put pride in being accessible and I look forward to hearing from you: anders@livetourlab.com
Development requests. Please pick up any of these, work with me and we will check in your creation into the main repo. If you have other ideas, please write to me as well.
Immediate contribution wanted:
3PP video players for 2D videos
3PP video players for Pano videos
Model: Pick up and rotate a product.
In-tour visual editor mode for the JSON (click-drag, add objects)
2D UI in VR, with keyboard, 2D layout etc
Video alfa: Alfa channel support on videos that works cross-platform
Blink black: Nav fading to and from black upon scene change
Gaze toggle other objects than cards, eg video overlay
Prevent info popups from appearing first few moments of entering a new scene
Heat map recording
Pixel, Analytics recording
Navigation component peaking into next scene
Optimise convert options better for sharper 8k pano photos
Optimise ffmpeg options better for VP9 pano videos
Try-room, shopping assistant, dress up, checkout
VR chat
Game components
Avatar AI
Avatar Human
Specialized avatars: Dinner companion, Personal trainer, Executive coach etc.
Long term contribution wanted:
Integrate with cameras manufacturer for dual-lens
Better file format for cinematic 3D supporting parallax movement
...and much more :-)
Done:
LiveTour
Navigation
Info popup
Flexible Card with Header, Content, Footer, Image, Video, Row, Buttons
Base background 360 photo
Base background 360 video
Anchor photo on background
Anchor video on background
Anchor video with auto-play sound on background
Sound
Pre-loader
Various dev tools
In progress:
World rotation instead of scene rotation to avoid the rotation flicker or use fade-to-black
Working with the source code
Easy!
Welcome to contribute to the LiveTourLab core by working the source code. Since the React VR structure is a bit different, I tried many different variants for folder structure, symlinks and hard links. Finally I ended up using a much simpler solution:
Just move the live-tour-lab directory out of node_modules and into your project directory.
So if you stand in MyLiveTour (see getting started above) and installed through npm, do:
# edit ./package.json and remove live-tour-lab from dependencies
rm -rf node_modules/live-tour-lab
git clone --single-branch https://github.com/livetourlab/live-tour-lab.git
npm start
That is it. Your project still runs. No need to symlink or manage dependencies. Now go ahead and edit the source. When you have produced something great, just push to github from inside the live-tour-lab directory.
Create VR tours. Built on React VR. LiveTourLab is the #1 open source framework and ecosystem for creating Live Tours. Extend with your own VR components in minutes.
The npm package live-tour-lab receives a total of 10 weekly downloads. As such, live-tour-lab popularity was classified as not popular.
We found that live-tour-lab demonstrated a not healthy version release cadence and project activity because the last version was released a year ago.It has 1 open source maintainer collaborating on the project.
Last updated on 16 Aug 2017
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
NIST's new AI Risk Management Framework aims to enhance the security and reliability of generative AI systems and address the unique challenges of malicious AI exploits.
This episode of the Risky Biz podcast discusses how the rise of small open source packages and the shift towards individual maintainers makes the ecosystem more vulnerable to supply chain attacks.
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.