Now that it's installed, go NPM run dev again and start the server. 2
Now that it's running, I'll close all the other ones. Now that it's running. I'll delete the last ones 3
Hello 1 was an example to explain react, so i will delete hello1. 4
All the associated lines are deleted, and I'm going to get text R3F basic . 5
And then we are finally going to add canvas tag, so import canvas, and it will automatically get it from react three fiber, and now we have added in canvas. 6
So basic text came down from the top to the bottom 7
because now we have canvas on the top. 8
Let's check it from the development tools, 9
And now you can see that this part right here has been added as canvas. 10
So this part here is canvas. 11
And inside the canvas, you can't put html DOM as child, 12
but instead, the canvas element only. 13
For example, if we put 'r3f basic' inside canvas as child, 14
on DOM, it will automatically print as text 15
but with canvas, it will only recognize it outside Canvas. 16
Inside the canvas, you can only put the canvas element 17
Let's create the canvas element then. 18
we're going to make a file first 19
called three Element Tsx, 20
function threeElement. 21
Like I explained last time, if you return HTML dom 22
it will be general react component 23
but in this case, I'm going to return three js element. 24
So we're going to import it on app 25
from threeElement, and you will see an error 26
because we didn't export, so let's type export default. 27
And this time, it's going to bring it back automatically from here, 28
And because there's nothing in return 29
that's why I'm going to get an error, 30
so if you add it here, you won't see an error anymore 31
So we have returned three element. 32
erase that, we don't see anything yet 33
because it doesn't have anything in it yet. 34
I add mesh, and you don't have to fully understand this just now, 35
and I'm trying to show you first, so please just follow the steps 36
I'll create a box geometry. 37
I'll add a material, mesh standard material. 38
And you see something here? Because it's too small, let me make it bigger 39
ok canvas is small too. 40
ok, let's modify app.css defined on app 41
And I deleted everything inside app.css in the previous video 42
So we have HTML, body and we have root, a DOM with ID in Root. 43
I will enlarge everything all at once. So Root has brought back in Main.tsx 44
and rendering will start in root. 45
so there's html, body and root 46
and let's set margin 0 and padding 0 as well 47
width 100%, height 100% 48
ok then html, body and root will be 100% 49
so we can see it on full screen. 50
And we call it CSS reset. 51
it's method to ignore the existing CSS in the basic browser. 52
ok I'm not going to go any further than this. Let's come back to threeElement 53
let's try to add in colour in mesh standard material. 54
let's set the colour as red 55
but it's not changing. 56
And that's because there's no light. 57
let's add directional light with position 58
5, 5, 5 59
Then you can see that it's rendered in red. 60
Now, let's rotate the box. 61
to do that, we will have to rotate mesh 62
rotation is x y z and let's rotate the y axis by 30 degrees 63
ok now it's rotated by 30 degrees. 64
which looks bit weird. 65
That's because in three js, it rotates by default using radian, 66
but because 30 degree is a degree, 67
so it needs to be converted. 68
ok to do that I will use 3JS builtin function. 69
let's first import three js 70
THREE 71
MathUtils 72
degToRad 73
ok THREE in all capital letters is a different variable name. so it didn't work. 74
so input 30, then we see that it's been rotated by 30 degrees. 75
Well... if I want to rotate it by 90 degrees 76
Then the box will rotate by 90 degrees, ok they look the same right? 77
Yes. If I rotate it about 80 degrees, it will rotate just a little, and let's rotate it by 45. 78
Y axis 45 degrees, and X axis 45 degrees, 79
So I rotated XY axis by 45 degrees and that's how it looks. 80
I showed you how to draw a 3D box by using react 3 fiber 81
In my next video, I'll explain the basics of 3D, 82
but you don't need to know anything about that just yet. 83
I'll explain the basics in my next video, so let's move on!