Egghead Instructor Nik Graf

Nik Graf

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.



Unlock all of Nik's PRO Lessons
click for instant access!

Browse Nik Graf's lessons.

showing 11 lessons...

Compose Multiple 3D Objects into one Component in React VR

P

Render Custom 3D Objects Using the Model Component in React VR

P

Capture User Interaction with React VR

P

Add Lighting Using Light Components in React VR

P

Animate Text, Images, Views, and 3D Elements Using the Animated Library in React VR

P

Structure 2D Content like Images and Text Using the View Component in React VR

P

Add Shapes Using 3D Primitives in React VR

P

Build 3D Panorama Scenes Using the Pano Component in React VR

Write Text Using the Text Component in React VR

P

Start a Virtual Reality Project Using the React VR CLI

Error Handling using Error Boundaries in React 16

react tutorial about Compose Multiple 3D Objects into one Component in React VR

Compose Multiple 3D Objects into one Component in React VR

2:05 react PRO

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 tutorial about Render Custom 3D Objects Using the Model Component in React VR

Render Custom 3D Objects Using the Model Component in React VR

1:56 react PRO

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.

react tutorial about Capture User Interaction with React VR

Capture User Interaction with React VR

4:56 react PRO

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.

react tutorial about Add Lighting Using Light Components in React VR

Add Lighting Using Light Components in React VR

3:28 react PRO

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.

react tutorial about Animate Text, Images, Views, and 3D Elements Using the Animated Library in React VR

Animate Text, Images, Views, and 3D Elements Using the Animated Library in React VR

8:09 react PRO

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!

react tutorial about Structure 2D Content like Images and Text Using the View Component in React VR

Structure 2D Content like Images and Text Using the View Component in React VR

2:37 react PRO

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 tutorial about Add Shapes Using 3D Primitives in React VR

Add Shapes Using 3D Primitives in React VR

4:38 react PRO

React VR ships with a handful of 3D primitives. We'll import primitives like <Sphere/>, <Box/>, <Cylinder/>, and <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.

react tutorial about Build 3D Panorama Scenes Using the Pano Component in React VR

Build 3D Panorama Scenes Using the Pano Component in React VR

3:48 react

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.

We'll learn how to load in panoramas which are equirectangular images, and we'll also learn how to cubemap multiple images. We'll also learn about passing event and style properties to <Pano/>.

react tutorial about Write Text Using the Text Component in React VR

Write Text Using the Text Component in React VR

2:50 react PRO

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.

react tutorial about Start a Virtual Reality Project Using the React VR CLI

Start a Virtual Reality Project Using the React VR CLI

1:53 react

We will learn how to set up a React VR project, run the development mode with hot reloading, and take a small dive into the generated code and make a small change.

react tutorial about Error Handling using Error Boundaries in React 16

Error Handling using Error Boundaries in React 16

6:01 react

A JavaScript error in the UI shouldn’t break the whole application. To solve this problem for React 16 introduced a new concept of an “error boundary”. Such error boundaries are React components that catch JavaScript errors anywhere in their child component tree, log those errors, and display a fallback UI instead of the component tree that crashed.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?