Add Shapes Using 3D Primitives in React VR
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.
[00:00] React VR ships with a handful of useful 3D primitives, for example, Sphere, Box, Cylinder, and Plane. As you might have noticed already, our scene includes a PointLight. We need it for demonstration purposes, but lighting itself is going to explained in another lesson.
[00:17] First, we add a Sphere component, and the only property we add for now is style to translate the Sphere to meet this array to a position in front of us. This is needed since all 3D primitives, like all other components, by default are positioned at zero on the X, Y, and Z axis.
[00:35] The component appears in front of us. So far, it's hard to identify it as a Sphere since the object itself is just a plain white, and it's not very round. In order to better understand the structure, we add the wireframe property.
[00:49] This has the effect that we can see the actions of the Sphere's polygons. As you can see, there aren't that many polygons. To change the amount of polygons generated, we can leverage two properties, width segments and height segments.
[01:05] We set height segments to a value of 20. As you can see, the Sphere appears more round from the current perspective. In order to have consistent roundness from all perspectives, we also increase the width segments to 20.
[01:20] To change the size of the Sphere, we can use the property radius. We provide a value of 02 to shrink down the Sphere's diameter to 04 meters. To go back to the original size, we remove the radius again.
[01:35] So far, we only explored the options to change the geometry. Let's take a closer look at the material and texture options.
[01:42] First, we want to remove the wireframe property. By providing a color attribute, we can change the color. In our case, we change it to light blue.
[01:52] Although we have a light source in our scene, the Sphere is not affected by the lightning. It only will be if you provide a lit property.
[02:00] By doing so, you can see how only one side of the Sphere is lightened up by our PointLight while the other isn't. This lit property consistently has the same effect for all 3D objects in React VR.
[02:14] Sometimes, a plain surface doesn't cut it. Imagine our goal is to create the planet like Earth in React VR, so instead of providing a color, we can add a texture property pointing to an image.
[02:26] I already added a texture for Earth in our steady assets directory, as you can see here, and this is the one we're going to use to apply to our Sphere. We add the texture property and reference the image with the asset helper function.
[02:43] Our Sphere now became Earth. Let me point out here that the lightning is still properly applied. Now that we've explored the various methods to change the appearance of the Sphere, let's move on to the other 3D primitives.
[02:57] Next up, we're going to explore the Box. Therefore, we replace our Sphere with Box and render it as a wireframe.
[03:03] To change the dimensions, we can provide dimWidth. In our case, we set it to 05. We also can provide dimHeight, which we also set to 05. Last but not least, we can change the dimDepth to 05 meters, as well.
[03:22] As you can imagine, Box also accepts the style property as the Sphere, as well as a texture. Since you're already familiar with these, we're not going to demonstrate them, but move on to the Cylinder.
[03:34] Similar to the Sphere, the Cylinder [inaudible] also has a low amount of polygons. We increase it by, for example, providing 20 to the segments property.
[03:43] Now let's have a closer look how we can change dimensions of the Cylinder. Using dimHeight and setting it to 06, we can reduce the height of the Cylinder. In addition, we can change the bottom and top radius.
[03:56] By default, both values are set to 05, but we're going to set radius bottom to 035 now. As you can see, the bottom radius decreases.
[04:07] Next up, decrease radius top to zero. As you can see, with a little creativity, you could create other shapes. In our case the result is a cone, but it doesn't stop there. By reducing the segments to four, can even create the pyramid-- pretty cool.
[04:23] Last but not least, we explore the simplest of the 3D primitives, the Plane. The Plane's dimensions can be changed by updating dimWidth, as well as dimHeight.