The basis of all three, yes, in the previous video reviewed the starting template for your first 3D
app, we reviewed the basics of using modules in JavaScript class syntax.
Not all developers have moved over to ESX class syntax and modules.
So I hope you'll forgive me for my brief reminder of this type of code in using JavaScript in case you
skip Section two.
Now we're ready to create our first app.
Open the file up Dargis in the folder, start lecture three, underscore three and in the constructor
method will create a virtual camera.
When we imported the 3D library we it every class by using the wild card character and the name three
in caps.
Each new instance of a class from this library needs to use the name three, followed by a dart and
then the name of the class.
We're going to create a perspective camera.
This takes four parameters.
Parameter one is a field of view in degrees.
Here we use sixty degrees then the aspect ratio because we're filling the entire window we use in a
width divided by in a height.
This ensures the models we create aren't stretched.
Whatever device layer you use parameters three and four deal with the near and far values of this camera.
Any attempt to render pixel, although it's nearer than the near value, our further away than the real
value will be ignored.
A virtual camera, something called a frustration, and the viewer will only see objects that are inside
the field of view and the near and far planes like this.
And we also said the position of the camera, as well as a virtual camera, a 3D app, needs an instance
of a scene.
This takes no parameters like a 3D perspective camera.
The base class for a 3D scene is an object 3D.
It's a great idea to open the three website when developing 3-D apps and games, go to documentation
and enter the class name for a scene, not subject 3-D at the top than an arrow clicking object 3-D.
We see the object.
3D is the base class for most objects in 3D because it's a special kind of object.
3D, a seen will have a children's prop..
There's an array of child objects.
More about that.
Later, we're going to set the background color to a gray color.
The color value is provided in hexadecimal format using zero.
X tells the JavaScript interpreter to expect a hexadecimal value in decimal.
There are ten possible numeric values in a single column.
Once we get to nine and increase by one, then the next value takes two columns each column to the left
as a value ten times the one to its right.
So in this column, the one actually represents 10.
In hexadecimal, there are 16 numeric values, but when we use the latter, a four 11 be up to 15 BNF
using this approach, a single column can represent the values zero through to 15, adding one to 15.
We roll into the next column.
A column is 16 times the column to his right.
This value in hexadecimal isn't 10, it's 16.
When we define a color, the first two characters after the Zero X gives the value of the Red Channel
AA is ten times sixteen plus 10 or 170 in decimal each color channel taking a value between zero and
two five five F is 15 times sixteen plus fifteen, which equals two five five and is the largest value
in hexadecimal.
Using just two columns, the middle two characters provide the value for the green channel and the last
to the blue value.
Before we can see any content from our 3D scene, we need a render 3D as a number of renderers, but
the one we need for games is the Web G.L. Renderer.
You can optionally pass the parameters, object to the constructor.
And here we are going to say A.l is to try to reduce the judges along the edges is a good idea to use
the render method set pixel ratio.
This will avoid blurring on retina screens and it's essential to set the physical size of the renderer.
Here we set the render to the full size of the window using any with an inner height.
When a Webjet render is created, it creates an e-mail five canvas element with the property name Dom
Element.
And we need to add this to the container we created earlier.
The rendering needs to render the scene repeatedly, so that changes to the camera position are objects
in the scene are constantly updated and we can set up an animation loop to do just that.
It will take the render method of the app as a parameter and don't forget to use bindis to ensure the
scope inside the function is the app instance.
Now this method will be called around 60 times a second slide down to the render method, another call
to the render method of the renderer.
This takes the scene as parameter one and the camera as parameter.
Now, if we test this in the browser, you should see a gray screen.
It might seem like a lot of effort to get a gray screen, but there's actually a lot going on.
Let's review the code.
The minimum any 3D art requires is a scene where we will add objects and lights, a camera that access
the viewer's position and orientation in the scene.
And you will need a renderer, usually a Web G.L. Renderer instance.
In this code snippet, we first created a camera.
In this instance, we use a perspective camera so distant objects will appear smaller than close objects.
When creating a perspective camera, you pass parameters to the constructor method, parameter one is
to fail to view the Šefčovič.
This is in degrees.
The second parameter is the aspect ratio, the width of the window divided by height.
Woops, that should be divided by not a comma because we're using the whole size of the window.
We can use the innovation in the properties of the window object when calculating this aspect ratio
parameter three is the near value and parameter for the thaa value objects nearer than parameter three
will be clipped and those further away than parameter four will also be clipped.
Real time computer graphics uses a virtual cage to define a clipping region.
This cage is called a frustration, and although it might be tempting to set near to a tiny value and
far to a massive one, the recommendation is to keep within a smaller range, as you're saying will
require.
The renderer uses a special buffer when he builds up the image to display in this buffer stores the
distance away from the camera for each pixel it's rendered, and it allows nearer objects to mask distant
ones.
The accuracy of this maskin is determined by the range between near and far in this range is measured
in the millions.
When in fact your objects never exceed the range 100, then you're likely to get rendering errors.
Once the camera is created, it will be a zero zero zero.
Looking directly down the negative Z axis.
Recall the web gaolers by default X increase into the RI, the E Y increase in Elwood's and Z increase
in the screen.
S here we move the camera back to four in the Z.
Think there is four metres from the origin.
After creating the camera, we created a scene.
This is easily done and requires no parameters and by default the background will be white.
To alter this, we change the background color to gray.
Using an instance of a 3D color class, the color class can take a hex value to set its color.
Then we create the renderer is an instance of a Web jail renderer with anteriorly, since that's true,
without set until it's into true, the app will suffer from judges.
It's important to set the pixel ratio.
Otherwise, there's a danger of blurring on many devices.
And it's essential to set the size of the renderer here because we're filling the window.
We use any width and height of the window object.
When a render is created, it creates a DOM element and this should be added to the container to ensure
it's visible.
The render has a method called set animation loop that takes a callback, a method.
Here we use the class method render and to ensure our scope is the append.
Since we are behind this to the reference, the set animation loop is called up to 60 times a second.
If the browser can sustain that rate is an alternative to using refresh animation frame.
So now we have the key ingredients of all three examples.
A scene camera and render and render is being called many times a second look grey.
It's a bit boring.
In the next video, we'll fix that by adding your first 3D object.