Three.js-move page, loading

Three.js - 페이지 이동, loading

In the previous chapter, I created a folder structure with require.js. But since the rendering page is implemented directly in mainRender,
Now let's take it off and make a scene-> scene move structure.
There are many ways to move the scene, but I'll implement it by adding a place variable to the GLOBAL variable.
The implementation is up to you.

앞장에서 require.js로 폴더 구조를 만들었습니다. 그러나 랜더링 페이지가 mainRender에 직접 구현되어있으니,

이제는 그걸 떼서 장면->장면 이동하는 구조를 만들어보겠습니다.

장면 이동에는 여러가지 방법이 있지만, 저는 GLOBAL 변수에 장소를 나타내는 변수를 추가하여 구현해보겠습니다.

구현은 프로그래머 본인이 정하면 됩니다. 

basicStructure2.zip

4.79MB

 

config파일

global파일

We defined the constant WHERE and defined where, old_where as the global variable to receive this positional constant.

Fix mainRender and add Main_Page and Sub_Page files to the scene folder.

상수 WHERE를 정의하고, 이 위치 상수를 받을 전역 변수를 where, old_where를 정의하였습니다.

 

그리고 mainRender를 고치고, Main_Page, Sub_Page 파일을 scene 폴더에 추가합니다.

main render

Creates a new page based on the value of the GLOBAL.where variable. And if you look at # 2, every time the mainlander runs, it renders the page of the saved page variable

GLOBAL.where 변수값에 따라 페이지를 새로 만듭니다. 그리고 2번을 보면 메인랜더가 1번 실행될때마다, 저장된 page변수의 페이지를 랜더합니다.

 

main page

The scene created in the previous chapter has been moved to Main_Page. Make the button appear in the reset and make the settings. This operation used jquery.

이전 장에서 만든 장면을 그대로 Main_Page에 옮겼습니다. 초기화에서 버튼을 나타나게 하고 세팅을 합니다. 이 조작은 jquery를 이용했습니다.

sub page

sub page Much like this. Part 2 shows you how you can do unique tasks for each page in a separate render function.


loading implementation

If you do a 3d program, you will usually need to load large data such as a model. So it's an example of a page conversion where the loading page is almost always started. With the three.js loading functions, let's create a loading page based on the example above.

sub page 거의 흡사합니다. 2번에서 개별 랜더함수에서 각 페이지 고유의 작업을 할수 있는걸 보여줍니다.

 

 

 

loading 구현

3d 프로그램을 한다면 보통 모델과 같은 큰 데이터의 로딩이 필요하게 됩니다. 그래서 로딩 페이지가 거의 처음으로 시작하게 되는 페이지 변환 예제가 되죠. Three.js의 로딩 함수들을 가지고, 위의 예를 바탕으로 로딩 페이지를 만들어보겠습니다.

mainRender

Create a part to process WHERE.LOADING in mainRender and set the initial value to LOADING.

mainRender에 WHERE.LOADING을 처리해줄 부분을 만들고, 초기값을 LOADING으로 합니다.

index.html

I created a progressive bar in html and css. You can do this part. You can use images, or create 3d scenes. But I simply made it in html. There is a div called bar, which increases the width in proportion to the amount loaded.

html과 css로 프로그래시브바를 만들었습니다. 이 부분은 어떻게 해도 됩니다. 이미지를 써도 되고, 3d 장면을 만들어도 됩니다. 하지만 간단히 html로 만들었습니다. 저기 bar라는 div가 로딩된 양에 비례해서 width을 키워주면 되는것입니다.

style.css

Since the loading screen comes first, webgl_space is not shown as display: none. Created a progressive bar in style. When loading is finished, we call GLOBAL.where = WHERE.MAIN_MENU, while the webgl_space is blocked and the loading_page is hidden by display: none.

Now look at the loading page.

로딩화면이 먼저 나오기 때문에 webgl_space는 display:none 으로 보이지 않게 했습니다. 스타일로 프로그래시브바를 만들었습니다. 로딩이 끝나고 GLOBAL.where = WHERE.MAIN_MENU 를 호출하는 동시에, webgl_space는 block해서 보이게하고, Loading_page는 display:none으로 가리는겁니다.

 

이제 로딩페이지를 봅니다.

Number 1 is a variable that determines how many files are loaded. Now I am loading two files.
Number 2 is the part that runs after the model is loaded. It is loaded into the global variable model1 and branches to the common function callbackProcess.
Step 3 is to adjust the progress bar of the loading screen according to the number of loaded files.
4 is the part that moves to the main page when it is completed.

1번은 몇개의 파일을 로딩하는지 결정하는 변수입니다. 지금은 두개의 파일을 로딩하고 있습니다. 

2번은 해당 모델이 로딩된 이후에 실행되는 부분입니다. 전역 변수 model1에 로딩된 부분을 담고, 공통 함수 callbackProcess로 분기하고 있습니다.

3번은 로딩된 파일의 갯수에 따라 로딩 화면의 progress bar를 조절하는 부분입니다.

4번은 완료가 되었을때, main page로의 이동을 하는 부분입니다.