Nik is a developer with heavy focus on UX at Serverless. He co-created several popular open source projects like DraftJS Plugins & Polished. He co-organises the React Vienna Meet-up and is passionate about WebVR.
showing 11 lessons...
One of React's core concepts is component composition. React VR is no different in that regard. You can take an existing component and wrap it into a new React component.
We'll do so by creating a
<Tree/> component out of simple shapes, a
<Cylinder/> trunk and a
<Sphere/> tree crown. When making our
<Tree/> we'll also see how the position of shapes is relative to the
<View/> and learn how we can leverage this superpower!
React VR isn't limited to simple 3D primitives. By using the
<Model/> Component we can place a complex 3D models into our scene.
In this lesson we'll import a custom polygon mesh of an astronaut by loading in a Wavefront
.obj file. We'll play with our astronaut and learn about various options that will define the surface area of the model.
Letting the user interact inside a VR scene is a crucial element for an immersive VR experience.
In this lesson we'll walk through the various interaction handlers that come with almost every React VR component and show why the component
<VrButton/> is useful and how to use it.
In order to illuminate a scene containing 3D objects a lighting setup is required. In this lesson we'll walk through the available lighting components and create a common outdoor lighting setup.
This includes the components:
<AmbientLight/>, which affects all objects in the scene equally and from all directions;
<DirectionalLight/>, which illuminates all objects equally from a given direction;
<PointLight/>, which spreads outward in all directions from one point; and finally
<SpotLight/>, which spreads outwards in the form of a cone.
A handy demo for
<SpotLight/> can be found here.
Motion is an important aspect of a complete immersive experience, therefor we are going to look into the animation API Animated.
Animated allows us to express a wide variety of animation patterns to animate text, images, and views.
In addition we'll leverage the higher order component,
<CreateAnimatedComponent/>, to create a rotating box!
Same as a
<div> in HTML or a
<View/> in ReactNative, React VR comes with a
<Container/> component that supports flexbox layouting.
In this lesson we'll explore what a
<View/> means in a three dimensional context and how to structure two dimensional content like text and images.
React VR ships with a handful of 3D primitives. We'll
import primitives like
<Plane/> and explore how they can positioned in a three dimensional space.
We'll also check out some of their properties that let us change their size and polygon counts. However we are not limited to simply changing their geometry! We'll see how we can change material and texture options as well.
A 360° image can be used to teleport a user to a different place. Alternatively it can be used as a background for a 3D scene. In this lesson we'll learn how we can use various types of images to make 3D VR scenes.
To annotate or describe elements in a VR scene we can leverage the built-in
<Text/> component. In this lesson we'll place multiple
<Text/> entries in a scene.
We'll also explore its various
style options, such as changing its color and position in your scene.