WebVR - Virtual Reality with A-Frame from Scratch | David Navarro López | Skillshare

Playback Speed


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

WebVR - Virtual Reality with A-Frame from Scratch

teacher avatar David Navarro López

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

33 Lessons (2h 8m)
    • 1. Welcome to the course

      1:47
    • 2. What are WebVR and A-Frame

      1:56
    • 3. Text Editor: Brackets

      2:52
    • 4. How to use A-Frame

      3:45
    • 5. Position | Position an object

      3:43
    • 6. Rotation | Rotate an object

      5:49
    • 7. Scale | Scale an object

      7:15
    • 8. Primitives vs Entities

      1:47
    • 9. Camera

      5:16
    • 10. Apply textures and normal maps to an object

      8:18
    • 11. Sky | Sky and 360º images

      3:44
    • 12. Plane | Create the ground

      9:30
    • 13. Open the Visual Inspector

      3:40
    • 14. Import glTF Objects

      6:50
    • 15. Import OBJ Objects

      4:11
    • 16. Introduction to animations

      4:31
    • 17. Attribute

      5:50
    • 18. Begin and Delay

      1:19
    • 19. Fill

      2:06
    • 20. Direction

      2:20
    • 21. Easing

      3:15
    • 22. Spot Light

      4:09
    • 23. Ambient Light

      2:41
    • 24. Directional Light

      2:58
    • 25. Hemisphere Light

      2:19
    • 26. Point Light

      2:44
    • 27. Shadows

      2:21
    • 28. Primitive Cursor

      3:21
    • 29. Add Click event

      5:21
    • 30. Using Fuse event

      3:18
    • 31. MouseEnter and MouseLeave events

      1:25
    • 32. Getting additional information about events

      3:17
    • 33. Movement and alternatives to default camera

      4:01
  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

104

Students

--

Projects

About This Class

BEGINNER COURSE

HTML and JavaScript knowledge recommended but it's not a must.

In this course you will learn the basic notions of A-Frame, with which you will be able to create web pages which are totally or partially in Virtual Reality (VR).

What will we cover in this course?

  • The most important primitive components of A-Frame

  • Create entities

  • Insert 360º images in our Web

  • Create scenes

  • Add texture to objects

  • Import 3D objects in formats .obj and .glTF

  • Animate objects

  • Open and use the Visual Inspector

Meet Your Teacher

My name is David, I am 23 years old and I am a web and videogames developer.

I have worked as a web developer using CodeIgniter for three years, and in my free time I program videogames in Unity.

I am currently studying the Multimedia degree at the UOC along with an online Unity course.

Ex soccer and waterpolo player, now I practice MMA to keep myself in shape, because sitting all day is not good :P 

See full profile

Class Ratings

Expectations Met?
  • Exceeded!
    0%
  • Yes
    0%
  • Somewhat
    0%
  • Not really
    0%
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

Transcripts

