All language subtitles for 1. Setting up a simple THREE.js page using modules--- [ FreeCourseWeb.com ] ---

A 3D primer setting up a simple 3D page using modules.

Now it's time to download the resources for the course, either use the resources button in the right

sidebar and choose, learn WebEx, our zip file or go to the set up address and clone or download the

repo.

If you're unfamiliar with it, then let me urge you to use it.

It's a version control system allowing a developer to track changes to their code.

I find it easier to use with sorcery a free gift client available for Mac and Windows.

Just download the app and then use the new clone from your option.

The address by clicking this button on GitHub, you select a folder where the repo will be downloaded

to and then you ready to go.

I recommend also downloading the 3GS repo, which is available at this address.

The course resources include build one one seven of 3GS and some essential extra files for the course

examples.

But as you create your own apps, I recommend updating your 3D repo and then starting with the latest

build.

3D comes in three flavors playing JavaScript module JavaScript and TypeScript the 3D WebEx are examples.

All use the modules version and so we're going to use that approach throughout the course.

If you're looking at the folder where you've downloaded our clone the resources, you'll see that there's

a star folder and a complete folder to work along with the course, you need to use the version in the

star folder.

If you have in trouble, then go ahead and look at the complete folder.

The problem is almost certainly a typo you can't view.

You were just by clicking on an HTML file that will not work for 99 percent of the examples in the course

of WebEx are examples must be delivered to the browser using https.

This secure protocol is mandatory.

I'm assuming at this stage you've set up your secure website to view your development code from following

the links in the article in Section one.

The examples in this cause can all be viewed in a desktop browser by using the web browser, emulator

and web server.

For Chrome, a useful Chrome extension is very much worth installing in setting it up.

As outlined in the article in Section one.

Just point the choose folder at the root of your website.

Press the blue link and you can view and debug your work.

But if you are testing on multiple devices and assessing the user experience, for most users, a remote

server is the best solution.

OK, let's open the file.

Indexed our e-mail in the folder, start lecture to underscore one.

This is already set up for you and each example in the course is going to use pretty much the same approach.

The index page will define a script, tag the set to type module.

It will import the app class from the file update gigas in the same folder as the indexed HTML file

and in the DOM content loaded event.

A new instance of the app class will be initialized.

The window object will have a property called up set to this instance to facilitate debugging as will

inevitably be necessary.

Now let's look at the App Digest file.

This is an essentially empty class in this template.

I have imported the entire 3D library which is stored in the file Lib's three three modules.

Dargis.

This is the same file you'll find in the 3D repo in the build folder.

I also import, albeit controls from Lib's three JSM or controls Dargis in the 3D library.

You would find this file in the examples JSM controls folder because the course resources of a different

folder structure to the 3D library.

The resources version has a different path specified for the relative path to the three module JS file.

This applies to several of the files in the resources led three folder, which all come from the 3D

library.

When you use modules, the import from path must be an absolute or relative path from the file to the

import module.

So in the apgar's you need to go up to folders to reach the root of the resources, then lock in the

Libs three folder to find the file three module Dargis.

A JavaScript class file is defined with a name and then the code inside curly braces.

The constructor method is.

Whenever a new instance of this class is created, the constructor method may take any number of parameters

or none.

Hey, we have none.

The template is set up to create a development and append it to the body of the document is also set

up to call the resize method of this class whenever there's a window resize event.

Scope is very important when using the key word this inside the constructor method for the app class.

This refers to an instance of the app to call methods of the class.

We use this then the method name.

If we do not bind this to the method, call for an event line inside the function.

This would have a different scope.

It would refer not to the app instance.

Instead it will be the instant the had the event listener added.

In this case, the window by adding bindis, it ensures that this inside the class method is the app,

as I expected.

Now we are poised to enter our first code to display some 3-D content.

Let's take a break and come back in the next video, ready to start typing and testing tea in a jiffy.