Creating a Scene Using Three.js

[00:00:00]
>> We have few other tools but I'm going to go through them before we start building on our local environments. Right now, what I would like to do is compare ThreeJS and Babylon JS and let's look at the same Thing that we've seen before. Same basic seen on ThreeJS is one other thing that to compare with ThreeJS and Babylon is their syntax.

[00:00:31]
Their syntax is a little bit different. But they basically they are doing the same thing. Again here we're creating a 3D scene by initiating a scene object and creating a camera, which is a perspective camera in this case, and perspective camera allows you renders things that are far away.

[00:00:52]
From you smaller than the things that are close by, and if you look at the arguments that we give to the perspective camera, first one is field of view. So that's the angle that you are going to look at. If it's a wider angle, you'll see more and.

[00:01:10]
If not, you'll see less, and the second one is the aspect ratio, and usually what we give for the aspect ratio is the windows, inner width and inner height, so we have the same ratio as our screen if you're rendering to the whole of the screen. Third thing that we have and the fourth thing that we have is at first the near clipping point and the second one is the far clipping points.

[00:01:41]
What this means is that if you have any objects that are closer to you than the near clipping points, they will not be rendered they will not be shown Anything further than far away from the far clipping point will not be rendered. And this is an efficiency thing.

[00:02:02]
We just render the things that are in our range and it's important to us and if you have the inclination to just put a very big number for the fire. Hoping points, just remember that will affect your performance drastically. So it's much better to have a smaller clipping point than a larger one.

[00:02:27]
Second thing that we do is create a Web GL renderer with GL renderer is going to create the 3D objects for us on the canvas. And one thing that you have to give to the render is to set its size and in this case because we are going to render it to the whole screen, we have the window.inner width, and window.inner height.

[00:02:58]
You can have it half the size and you can render multiple renders on one page as well. And we add the renders DOM elements which is a canvas element, okay? So it is the canvas element and we are appending that to the document. That's why we don't have it.

[00:03:32]
We have the mesh. Geometry is again what describes the shape of the mesh. In this case, again, a box. And we have the width, height and depth of it. Materials is the basic material, it is going to be uninteresting again and you can give a color information and other important things, which we will see in the next chapter to, the material information.

[00:04:05]
And cube is the mesh. That weird finding. This is the object that puts together the geometry shape information and the material information. And finally, we add all of those to our scene. So you might create all of these objects but if you forget to add it to your scene, then nothing will render.

[00:04:26]
It would be kind of with the equivalent of if some actor is staying out of the scene. Anytime they enter the scene and to our view is when you add them to the scene. And everything is created at the very center, of your scene which is 000 position.

[00:04:51]
So to be able to see what we are creating, we are moving our camera in the z axis, which is the depth. So we can pull back and look at everything that is in front of us. In this case, it's just one box. Finally, we have an animate function, which is taking the camera information and giving it to the render and trying to render it 60 times per second.

[00:05:21]
That is the comfortable lengths. In speed of an animation, if something is less than that it will kind of look choppy and not very refined. And 60 frame is a great go for any web experience. And what requestAnimationFrame does is takes this information and try to render it 60 times and if it's not able to render 60 times it's kind of makes it more efficiently renders maybe skipping some of them but in a way that the experience is still smooth for the user.

[00:06:13]
And to our vendor, which was the web JR Ranger we give the scene and the camera to render, and this animate function. Is called once but it's good because it has request animation frame and it calls itself, it will run until the end of your experience. And so, not a very super interesting one.

[00:06:43]
We still have a box, but we actually don't see much of it, it looks kind of too deep, but if you comment out, the lines on animates function that adds to our queue and save it and run it, we should have an animated queue. Interesting, we lost it [LAUGH] Let's try again.

[00:07:10]
Hopefully it will keep me silent. All right, cool. You can try this out on your own as well and save it and play with ThreeJS scene and see the difference between Babylon and ThreeJS. So now because we are running this animate function 60 times per second, adding a tiny bit of rotation each time we'll start to render the cube to rotate.

[00:07:44]
>> When you define a field of view, does it still render the things outside of the current field of view? Can you choose whether to render dos or earnouts for reasons?
>> Yes, the question was, if we have a field of view of the camera, what happens if something is on the scene but it's off the camera.

[00:08:06]
So anything that you are not seeing is not rendered through the camera. You might still be able to render of the canvas some, some other objects but then they will be rendered they won't be inside the animation. Using the power AR, VR headsets are quite costly. They are unfortunately, with VR, we the prices really came down but for AR HoloLens device for example, is More than $3,000 which is super expensive, but this device which is a VR device from Facebook, it starts from I think $250 and that seems to be a very different pricing.

[00:09:00]
But over time like everything else, the computers, the phones, everything gets cheaper and cheaper once we find a way to create them manufactured in bulk.