1. Welcome to the course: quite there. My name is Louise until they I present to you these Web PR course, which we have developed with my partner of it. David is a Web programmer who is studying a degree in multimedia. He also has a masters in development and creation or video games. I am Juries, and I am an aerospace engineer, commonly studying a master's degree related to programming our space systems. We have worked together in several projects, and we want this course of where we are to be an excellent opportunity for those looking into virtual reality programming. In this course, you will learn everything you need to create amazing projects with a frame both for virtual reality webs and video games. This course is set of the beginner's level initially, so you don't require special information beforehand. In this course, you will learn everything you need to create amazing products with a free both for virtual reality webs on video games. This course is set of the beginner's level initially, so you don't require special information beforehand. We recommend that you have some knowledge regarding HTML and JavaScript. However, we will explain everything in detail in the videos, so they're really not necessary. You can use a frame to great virtual road projects using simply have Broza on virtual reality glasses. You won't need the glasses to program these videos. Most of the glasses are compatible with Web via, and that's really great news. If you're looking to develop virtual reality project for webpages, a frame is what you want. It is a really powerful tool. When you finish this course, you will know if a frame is the kind of programming that you are looking for. We have the strong feeling that you will join us in this journey, so welcome to the course. 2. What are WebVR and A-Frame: welcome everybody to the first class off with the uncles. What they are is a JavaScript happy initially developed by Montella. Currently, both Google, Graham and Microsoft form part. Often team what they are is compatible with most projects. Firefox, Google, Chrome on Mobile Brothers. The user can enjoy the experience of virtual reality only by using the browser on virtual reality glasses whether they are uses Web T Other technology, which allows three D rendering on the same brown where the are, is formed by a several projects. One of them is a frame, which combines virtual reality experiences with HTML. This course will be aimed to this product. Afraid is an open, coded based framework Web sustained by Godzilla on the Web. Three. Our community. This framework is designed to create virtual reality experiences. It uses a library named three Js. This is a deficit ripped library oriented two elements and scenes in three D on virtual reality. Using HTML, we will create a three D virtual reality contents. A frame has a visual inspector that allows the movement off objects in the scene, making it simpler. Done coding. Also, this framework is compatible with other libraries such as react Angula ts view it? Yes, among others. This rain work uses entities primary elements on others. We will be seeing more of this in the following videos. If you read it to begin with this adventure, click on the following video. 3. Text Editor: Brackets: Welcome to the first class off the course. In this class, we will introduce the text editor that will be used. Its name is brackets. I especially like it's Blind Tex. However I returned, I decided to change. Since this is a good option, will no need to install Champ. We'll click on download rackets to download it or otherwise you can use whichever text editor you feel more comfortable with. Once you don't load it, you will have to execute on executable. Once you open the program, I recommend you to go to file manage extensions, and you look for an extension under the name off Limit or e mm E t. Over here. Over here, you can click on install once installed whenever we have unopened paid, such as HTML, we will be able to do things such us, for example, right html to dodge five. Then we click Tab. Key on all of this is corrected. We can also there's some other stuff, such as right Dave played the top. Andi closes. This is just an example. We can also play with theme by going to manage extensions themes, and here we find a lot of themes You can also see them on the Web. I personally installed the stocks or the theme. If you want to have the same, this is how to configure it. Also, this text ready to has the advantage That, for example, I will root time some text. Uh, let me try. Yep, I save it. Andi, with this bottom here in the right, then you'll see. Okay, we get to the preview off the product in real time. This is something that I especially enjoy. I'd see if I can ride, for instance, this as you can see, we can get it on real time. The thing that, as I said, I especially like and enjoy. So this is why I like this one. I do like this one. But as mentioned, you can use which have April. So let's continue to the following class in which we will start with a free 4. How to use A-Frame: So we are ready to begin with a friend. The first thing we will do is to go to the official page. Hey, frame dot Hyo, Over here in the right, you will see the get started button. This will lead us to a documentation on the left. We have several examples that you can check. You can also see the visually inspect on the coat used. Let's go to get started over him. Andi, I also will attach the link for you to get here directly. The documentation is opened in the paint of introduction. We see an example code. Apart from that description, off a frame, some examples and characteristics which will discuss late. Okay, First thing we will do is copy these html code on go to brackets. I already created a folder on the desktop named a frame Andi. I created a file named Index HTML, so we can easily find it in the desk up, see if we find it. Yeah, this is the folder. Okay. Later, you click here. Okay, Fold up. Okay. Now you click here and you open the A frame folder. Let's copy the code in the HTML. Okay, Now we go to purview, and we can see that we already have a cube. That's fear and a Celinda and also a plane. Okay. And weaken. Just kind of move around. Also below. To the right, we have the virtual reality mode that when clicking full screen is opened one here once here. If we click on W A s d, we can move freely any off the keys. So let's see what's on the code of the April. As you can see, we are loading the JavaScript off a frame version 0.0 dot zero. Okay, Inside the body, we have a scene. This is the scene on inside. We have one box or cube. This is Coop. Also, we have spear on cylinder also a plane. Okay. As you can see, these elements have competent off position, which you will see now based on three values. Okay, this is the position. These values are X, y and Z. In a bid, we will see which is which and how they are positioned. They also have a competent of rotation onda a color. Okay. Some of the aluminum elements, such as hates radios and others. This is a bit complicated at first. So whenever you have any doubts, you can go to the documentation explained here on the left. Okay number. Really, don't worry, because we will analyze how to describe this confidence easily. Let's go one step further and learn how to use them. 5. Position | Position an object: Welcome to this new class. We will be discussing the position off objects. As you can recall, in the previous class we use the code off a plane page and we had to come this component of position with three separate values. The first things the X competent the second Dewie and the third is a by using this image is okay. We will better on the sandwiches which firstly, DX if x his positive. It moves to the right. The optic moves to the right. Whereas if it is negative, it moves to lower left for positive values. It will appear on the right off the scene. Let's try changing the competence. 2000 and safe. Then we go to preview. And was he what? We'll see that it appears in the centre Off the off the scene. Okay, If you introduce a two or three, he moves three to the right of the scene. As you can see with the miners three it goes to the left. Let me just get this clearer. And if we put a zero, it stays in the middle. I dont much okay. They were put a to on the y component. For example, the coop moves upwards, and with a minus two it gets down with a zero. It stays in the center also. DZ. A lot of people are not used to working with Z Axis, which describes the profundity or depth. This completes the three D, which is added to the X Y plane. Negative profundity makes the body backwards, whereas positive it makes the body move to different. Let's change the profundity. As you can see, the box has 00 profundity or depth. If we introduce a minus two, the books moves backwards. As you may, as we mentioned on these image negative backwards, it would put plus two. The object moves. Tow us. Okay, this is negative. Two. No, let's try a plus two. Exactly. It gets closer to us, so there's are the competent of position. As you can see, it is not complicated to understand. However, it is important to remember that given a position X, it would move to the right, and if it is negative, it would have moved to the left. In the case off the I positive, it will move upwards and negative downwards NZ. If it's possible, I mean, if it's positive, it moves to the front, whether if it's negative and go to the back, this is the position. On the next video, we will be discussing the rotation. 6. Rotation | Rotate an object: Welcome to this new class in which we will discuss the rotation flotation. It's the same most position has three village three competent that are X. Why hands it? Let's see how this works. As you can see, I change the scene since I moved the position off the box because it was in the middle off the plane. But that's all. Let's see how the rotation effects the cube. If we're faced the page as well. Fresh. It, um, these are the execs is on the Y axis. Okay, now let's see what happens. He find to do some irritation. He next 30 degrees. You can see it rotates a bit. Okay. Although if I put 60 degrees, it would take smoke to understand. Better this, we can say that. Um, this yet made the snapshot can okay, this that I'm trying to show you This would be the X axis. Okay, on The cube is rotating along this access. The cube is fixed to this access. So as you can see irritating 60 degrees, the box rotates to the front. Let's see this. Okay, I actually, if I introduce another not irritation, For example, 120 degrees. Okay. The body will rotate around its own axis. Following the rotation that we introduced. A comparison would be to consider, for example, a self rotating chicken Graham, if that's the name or speed roasting since they irritate on their own axis. Okay, let's continue on the Y axis. We see that the Cube changes insurance ation from left to right or right to left. Depending on the Creator's off rotation, it would like their snapshot. Okay, we see that the access. Let's see if I can move it. He yet? Okay. Yeah, The why access would be this one. Okay, on the Cube, therefore, is rotating around Theis. Access on itself similar to the x axis, but in vertical with this game. Okay, A So you can imagine the Cuban rotates as we changed degrees off the irritation. Okay, this will be the why access now, the last taxes that we have left. He's the scent access. Okay, let's put a zero to why. Okay on. Let's rotate the scene to visualize better disputation before I change the value offset. We can see that the cube rotates from site to site. I move around so you can visualize it better. It's easy to lose the reference, since the Cube is in all the cases, the same color. But irritation is around the set Access. I'll move it a bit. Okay, Now this. If I can show it to you, this would be can see Nice. This would be thes that access. How will painting now? Okay. And this one is the y axis that we described before. Okay. I'll try to change the color if it gets a bit more clear. Couldn't do it. Okay, so this is the idea. There's addax is the order. And so, until okay, on the Y axis would do would be the vertical. As you can see, the rotation is is given by X y and set, which I know indicated here X would be perpendicular. The X axis would be perpendicular to these to access. He would check it in. Maybe another perspective. It would be easier to visualize. We can continue to move it to see the cold rotation. Okay, It's try this perspective. So what? This is the protection. I hope this is clear. I recommend you to play with the values, Okay? He noted to in order to understand exactly how the invitations work. And for you to internalize this information, it is important you condone dominate. Okay, the rotations and positionings in order to avoid future confusions. Okay, my recommendation is that you work on that and to make sure that you have that clear toe, let's move to the next video. 7. Scale | Scale an object: Welcome to the new class Related to scale, often element on object. Okay, we will continue with the same examples before with our Blue Cube. Andi will just right scale. Okay over him. All right. In the same way he s positioning. Invitation scale has three values and we will said when we'll settle with, um 2111 This implies that the scale is one. So the size is that which were specified originally. Considering that we have a width of one, it will keep the same width. Okay, the same for height. Andi. Also four depth. If we interviews or two on the X component, the cube will be doubled in with following the eggs access. It would multiply the scale two times with so two times one which is to which I'm going to show you this. This would be not supplying. Exactly. This is the object that visits off this. If I put a four, the multiplication, is it four times two. So eight is the final with Let's set it to one for the moment. Okay. The same happens with the height. If we put it to we will also multiply the vertical competent the height. Times this case to a shown, as you can imagine, the same happens happens with depth. Okay, which is original. Set a scale one. If I put three years, can you get three times one death? All right, now let's see. Ah, more complete case. We would have had do a general values 111 Okay, one was confused. I always put zero people zero, then optic disappearance. But you can imagine. Ok, now imagine that would rotate on the x axis. 60 degrees has shown. As you can see, the cube rotates but also rotates it sexists. Let's visualize it with Tried to make a snapshot. Okay. No, this is what we have the previous y axis. He's vertical as we mentioned before on the feeding on the previous video on these hand axes. He's of his under all right, however, and due to the fact that we moved the cube Okay, what did we rotated? This cube. Now this cube has its own local access. Let me change the color, say a flying. I can get it to appear clearly. Let's see what I can do. I think I count, but Okay. Yeah, well, not strike this? Not exactly what I wanted, but I would manage. This is the why Access. Okay. As you can see, this would be the local. Why access Andi? Also that is that access. All right. You can find it below. I'll try to do it. Yeah, this would be that local said access. Now you mentioned irritation wars around the execs. So it is the same as before. No. Let's try to change the scale for each access. As you can see, the cube doesn't follow the axis set before, but rather the local access on the Cube. The change is on the Y axis off the cube itself. The same will happen if there ever was. Hate the coupon in any other access. Okay, You very rotate on. Why, for example, 30 degrees. I'll do that in a moment. Okay, respect. Um, if we rotate on, why 30 degrees? Okay, we see that the cube has rotated and the axis has also moved. It is is to compared with with his new options, okay, with with the case before fresh No, you can see for this case both the X axis on these. That access have now also rotated the to access that rotate. He are always there to different ones. Toe the rotating access that we're using. Okay, as you can see. Yeah. This would be that that X is okay. And this is the original. Why access? I'm okay. That's Cliff. As you can see, may not be very clear to see with his image, But you can imagine, yet this would be the projection. Okay, The difference. The local eggs axis. Okay, given this, where's the Y Axis? Maintains its been kept the same? No. If we try to scale, it will also scale only on the local access off cube. Okay, so I said before, this is independent off, which taxes it is that we are skating. Okay, So it is important to consider that when we rotate, the opted has its own corner. That's and when we scale it, the changes are performed on the axis off this object. It is important to take this into account. Okay? It may found ourselves. Tension was scared off way on foreign under the optic changed its side on the X axis. So this would be to a previous rotate. Let's continue on to the next video 8. Primitives vs Entities: welcome to this new class. We will be discussing the difference between primitives. Andi entities up to No, in order to create objects. Subject Cube. We used a box. Okay, A plane, A sphere. Okay. Which whichever Onda, all of this are primitive elements. This means that simply by using a box, we directly get a cube with some default elements and characteristics such as a given positive color, right, and given position or other. Apart from primitive elements, we also have entities. These are elements which have no specific characteristics. However, we can create objects with this components. Okay? No, let me show you. Yeah, as you can see over here. Okay. We have a gift explaining that we introduced a entity on, based on some confident, said his geometry material, light, sound and others okay, we can eventually create an object. So this is the difference between these two elements on the one end the primitive with full characteristics and on the other hand, the entities that require that you introduce their components on the characteristics 9. Camera: come to this next loss in which we will discuss the primitive element camera for the camera . We will simply write a comer. I am still using the same scene that we use before, which was provided by a frame. You can find a link also so that you don't have to look at it. Okay, I'll put it up. When does he have the scenario? The same as before. And I write a That's camera. Okay. You can quickly see that the camera changes position since we are now using a new camera. Compared to that compare to the default one. Okay. The camera has some attributes such as far for example, far means How far would the camera let you see? Okay, 10 things 10,000 meters. His bite effect. I recommend you there. Would you lower the far value in some cases since it may be over overloading your scene? Okay, We also have for which is related to the angle of vision of our camera. 80 means 80 degrees of perspective from the cameras point of view. If we were to set this to 100 our vision would be a lot higher. Okay, The look controls enables our by default Okay Said is true. These are the controllers that enabled us to change perspective near it's related to how near we can see objects set us 0.5 even actually set to a distance of 0.2 It wont be seen are visualized by the camera since it is closer than the minimum established Okay to have you can also find ah reverse mouse drag which sits Ceta falls on moving with the W A s D keys. In order to control perspective, which spider fault is headed straight with this camera. Okay, we can move freely. As you can see. Let's try to change the for to 100. Okay, No nice. That's compared with 80 degrees. As you can see, the objects appear to be farther away when in fact it is the comer that enables more vision giving this feeling that the objects are actually Father, let's change the name. Okay. 10 Munim, as you can see ever said it toe one with visualize. I think the object disappears. Okay, when we move the commoner to a distant smaller than the find you. In fact, as we mentioned before now If we're trying to change the position off the camera by in tradition and position, we wouldn't be able to actually change it. Okay? It doesn't work. We must create an entity on Element without properties, which can function as a key to other primitive elements by putting the position into the eight entity. Okay. We were self the position of the camera. We save it. Let's try this. The may be a mistake, since the article is not shown. No, that's actually correct here because I have to put five. Okay, we put minus five. The object will appear on the other side of the camera, and we put a five. Okay, the object should appear in front of Look, now, let's see your five. OK? Exactly. Minus fine. If so, I said would mean that the object is in the back. If I put it minus five way, should need to rotate to see the object. All right, now, I'll just set it to blast five. So if I intended to change the position of the camera, simply adjust the value off the position. All right? In general, the company's assets at a height off 1.60 meters. You can adjust the camera. Has she prefer setting the three components of the position off camera? As you can see here, we have seen how the camera works. Now it is important to get the basis straight basic so that we can move forward and understand how the program entities into our scene. I recommend you that you work on each item. Okay, that we've discussed on the last classes. Andi, I will see you in next class. 10. Apply textures and normal maps to an object: Welcome to this next class in this class, we will see how to incorporate materials to the objects in this case. I kept the coop over here. I got rid off most of its components. I've only kept the position. 01 minus three. I didn't change the plane. It's located under the Cube. Okay. And as you can see, I've written some comments on the code 11 to load normal maps. And the other two, the scene. The objective of comments is to have the code morgue organized. So applying a text into the cube means putting an image on top of the solid. I thought of putting an image rendering something such as wood beams. I've already looked for an image online. Yes, you can see you can find Texas in a lot of websites. I simply downloaded this image to my computer. Okay, so I will go to a frame folder on creating new folder named Images. Now, I will move the folder to this folder. Okay. You can change the name if that it may be easier for you. Well, whatever you prefer, this is the file. Now, if you look for texture images on Google. You probably won't find them. With the normal map, there's normal map. It's an image that, as you can see here. Okay, let me show. You asked his bluish kind off color giving ah more realistic in depth filled to the image. Okay. It also has an effect on the brightness on others. Using normal maps is better than the simple image c inside of loaded the image from Google . I simply looked up this web to obtain normal map. Okay, I will attach the web so that you can do the same I drug here. Image. Let me just change a few parameters for you to see it like this. Okay, If you want to adjust the image you condone, you can just change some of the sets things because I want the profile of the wood to be relatively appreciated. Okay, but not too much. Yeah, I kind of like this would be Would be okay. You can adjust it. So did you obtain the normal map that you like the most? Okay, then you'll just have to put a name to the file on Don't noted once you don't know that normal map, you can drag it to the folder like this. Okay, I'll change the name for the photo. I'll put one on the other one. I'll just put World One normal. Okay, Now let's see how to apply the image of the wood. So we will go to the Cube in the HTML code, which is over the other box. We're going to add the coat S R. C with the road to the meats that we want to introduce. As you can see, the Cube has the wood texture that we wanted to introduce Now, however, as you can see, this is not really, really stick. All right. Doesn't really look natural. There's no reflections. It seems it isn't affected at all by it environment. We'll explain. It just looks fake, I guess. On the corners. Okay, there's no depth. It's like a poster just stuck under Cuba. So we can try to do is to apply the normal map. So to include the normal map, we must write eight dash assets that you can see and in the part of assets, we can create as many images as we want. This is easy to do. You write image on the code. You seem to ride the route to them. Toe the image. Okay, The normal map as we did before. Now just get rid of the out, okay? And finally, we will write an I d at the left, identifying the normal. So if you want to apply this image to the cube, we have to go over here. Okay? And right, Normal dash map equal. Sorry, I did a mistake before. Okay. Yeah, I know. It's OK. Yeah, because this is they should be chased on. The hashtag should go over here. Exit include the hashtag and the identifying idea. Okay, this should work. Let's refresh it. Okay, so this is it. Um Let's make a few changes more. We will add a new component named normal dash texture. That's repeat, Andi two ones. What distance is repeat on the X and Y axis for its side off the object. It is important to take this into account since we can also do the same. Repeat on texture us 11 Okay. If I change it to, to to and I refresh it again, you will see that the object has texture problem. This is due to the fact that the object leases more in this case. Okay. On the texture doesn't That's a look. Okay. However, for big object is important to use the repeat to avoid losing quality off the image. Big optics and the textures will come inside. It would also add. Let's see. Mm. Normal dash scale. Okay. Since this gives a sense of quality off the texture, you can see if I play with with that, you changes. Okay? Texted changes a bit. We usually win a bit of quality. This is useful, since compared to the first image off on the whim that we made up this cube. Okay, this actually looks a bit more like wood. You could play with the brightness, for example. Um, several things. This is what the wood looks like now. He kind of looks better than before. As you can see, even in the corners, we can also add, um, as I said, roughness on brightness. Okay, we can play with the roughness. Is 01 We could put a 0.9. Um, so? Well, in this case, there's not much of a difference, but for bigger objects, will you wouldn't be noticing the difference a bit more this is really useful. Okay? Playing with roughness. Andi Also in general, this is how we should do it now. This would be a kind of a complete way to send the text years off the Amy to normal maps. So let's continue to the following class. 11. Sky | Sky and 360º images: Welcome to a new class in which we will discuss the primitive element sky. We can introduce an image of 360 degrees for Panorama. Okay? And it will simulate this kind. Let's see an example. We can write a dash assets to load an image. Onda, we need to identify the image. Okay with the name I use a pillow which is the which is guy in Spanish. Okay, now also the SRC with the route today MIT's before I attached this image for you to use if we open it Okay, this is damage on now we can write the desk I right, Yeah, with the SRC hashtag sky or theater off course. Now if we say from refresh the page we will get the image on screen. It may take a bit, but as you could see, you would quite quick. All right, but it can take a bit since the image this image specifically is relatively large. An alternative is to use a lower quality image since otherwise the webpage maybe too slow. Okay, As you can see, I cannot move the images in 360 degrees. Okay? It really gives the impression that you're really in it. We would require the virtual reality classes too. The that rial impression to be there. Okay, but that's that's quite good. Well, so this guy has a property, which is a radios. This is by by defaults. It's 10,000 meters. Okay. Just move. Based for you to see if I change the radios 2 50 Okay, as such as I'm doing, you'll see that we will be able to move or relatively have this effect off. Moving. Move off of other back. You will see that in the end, the image will collapse into a sphere. The idea is that this fear is on our surroundings. But if we reduce the radios, we can actually get out from it. This is a similar object to this fear. Okay, Which normal fear? What has some different properties? As I mentioned the radius by before this 10,000. Now, if we want to feel that we can move around, we can also create a plane off 10,000 meters, being able to actually arrive to the end of this fear. This is in the case that we leave them before dimensions off here. Of course. So this is the sky set with the radios off 50 meters. It can also be used to create an introduce images off 360 degrees. Okay, This all of these sky correction. Yeah. So this is all of this kind. This is what you need to know. Let's continue on the following class. 12. Plane | Create the ground: welcome to this new class. In this class we will cover the primitive object plane or what's the same? The ground. You probably realize that in the first class is we had a plane on the bottom, which was playing green. I have been loaded, one texture and it's normal map. And now I'll attach it for you didn't loaded. Now let's go to the images, Okay? I'll just yet I'll just put them him. I'll change the names of the images to texture, texture normal takes a normal for the normal map off course so that I can easily identify later, Botham. Nice. Now let's go to the coat. As you can see, I erased of all that we had before. Don't work because we can always write it as before. Okay, So first we will create a plane which will be our plane if I save it to see what we are doing. Okay, so we're going to to is upload the images to lose, So we will create this, um, a assets. All right, over here on, we will introduce image with the I D that I described before us swelling, which is a ground for Spanish okay on auto, as before the SRC images. Okay, Image texture on the route. Good. We would also do the same but for the normal mark right over him. As you can see, we will change the name to swell or normal. All right, Onda, we will include SRC with the route to the normal. Then we close it Nice. So now we are prepared to assign the texture to the plane occurance now that we have the plane so here you we will assign a material to it to see the plane. Okay, we will put a red color initially as you can see Andi. Oh yeah Just make some changes, OK? I'll just put the color red over him. No, but you can see if I move the camera. This is plain OK that we have to find. As you can see, it is set vertically, so we will need to rotate it for it to be And horizontal plane. Of course, we can rotate it on the X axis for it to be always on, so I'll just write a rotation of 90 degrees on now. The plane is the front. Okay, Once we have the plane we can also introduce us care. I will make it this scale. Okay. Big enough for you Just it that he really increases in size. OK, I'll just put 15 15 on the same night, right? The same. Is that competent? As you can see now we have a plane which is a lot bigger. It's now a sign the texture to the plane. First, I will organize this a bit to understand it better. Okay. Alway tabulated. Yeah. Is it a bit better? Yeah, it's better now. What we can do is to include the US SRC on the idea off the ground. As you can see now we have the image off the ground. Okay? Of course. We will have to get rid off the red color because we were introduced to red card before on this color is buying a cold white. So as you can see now, that's correct. Okay, because way change the color toe white. We can actually change it to the seconds off efs it, Just get rid of it, Okay? Once we have this, we will apply the normal to include the normal man. Well, right, just a second. Okay, I will write normal dash mop for him with the I d off the normal section. Then we had before you will probably see that the texture changes a bit. Okay. Yeah, this is it. We also see that the image is too big in this case. So we should consider putting us came to the image also. Let's put a repeat. So yeah, I'm trying to this just put a repeat equal to Yeah, Let's try 551 Okay, we refresh it. And now? Yeah, as you can see, the BRICs. Okay. The protection are smaller. We'll also need to repeat the normal since probably seems the since the bricks there. Not much. The borders offer plain, as you can see over here to those we just write Normal. That's texture. Dash repeats following the texture. Ok, 551 on the way. Just refreshing. As you can see, the lions have disappeared and the texture is now better. Okay, also, what's interesting is that to notice that delight is reflect, Lee reflected perfectly on the texture on the plane seems to be perfect. All right, this is detection. If I don't know what I'm up texture. No. Also what we could do is an alternative to all of this, which is to do the following. We can copy the plane on bases below. Okay, Now let's comment the previous plane. Okay, Now we write the competent material, including the SRC, the repeats, Onda, all the rest inside the material itself. Let's see how to this. Okay, this is how it should be written ground. Okay, You know, semi colon, right? Repeats with with its data. Okay. And competence. Semi colon. The normal that. Sorry. The name of the normal map. All right, Andi. Finally, normal. That's texture. Dash repeats column 551 Now, as you can see, I can get rid of all of this. Right? First, let's tabulate this for you to be a bit easier to see. Right. So Yep. As you can see, the result is exactly the same to how we did it before. This is for you to know that each competent we can apply multiple attributes. Okay. For the material weaken, just apply everything altogether. It is not necessary to put it by separate. This is the final texture which is the same actual yet before. So this is old for this class. Let's go to the next video 13. Open the Visual Inspector: Hello, everyone. Welcome to this next class in this class, we will see quickly how to use the visual inspector off a friend. This visual inspector allows us to edit and any kind of competent off the element and to actually create new elements. Okay, It is really useful. Since we can create a scene visually, easily and quickly. We can also explored the code to use it afterwards. This is the I'll just go now to the good cup. Okay. Over the inspector. As you can see, this is a serious off files that we can use for our project. However, it's not necessary to download. Um, since it is uploaded on a frame already, we can use the inspector off night. Okay. Although I do recommend you if you're going to use it a lot too. Don't note it. Since this is to be used only a few times for this project, the online version will be OK now, As you can see, we need to copy of this part that I'm selecting. Okay, on what I will do is to introduce it to the scene to the code. This is way we will get a visual. Inspector okay. And we can play with that, Or now go to. So let's go to the goat, as you can see it. Here. I have a red coop. Okay. Now let's introduce the inspector to call the inspector. We must do control out I Andi. Then we do that. We will get to the visual inspector. As you can see, the Cube appears in the middle. This is the how the inspector looks like the orange lines defined the vision of the camera . For instance, if we want to rotate the cube, for example, we just go to a box. Okay? Here, on the left, on you can see that we can find rotation. Right. And we just wrote it. Okay, Once we like that changes that we've made, we can go to the upper right of the screen over here to export these two html. We click on the bottom, and then we go to the code and simply replace. This is the A box, as we had before, with a competent off the Cuban we can suppress. They two brackets idea, see? And, um, it is only used temporarily in the inspector for us to edit it. Okay, once in the edit to we don't need it. So if I go back to our project, you can see it has been edited. Another option leads up with control out again is to directly download all the scene off the inspector by exporting the HTML. As you can see, also, we can add new entities on to copy the scene to the clipboard. We can copy it and simply replace it on our HTML. As you can imagine, we would need to give some former to the text. So for the next for you to be clearly understood. Okay. As you can see, this is really useful and works pepper further on. We will continue to use it and work with all of the options off this Inspector. 14. Import glTF Objects: Welcome to this next class. In this class, we will discuss how to import a three day motor to our weather VR project in a frame. I'm gonna attach link in the description off sketch fat where you will find load off three designs that you can easily import to your party. I don't know. Did this three day modem Luigi's mansion in resident ever. Okay, this one over here. Let's see this three. The motive, Okay, As you concede, may take a bit. It's loading. Here. We have, um, this guy. Okay, beginning and in the sky. We have the model off. No. Two don't noted weaken. Simply downloaded from Okay, this is the whole hope Sky on the object in there inside. No, to download it. It is Go from here at the bottom. Okay. Over him also, I attempted for you. So did you have it? Even if the online version is not available, Okay. I don't know. Did the g l t f format, which is the former accepted by a frame this former in specific loads quickly on. This is why it is used. Okay, once with your noted three d will need to do the following. Go to the folder. Okay, let's see if I can find the folder. Okay. Inside? Yeah, Only intra. Beautiful. Down inside, I created a folder named Three D. And inside I created a folder named Mansion. And also inside. I accepted all that either Noted. Okay, I will. Don't noted again. So did you can see It's basically a zip with this through files. Andi, I just dragged him to the folder I mentioned. Okay, Now let's go to the project. Andi, Right. A dash assets. And inside we will create an asset item. I'm as you can see, I'm taking the documentation. You should get used to checking the documentation sits. It is really useful for you to go. Okay. You can see we have the eight assets items and we can find them. We can find that weaken Interviews three the objects and materials. So what I need to do is to write a s it item with an I d. I'm using mentioned Andi as usual SRC with the route to the fire. The file has to be DTL TF that we mentioned before. This is important. Once we have this now we have to create an entity and assign it to the object. So in the implementation, we confined the G lt f motor. Okay, we can see how to use it from here. We create an entity Onda. We put the i d to the g l t a motor. It's copy that with the i d. Mention onto our code. Good. Since the camera moves so slowly. Okay, we Yeah. Okay, this is now the object like this is the three D model. As you can see, that camera moves very slowed since the given skies big. Okay, so the first thing we can do is to actually create a camera. Let's create an entity. And inside the entity we will create, actually the camera since the camera moved. So sharply weaken. Interviews are W A s the dash controls with on a tribute named Acceleration. Okay, the acceleration, Kahlan. Let's set it to 10,000 by the fold. This number is 65. You can see now we can move quicker with the camera and we'll get into the sky. Weaken. Actually see the mention. Now, what we can do is open the inspector with control out. I Now, if we look for the entity. Well, it's just make this bigger. We can see that the camera is out off this fear out of this guy. Let's try to put the camera in the inside. Okay? Lets see. See if I can do this after do is to introduce the camera into this guy. Okay? In order to see the mansion. Okay. So I can't seem to find the way to get into this fear there. Well, you can try. Let's copy the entity. Okay. That commandant entity, I just clicked by clicking top, right with the lid, a camera that we had and we introduce a new one. Okay, They should do it, as you can see now. Weaken. Definitely. See the object that we import. So this is how we can introduce three D objects to virtual reality on a frame 15. Import OBJ Objects: Hi, everyone. And welcome to these new clothes. We will see how to import three D models. Okay, On T o b g former. As I mentioned in the previous class, I don't specially recommend this format since it usually ends up with some errors. Okay, so I've downloaded a couple of examples from Internet with their respective materials. So let's write a assets. And inside we write the following. Okay? We're right. A dash. I said Dutch item. Okay. And here inside, we're right in the first idea. In this case, it's house dash O P. J. Okay. S Aussie equal to three D because, uh, slash cottage under school, open t dot OPD. Okay, You'll find this files attached in the description. Entire fold containing Gaza and Cottage. Okay, this fun. So when I was just copy all of this on picks it here on now, we changed to empty l. Okay, which is regarding materials and on this fault, which is just the with the empty informant. Okay, so now we let a couple more assets asset item I'd equal to. Let's see motile dash. Oh, beating. Okay. And SRC equal to three d slash Both Oh, okay, which is well in Spain, in Spanish slash Well, Opie Jim Okay. On Dhere. The same with the materials, so don't empty out. Okay? So once we've done this, we need to create a type off object. This can be done with a dash obesity modem. Okay. And s are sissy. We add the i d off the objects. So just house all motor. Let's try with Motile OPD okay. And its related material So mtl equal to the idea. It's important to write the hashtag since we are right in the idea. Okay, so we save it. And as you can see, there's something them. Let's go. Better to individual Inspector. Okay, so this is the well right. However, the materials have not loaded, the materials have not loaded. Because since this is no bt, we're facial. Only have Evers with a frame. Okay with this a frame. So if we change it to house oh, Bt and the material house mtl Okay on DWI, refresh it. We go to the official inspector again, and as you can see, the house works right? But there's no I mean there's an error regarding the materials. Okay, since he does not know how to assign them to the motor. So this is a problem in a frame, right? I recommend the all three motors. Did you import are gel G lt efs. Okay, since it works better than O p g. All right, so we've seen how to import these motors. 16. Introduction to animations: Hi, everyone. And welcome to this new section regarding animations. Let's start seeing a simple example for you to see some basic stuff to do with a friend. In further videos, women cover these topics in more detail. So let's begin with the animation examples on documentation. Okay, I will also put the link for you. So we copy this code, which is really basic code. Okay. As you can see, we have an entity on inside. We have another entity. Okay, Andi, also in animation. Okay, So once we have all of this, we can save it on. Go directly to the Privy. You off our project. As you can see, nothing shows up. This is due to the fact that the entities don't have color properties or or any other properties himself. So we should adhere in entity a box. Okay, uh, this is the books we closed toe. We close the box label on once with done this. We said the petition zeros Who? Joe. Forward to be centered. Andi, here we have our books. Okay. Next into the use of color, read, for example. Okay, so here we have our box, which is rotating as you can see we're using an A animation which forms part off the entity because there's inside of the entity. If it were only interested in animating the box, we should change the animation too. To the outside. Okay. To care. So inside the box. Now, we're not animating the entity, but rather only the box. This is important. Okay, for several animations. So, as you can see, we have some attributes such as the position. Uh, duh. Okay. Feel to repeat Andi, Others that beer here in the documentation, I'll talk about some of these ones. What now? And further classes, we will see them in more detail. So the attributes by the fault is rotation, as you can see in the documentation. Okay. Duh. I love more than we also have the game. This is the time that we have to wait for the animation to stop. Okay? We also have delay, which is similar. All right. But in the end of the animation, the direction which in this example we don't have to find it can be normal. But it fault alternate. Which means that given our state a conversation, for instance, it would rotate to the right and Wendy Animation ends rotates to the left. Okay, We also have alternate rivers, which is just the contrary on a normal by the full down reverse. Okay, the rationing, our cases. 10,000. By the fault. This is 1000 milliseconds. So by the folded a second. Okay, in our example, that aeration is off 10 seconds. If I change it 2000 you will see that the box moves very quickly. Okay. We also have the field, which he basically determines the effect off the animation when it's not being executed. Okay, by the fault, this is forward. We also have from which is useful for, say, if we want to change the size of the box initially in the from, we can write the initial value Andi under to weaken right the final size. Okay. Also, we have repeat, which we also have in our code repeat by the faulty zero. Okay, we can write indefinite, which means that the rotation will take place indefinitely. So this is a first the overview over the animations. So let's just see the attributes on what we can do in the frame on day frame animations 17. Attribute: Hi, everyone. Welcome to this new class regarding animations in this class, we will see the attribute. So let's go imagine we have this animation, okay? Exactly the same as we as we used in the previous class. I'll set a time off 3000 milliseconds. Okay, now we go to attribute. Okay. As you can see here we have rotation, which is defined by the fault. Right now. If I don't write anything new regarding rotation, this is what we have. Okay. As you can see, it continues to rotate. So now what we can do is at on attributes equal to scale. So we test rights came. This is an example that I mentioned in the previous class. Okay, now we're right to from one. So the two is the final size that we want, So I will ride 555 Okay, Andi, All yet from 111 which is the default size, the size that we currently have. So once done this, I will let the direction here you concede in documents, Okay, on a frame. So let's out direction equal to alternate so that the cube increases and decreases in size constantly. So this should be it. Okay. It's just, um get rid of this. Okay, Let's try it. You just refreshing. I move the comer of it so that we have the cube here. Okay, So as you can see, the cube increases and then decreases. All right, but you can see we're using the ultimate direction. If I use normal, the effect wouldn't be a soft okay. It can be used to However, alternate is apparently smoother and I guess just more fun to use. All right. So let's die now. Another thing. The color, for instance. Here, in attributes. Okay. Oh, yeah. I can add material dot in from I will introduce Red, which is the default color into. I'll set it to grin. Okay, So once we have this well, tonight Yep. As you can see them. Now, the color is changing from green to red all the time. The duration is three seconds under color changes. Another thing that we can do. However, as you can see, we have infinite options. Okay? We can change the opacity, for instance. So instead of material that color, we can change it to capacity. Okay. We can put from one, which means total opacity without transparency. 20 dot to okay. And I save it. Okay? No. Yeah. As you can see, the Cube changes the opacity over time. So we've seen the attribute. Okay. Let just let me show you that. If we have the attributes rotation, say from 00020 360 0 Right? The same way as it was initially. Okay, Andrew, save it. So we see that the Cube is rotating okay on itself. But what would happen if we put the animation to the entity? So in theory, it would be the same result. As you can see, we obtain the same. Okay. Okay. This is the same. Now, just let me know what would happen if I were to move the box off position. Okay, So as you can see, the box starts to rotate Not only taxis, but rather respect to the center off density. We have the entity in the zeros in original position by default, which is rotating the box at position 200 The books does not rotator himself, but rather on the entity. It's easy to understand however, it is surprising conceptually, the entities moving okay, on the box is moving. According. So this is why it's important to know where to put the animation. Okay, So if I were to just change it again, too, inside the box. Okay, we would see that again. That says, before the book starts to rotate on itself again. Okay, let's try this. Yeah. So let's go to the next class. 18. Begin and Delay: Hi, everyone. And welcome to this new class. Let's see the begin and the delay. Basically, it's this over here. Okay. These two over here. Right? So they're pretty similar to each other. As you can see, he I haven't animation, which is the same as the previous class. If we introduce a delay equal to 3000 then each time the animation is ended, the animation will stop for three seconds on the end. As you can see, the animation works and then start for three seconds. Okay, then we also have the begin, which is very similar. What we will do is to introduce begin equal to 3000. Okay, No, As you can see, the animation wait for three seconds and then the animation stunts. So this is the laying begin, which are very similar, really? Only changing when it is that the animation stops. Okay, so let's go to the next loss 19. Fill: Hi, everyone. And welcome to this next class. In this class, we will see filled. Phil determines defines what the animation will be like. We'll see some examples. It's really easy to understand. As you can see, we're using the same example of previous classes. Okay, we right, Phil, On in this animation, we have red box in the central part. Okay, So that the full value is forwards. All right, By using this, the opposite gets bigger with the animation. Okay, So when the animation ends, the value off the scale, which is what we're modifying with the animation goes to the value defined at two. In this case goes from 1112333 Okay, Before words says the animation said that in the end we see the cube in the size that finding too. So the final size. Now we also have backwards. Okay. In this case, as you can see, the books would bit bigger. But in the end of the animation, the box returns to its initial size. Okay? They finding from so backwards before the animation starts resets the value off the object to the from value. So when the animation ends backwards, resets the value off the cube to its original size. Accounting for instance for following animations. Okay, as you can see, the Cube appear smaller in the end. Off the animation, we also have none, so none before the animation starts also resets the original value to from Okay, so in the end, the box has the size defined. Initially, let's go to the following video. 20. Direction: Hi, everyone. And welcome to this new close, we will see the direction off the animations. So if we right direction over here by before, they will be set to know, this means that the animation starts with the values off the from Onda ends with the two families. So since we're doing a scale change Okay, the animation starts at 111 Andi ends in 333 Okay. As you can see, the cube gets bigger. We can use the reverse to do the opposite with a reverse with Start with the values off to and end with the from values. OK, so it would be from 33 32111 Okay. Also, we have alternate. All right? We contains Toe Walton, that you in the cycles that the number is spare alternate makes the animation go from two to from otherwise, the animation will start at from and end into. To do this, we need to repeat okay, so that we can see how these wigs we're right. Indefinite. Okay, So now, as you can see, the books gets bigger, Andi, then smaller, so continuously from being small to being big. I am back. Okay. This indefinitely. We also have alternate reverse, which is just the contrary to alternate. Okay, so the animation starts with the box being big as you can see. Yep. Then it gets small and then big again. All right, this is done continuously. So the idea is for the payers cycles. This animation moves starting at from and ending at two. So the reverse to before, in fact. Okay, with this, we can continue to the following video. 21. Easing: Hi, everyone. And welcome to this new class in this class we will see that easing easing defines the velocity off a given animation. There are several times, all of the's okay that are shown in port. I'll attach the link for you. Basically, it can define whether the animation will start slow and then accelerate the reverse under this. So the idea is to use whichever is best for you, depending on the animation that you want to. Okay, so let's go to this page, which I will also at that which is easing. Start yet. So these are graphs off the velocity off the animation. Okay. As you can see, some of these animation start slow. Such as this one, for instance, been increased velocity, and later they go slowly again. Others that initially are slow and by the end, accelerate. So there are really a lot of times I should note that not all of the names off the easings in this web are named exactly in the same way as in gray frame. Okay, a lot of them can be used on others, probably will be similar. Let's go back to our previous animation. This red box, which continues to increase in the creation size. We cannot an animation velocity with these. Okay, So imagine that we want another type of animation. Um, yeah. This is the easy. Okay, so we interviews easing peace. Dutch out. Okay, Yeah, this is the name. So now we're safe, and we will face the page. Right? So as you can see now, we have the eat out. As you can see, initially, the box kind of explodes at high velocity, and then the animation is slowed down. If we go to the Web East would be similar to this one here. Okay. Initially, with a high velocity, and then it slows down. All right. Any any off this kind. I'm sure which one it is, but it would be similar to this one. As I mentioned to, you should try different types to see which one fits best. Okay, so the idea is to look for which type off east we need, and okay, we need on then look at the documentation to see its name on a frame and use whichever serves our purpose. As we've seen, East determines the velocity off the animation through time. So maybe we have irreparable. We won't be using the same as if we had met Sally winced. You can choose as you prefer. Okay, So see you in next house. 22. Spot Light: Hi, everyone. Welcome to the new section where we will see the different types of lights. So first you have to know that scenes by default have ambient light's ambient light Means that the ambient all off the scene are applied to all of the scene in this case. In addition, we also have a light which is directional from here. Okay, Andi illuminates a bit more. Also, we have ambient night to delete this amber light. We go to the sin and right light equal to default lights enabled. Okay, Kahlan. False. If we rephrase the page, as you can see it all black. You don't need to be really intelligent due to deduce that there are no lights. OK, so let's add a live type spot. Who will be seeing the visual inspector to introduce lights and move them around? So we're simply click control out. I okay. And okay, we can open the inspector. Yeah. So first we will look for the spotlight. Okay, so we click on the plus. And yet here on the right, we select the competent light. Okay, we click the plus. And here we have the light component created. We can change the type of light which is directional by default. You select spot. Okay, So as you can see, one face off the cube is being you eliminated. If I change the position of the light, the cube is more or less visible. Okay, Right. So what I'm going to do now it's rotate the cube to minors 90 The grease. Okay. On the X access, we select miners 90 and enter, as you can see, the lightest type spot or punctual. Okay. And is useful video games to simulate torches. If this circle is too big for us, we can reduce the angle, which is by default off 60 degrees. We can change to the angle that best fit sets. Okay, it would change the color. Uh, we can also change it over here. Okay, this is test taking the angle, right, Onda the college we can change over here. We can put our kind of a yellowish tone or something. Maybe orange. Okay. Something in between. So this would be our spotlight. Okay. What else? We can also edit more things. Okay. If we want to similar to torch, for instance, we can add penumbra. Okay, which adds a kind of a shadow on the edge off the circle. We could also change the intensity, which, by the fault, is one. It will increase it. It will be bright. Okay, We can also decrease the brightness. So this is how we get how a spotlight. Now we can just put, um, put it where what goes best. Okay, Once the lightest positioned, we just copy the entity and copy it to our code. We select the entity in this case, we have it already selected. Okay, we go here. All right, To the right. This here. Okay. Andrea Koppel, the entity HTML to clipboard. We go to our code, and we just added here in the scene. Okay. As you can see, another light has appeared since I've created this one on the HTML itself. So this is what our live position looks like. 23. Ambient Light: Hi, everyone. And welcome to a new class where we will discuss the ambient light. So we go again to the visual inspector. Okay, remember, It's control out. I all right, Andi, here we have opened a visually inspector. Okay, once here we have the lead to the fort lights in the scene. Remember? You have to go to the label off the scene. Onda right is over. Over. Just here. Okay, that's right. Light equal to default. Light enabled faults. Right? So once we've done this, our scene is black. We let our ambient light now instead of the default one. OK, we go to the plastic here, also to the light, we again click on the plus on DNA. Now the light is created. It is directional. Okay, here is underground. So there's no light on when the box is just above the ground. Okay, it is light. You can see this star Kern did his light, and now all right, this is for another class, anyway, so, yeah, for ambient light, the decisions on important the light appears wherever we position our object. Okay? This light has effect on all the entities off the system. We only need to define the color on the intensity position. Rotation scale OK are not important for this type of light, since its position does not change the Enlightenment. Okay, all the elimination if we change the color to yellow, for instance, Andi un. Except we have this kind of Ah, sorry. Yeah, OK. And accept we have them. This yellow light. Okay. And as you can see, the ground is not the same yellow as the light since the ground is great. So the color that appears is kind of a mixture between the yellow and the grain. Okay. Also, we can change the intensity off the color, right? If I changes to two or three, the brightness increases a lot, as you can see. Okay, if I reduce this, um, the scene will also appear dark. All right? There's really not much more about this. So let's go to the election. A light 24. Directional Light: Hi, everyone. And welcome to this new class in this class we will see the direction. Right? So we're going to use the visual inspector. Okay. The same as in previous classes. To do so, we just click on control out I. Once the inspectors opens, we can add a new entity. Few on the left and confidence. Okay, we had light. We could come. We click on plus on Dhere. We have already are directional light by the foot. Have you noticed the light is in the position? Zero minus 10 Okay. This means that delight is below the plane that we have here. We have a great plain on the cube so you can notice that when the light is above the plane . If I said it at 001 position Okay, the plane will be eliminated, right? If I said zero, then the plane is not eliminated. This simply I mean, it is really simple. OK, so directional light is coming from infinity. So we only have to establish a position on a direction to obtain the vectors from which the light will be coming. Let's say that for instance, in our scene we have added a 360 degree image with a son so we could have a directional light which comes from the sun so that the shadows will coincide with those coming from the sun. OK, so if I put it above the plane, it would light all that is below the plane. Okay, so all of this will be lightens now. If I were to move it to the left, it will light everything below. Okay, but the light will be coming from that direction, as you can see. Okay, Just let me let me show you this. I move this to the left. Okay? You can see the light will be coming from that direction. Okay, so you change its position, depending on where you put this light and the light will be coming from one location or another. So as I mentioned, this light comes from the infinity. Okay, so we need to know also have to adjust intensity, direction, position to illuminate correctly the scene. It is simple to use, so it's not going to be more difficult than this. Okay, try to play with it for for a while. Okay. Until you get to know, really how to use it. Andi, As I mentioned, I think this would be everything off this light, So Yep. Okay. So I'll just see you in next last. 25. Hemisphere Light: Hi, everyone. And welcome to this new class in this class, we will see the hemisphere. Type off lights. OK, let's add an entity from the visual Inspector has previous classes. Okay, let's at the competent of light and one for them. This was like the hemisphere on type. OK, once we've found this note and by the fault, we have white collar. Wherever we move the light, there's no effect on the result. Okay, so this means that this light is similar to the ambient one. There's one difference, though. This light has two colors on one hand has color on on the other. It has a ground color. Okay, this is useful for objects in our scene, which won't be represented by only one type of flight for those objects. Didn't we need to kind of lights? OK, this will be a really useful tool. All right, so we can just see an example. Okay. If we select the light, um, we can select obviously a color. Okay, I can change it. Teoh Some kind of off a yellowish color, for instance. Or greenish whatever. So, as you can see, if the light is above the plane than the plane has this color. Okay, the light is this color. However, if I go below the plane, you can't see the card. Instead, the ground color will be seen. If I move the light above, he changes. Okay? Just let me show you this. Okay? So there's two colors on. Depending on the position of the lights, the color changes. So this is useful for some cases? Well, we want to represent two types of off lights. OK? Some specific objects. All right. So basically came is fear. Light is ambient light, with the main difference that he has two colors and it could be quite useful. Okay, For some cases, no more differences. Let's go to the following light. 26. Point Light: Hi, everyone. Welcome to the last class off lights. In this class, we will discuss the point night. This light is on directional and has an effect on materials depending on the position on the distance. Respect to these materials. Let's see an example with the visual inspector. As you know, to go to the visual inspector. We just need to press control out. I okay. We had a component light here on the right, as usual. Plus and we select the type of light point. So here we have the point. Life, as you can see when we decrease its position. Okay. The light appears. Has a point. All right. You can see it can illuminate all the scene. This light doesn't have one particular direction. We connected the distance. Andi. How does like dick reasons? Okay, Audie. Case in intensity. So we have this light so we can modify basically these two things. Okay, We have the distance. Respect A Why? So That's the height off. $11. 99. So if I read 12 Okay, this is $11.99 there on current position. Okay. If I write 12 to distance, the scene will appear black distance means that when this one, he moves to this value. Okay, the light will be zero. So 12 meters, the light would be right. The heart is has no a C $11.99. So a 12 we don't have any light. If I would use the height, you can see that a bit of light appears. Okay. The closer I get to the ground, the more light we have. This works like this, okay? Partly also because of the decay which defines how much light will be lost. Part meat off distance. Okay, If the value is very high, almost all of the light gets to the ground. As you can see, however, if it increases okay, its value. We have less and less light. We can do this with the K. Okay? We need the distance to define the rial distance where light is zero. Okay, so I think not much more needs to be explained from this in terms off modifications. Okay, this would be all you can try some things for you to understand. Better this kind of light. Okay, Now let's go to the following video 27. Shadows: Hi, everyone. And welcome to the new class. In this class, we will discuss the shadows. As you may have seen, some objects don't have shadows. OK, this easily solved. So first we have the light entered in which, as you can see, has the property cast shadow. Okay, let me show you this. The cash shadow should be just over here. Okay, It is said to true right now. I want you to see these beds. Okay? So you can see that they that here we have the lights. Okay? And here a shadow appears right following the movement off the light. Right? So if I click on the cast shadow and deactivated on markets, OK, the shadow disappears. So to have this shadow, we need to have the cast shadow activate also those objects which we want to transmit. Shadow. For instance, In this case, this cube okay, in the front, the shadow cast has to be activated too. If I were to that faith cast shadow in one off the two cubes, no shadows will appear on the scene. All right. If we want to add this on html, we go and at it. Let's see. Yeah, Okay. I could find the code. Okay if I introduced the code here. All right. Indy entity, we have written shadow Cast color. True. So with this, we would already have the cast a shadow on the objects. Okay, Now, if we want to add to lie to the code, we copy the lights hand pasted on a code. Right. So here it is night light, equal on all off the characteristics. But as you can see in this characteristics, we also have shadow. True. So as I mentioned, we need to mark cast shadow as true if we won't shadows on our scene. So this is all to this section. 28. Primitive Cursor: Hi, everyone. And welcome to this new section in this section we will see how to interact. You ate okay. Between objects off the scenes. In this first class, we will create a cursor which will follow us toe where our vision set Andi which will be useful to interact with objects. Okay, in this class women just created. So we will create a camera and inside create a ring competent which follows us to the center off the screen. It's relatively easy to create. So first we need to create an entity. Okay, we write the camp, the component camera on Luke controls so that we can look around the scene on not only one fixed point. Okay, Once we've done this, we create an entity in their insight. This entity will be a cursor now. We had a position. Okay, um, we had disposition over him suspicious and can be, for instance, 00 minor one. So the cursor will be at a distance of one meter into set access. Now we just have to define in geometry. So Germany equal to primitive. Kahlan. Andi, let's say ring. Okay. As you can see here we have the ring completely created. So now what we can do is define each radios. Okay. We will use radios in the Okay. Let me check this. Yeah, It should be a radios inner. Okay. As 0.3, you can see it really small. And finally we're right. Radios outer. Um, well, put him 00 Not for for instance. Okay. Um, yes, maybe I Okay. Visit. But so here we have the ring, which is our curse, Right? As you can see, it is not following us since I defined it as camera Tory Canada. Okay, so, yeah, that's that was a mistake. Okay, Now we save it. If you go to the scene. Well, in fact, we can't see much since we don't have any objects rated. But the curse is actually for really us. Okay. So, indeed, we have the cursor which is following us. We can either box to the scene, okay? Say red, for instance, on its position equal to 00 minus two. So let's play. Okay? Yeah, So that you can see we can move on. The cursor is always in the same spot. In this next classes, we will see how to interact using this ring with the objects off the scene. 29. Add Click event: Hi, everyone. And welcome to the new class. In this class we will see how by click on the cursor, we can make the cube change its color. Okay. To do this, we will program with three Js which similar to JavaScript. We need some basic notions to use it yet. It's not complicated. Okay, We will go slowly to make sure that everything is well understood. So the first thing we will have to do is at a competent okay named cursor listener to the box. Once we've done this, we create a code. Okay. Over here inside the head label. At least out of the scene. But before the scene, Okay, on the court. So we write script, okay? And inside the script, the first thing we can do is to register dis competent. Okay, so we write script and inside a frame dot Register competent. Okay. And here we had the name of the component, which is cursor Lizza. All right. We also add a comma and opened the brackets. Right? So now what? We will do iss when the code initialize a function is executed. So we registered a competent and now we say once it is which is to it. Here this function is executed. Okay, So night now, inside the function we can have, uh let's see, in the inside we can define, for instance, a new variable which will be a new color equal to green. Okay, We define a new variable and new color. He called her green. All right, now we simply have a new wearable with a new color whenever we click. So we have also we need to write that when I click the color changes. Okay, We write this dot l which go for element. Ok, not add event listened. All right, over here. We right click, which is the function that we want. Also, we ride function to be executed when clicking. Correct. So here, event o E is okay too. All right, let's continue here. Inside the function we write these dot said attribute material. Okay. We right? Cotler. Oh, Okay. Andi, new color. Okay. No, let me just see this works. We had semi colonic here. Okay, um fear to semi colon or write all of this. Andi, I think this should work. Let's see if this works. Maybe it works. Maybe it doesn't really So let's see. Using the inspector, we can see the address. Okay. In lines heaven, for instance, there's an unexpected token. So here I'm liking the brackets. Let's try again. Okay? No, there's no era. I click. And as you can see, there are no errors. Okay? It works. Okay, Important. The console. If you want to show messages to see if the code is working correctly up to this point, OK, you just have to add console dot block with in it. OK, In this case, have you want to see if it's getting here? You can add could console log off, click All right, this will appear later on the screen. So here you see, you have in it right? And if I click here, you have click and you can see that ive I click again. I get click again. OK, so it is useful to know what's working and what's not. It's not really complicated. As you can see, you need to register the competent, then initialize it aan den, add the listener. Click with what we want to 30. Using Fuse event: Hi, everyone. And welcome to this new class in this class, we will see the event fuse. This event is commonly used for virtual reality video games. For instance, this event is basically that this ring here we using as cursor. Okay, when the user looks at some specific point for some time to a certain object, then it league is executed. It is used in phone games, for instance, where we don't have a remote to click on anything. So this is the way to do the clicking. Okay, In this case, the click is done by looking into specific point for some time. Now, let's see an example. It's pretty easy. Okay, um, we have to go to a cursor which is created here. Okay. On Dhere, we right cursor equal to refuse. All right, Colin. True. This is activated by the Fulton Mobile, but not full computers. OK, semi colon fuse. Time out. I'll just write it here. Andi, here we introduce the time in milliseconds. Okay, So which would be the user? Okay, waiting for the click in this case, I'll just put down two seconds on 2000 milliseconds. Okay, now, 13 Sundays. We added the coat above. Okay, so I get rid of the console dogs. Um, I live this one, OK, we have to click. OK, but we also have to add another one. Let's copy these lines and paste them just before or after, just as you prefer. Okay, here we write Fusing This means that the user will be looking to the box in this case. Okay, so the countdown will start now, So we opened the code. Okay, so this will be executed when the user is focusing on the box. Okay. Is the countdown which zero? Then the click will be performed here on the console I introduce. Diffuse to differentiate. Okay. We can leave the color green. So when we're physically click okay, it will become green. Let's also add that when we click that time when the click is performed because we're looking to the object, this becomes yellow. All right, let's try this out. We refresh the page and you see that automatically. It's greens inside was on top when loading debate. Okay. If I look into the object, you can see that the box becomes yellow two seconds after. If the cursor is not on the box, then color doesn't change. However, if I move to the box, we can count to two under. Color off the box will change to yellow. So this is fuse. Okay, let's go to the next video. 31. MouseEnter and MouseLeave events: Hi, everyone. Welcome to this new class in this class, we will see the events. Mouse center and mouse Leaf Mouse Center is executed when the Cosa contacts the object. Okay. And mouse leaves is just the country. So it is executed when the Kherson does not have visual contact. Okay, with the object to do this, we change the coat that we're using until the previous class. Okay. In the event listener. We're right, Mouse, enter. And in the second we introduced Mouse leaf. Okay. Also, we change the console log to know what we're doing for its instant. Okay? We're safer it on. We go to the code. If I'm not in contact with the object, as you can see mouse leaves. A P s on the box changes car. Okay. Instead, if I contact the object, the colonies changed again on mouse enter appears camp. So this is basically the mouse center on mouse leaf. They are executed when we started visual contact with an object. And when we stop being in contacted with him, Okay. So once we remain in contact, nothing happens, right? Only one will change. Let's go to the next class 32. Getting additional information about events: Hi, everyone. And welcome to this new class in this class we will see how to obtain additional information regarding events here on the events we wrote these e Okay, this e can give us additional information. Let's say an example. We're right here. A console log with e dot detail dot intersection. Okay dot Andi here we write several things within. Right. Several things such as distance point, object on others. Okay, let's start with point now. We copy this and we base it into the mouse. Leave. We cleaned the console. Okay with this. So now when I end the contact, OK? Between the Kherson and the box. Here we have an object which are coordinates X Y, and set 00 and is at his minus 1.5. If I contacted the object we see again new coordinates. Okay, So this is the point where I contact or leave the object. Okay? Which is being detected by the program. We can also change the point to distance. All right. Okay. No, you can see I obtained the distances to the object, depending on where I am looking. All right. So we also have other things such as, um, As you can see, these are older distances. Okay? We also have other things such as object, uh, with credit, right? Optics, and we refresh page here. I have all information regarding the object. Okay. Type of element in geometry and other. I can see all of the information off the object. We have some other things, Such as face. Okay, so So yeah. Yeah. As you can see, we obtain information regarding the faces on Vertex. Okay. Off the box. Okay. We also have Indy says so we're right in. This is okay. In this case in this is our and defined. All right, So what I recommend you to, though, it's to practice the different things that we've seen up to this class. Okay, the click the fuse in the mouse center on the mouse. Leave on this things For additional information regarding the object this can. OK, all of this can be used to execute more complex codes. So this is the end off the section. Let's go to the next one 33. Movement and alternatives to default camera: Hi, everyone. And welcome to the new section where we learned the movement collisions and others. These are things that we've probably seen throughout the course, but they will be probably clear in these next video. Okay, so first we have a scene with a plane off 15 times 15 meters. All right. Also, we have a cylinder on Cuba. These optics are floating on top of the plane. As you can see, we can move around, look to the exterior off the scene and others. Let's see what happens if we had our own career. Okay, so we go to the camera, okay? A camera and we safe. As you can see, we our position is not really optimal. Okay, so what? So what can we do? So we need to first nor the properties by the fault off the camera, such as the W A s d. Okay, which allows us to move with the keyboard keys and which is also useful to look to the exterior off this him. Okay, so if we create here on enter team, okay, we write and to date yet. If we ride in the camera inside and we save it as you see, we cannot move nor rotate. This is viewed to the fact that we need to add to the camera W A S D controls. So as you can see, we can now move around. All right. Also, we can add loop dash controls. Now, we can also rotate and look everywhere. So one with on this, we can organize the code for it to be a mint. More clear. Okay, Now, we already have a government. By the fault, we could add more things in the W. A s taken, Charles, we can add acceleration. Okay, so we simply right equal to acceleration. Okay? And we can put on 20 for instance. Okay, so now the movement, he's slower, as you can see. All right. Another thing we can do is to add easing with a value off 30 for instance. Okay. This what it does? It makes them movement look a bit smoother. All right, what else? The camera doesn't have an initial petition, so let's add a default position equal to, let's say zero 1.60 Okay, As you can see, the camera is again on the initial position. And if you can remember the camera by the fold or right is set at 1.6 meters height, which is similar to the average height of a human being. Okay, this is Ah, general kind of average, right in reality and maybe a bit more. Who knows? But the idea okay, is that different. Default camera is at the height off 1.6. So this is what the cameras to find us by default if we want to create it from men Entity, we need to add all of these properties. Okay, so it's interesting to know that since you can set the cameras, okay, you continue congest set him as you prefer. So in this way, not all pages and games created okay? Don't really need to be the same.