Three.js - Settings

Three.js 설정 - Setting

 

 

https://threejs.org/

three.js – JavaScript 3D library

You can start by reading the site's documentation, but these open source platforms like Three.js lack some visual tools. So it feels hard at first. Set the most basic elements at a glance.

1. Run locally like any other game engine

사이트의 도큐먼트를 읽으며 시작할수 있으나, 이런 Three.js 같은 오픈 소스 플렛폼은 시각적인 툴이 좀 부족합니다. 그래서 처음에 어렵게 느껴지구요. 가장 기본적인 요소를 바로 한눈에 알아보게 설정해 봅니다.

 

1. 마치 다른 게임 엔진처럼 로컬에서 실행시키기

I'll explain based on the Chrome browser.
Right-clicking on the Shortcut will bring up the window as shown above.
Add the red circle above to the target here.

The reason for this is because of "sand box security". The explanation is long, but the principle is that the original browsers get the data from the server and run it. You can't receive and run data locally. In the early Internet environment, it was possible to run locally, but when security became more important, it was blocked. So you can think the opposite of a normal program. Normal programs run locally first and gradually connect to the Internet / remote, but Internet programs are originally remote. It's not local or it's optional. Look at the server-client structure for a better understanding.

2. Make your browser like an IDE-console
Try pressing F12 in Chrome. The following window will appear.
This function window makes the browser like an IDE. Here almost any response is possible.

크롬 브라우저 기준으로 설명하겠습니다.

Shortcut 에서 우클릭으로 속성을 실행시키면 위와 같은 창이 뜹니다.

여기서 대상에 위의 빨간 동그라미 부분을 추가시키세요.

 

이걸 하는 이유는 "sand box 보안" 때문입니다. 설명이 긴데, 원래 브라우저들은 서버에서 데이터를 받아 실행시키는게 원칙입니다. 로컬에서 자료를 받고 실행시키기를 못하게 되어있죠. 초기 인터넷 환경에서는 로컬 실행이 가능했으나, 점점 보안이 중요해지면 막아버린겁니다. 그러니까 일반 프로그램과 반대로 생각하면 됩니다. 일반 프로그램은 로컬에서 먼저 동작시키고 점차적으로 인터넷/ 원격을 연결시키지만, 인터넷 프로그램은 원래 원격인 것입니다. 로컬이 불가능하거나 옵션으로 막아버린 것이죠. 더 많은 이해를 위해서는 서버-클라이언트 구조를 찾아보세요.

 

2. 브라우져를 IDE처럼 만들기 - console

크롬에서 F12를 눌러보세요. 아래와 같은 창이 뜹니다. 

이 기능창이 브라우져를 IDE처럼 만듭니다. 여기서 거의 모든 응답이 가능합니다. 

The most common one is the console tab. Explaining a simple initial setup,
Custom level 2 defines the content format displayed by the console. There are so many messages that I only have info and error turned on. Number 3 looks like a window floating. It is possible to right and bottom, and to open the window separately. 4 is the setting. Set the console window. I have now set the style to dark.

3. Make your browser like an IDE-sources

가장 많이 쓰이는것은 1번의 console 탭입니다. 간단한 초기설정을 설명하면,

2번 Custom level은 console에서 출력해주는 내용 형식을 정합니다. 너무 많은 메시지가 뜨기 때문에 저는 info와 error만 켜두었습니다. 3번은 창이 뜨는 모양입니다. 우측, 아래 가능하고, 창을 따로 띄우는것도 가능합니다. 4번은 세팅입니다. 이 콘솔창의 세팅을 합니다. 저는 지금 스타일을 dark로 설정했습니다.

 

3. 브라우져를 IDE처럼 만들기 - sources

Click on the sources tab and the following window will appear.
2 is the break point. It will be familiar to intermediate and above programmers, where it stops execution and checks related variables. For debugging.

Look for the rest of the features when you need them.

sources 탭을 클릭하면 다음과 같은 창이 뜹니다.

2번은 바로 break point 입니다. 중급 이상 프로그래머에겐 친숙할건데, 여기서 실행을 멈추고 관련 변수를 체크하는 것입니다. 바로 디버깅을 위한 것이죠

 

나머지 기능은 필요할때 찾아보길 바랍니다.

 

 

basicForm.zip

1.36MB

 

4. Running the main source of Three.js
Now let's run three-index.html on the attached file.

4. Three.js 의 기본 소스 실행

자 이제 첨부된 파일에서 three-index.html 을 실행시킵시다.

The first page is here.
I see the grid. This allows you to gauge the size position of the model.
You will see a red / blue / green line. This means the axes. Right and left is X / Z axis and up and down is Y axis.
This is the same as Blender (3d modeling tool).

5. Browse the sauce

자 첫번째 페이지가 떴습니다. 

격자가 보입니다. 이것으로 모델의 크기 위치를 가늠할수 있습니다.

빨간/파란/녹색 선이 보일겁니다. 이는 좌표축을 의미합니다. 여기는 좌우가 X/Z축이고, 상하가 Y축이네요.

이는 Blender(3d 모델링 툴)와 같습니다.

 

5. 소스 훝어보기

 

There is a scene at 1. It means a scene, and Three.js puts all the lights and models in this scene. Below you can see two directionalLights, gridHelper, axeHelper and a cube.

If you look at 2, there is a renderer. This specifies where the 3d scene is rendered in the browser. If you look at the source, it will be displayed in the div called webgl_space.

The animate part 3 is the loop function for displaying the scene continuously. The first time animate is run and requestAnimationFrame is run inside it, bringing the program to life. It's the engine, the heart.

See the three.js home page for details.

6. Initial setup of babylon
For reference, I also included Babylon's initial configuration file.

1번에 scene이 있습니다. 장면이라는 뜻인데, Three.js 에서는 이 장면에 모든 빛과 모델을 넣습니다. 아래에 보면 directionalLight 두개와 gridHelper, axeHelper, 그리고 cube 하나를 넣은 것을 볼수 있습니다.

 

2번에 보면 renderer가 있습니다. 이것은 브라우저에서 3d 장면이 랜더링되는 부분을 지정합니다. 소스를 보시면 webgl_space 라는 div 부분에 표시하게 합니다.

 

3번 animate 부분은 계속적인 장면 표시를 위한 loop 함수입니다. 최초에 animate가 실행되고 그 안에서 requestAnimationFrame이 또 실행되면서, 프로그램이 살아나게 합니다. 엔진, 심장이라고 할 수 있죠.

 

나머지 세세한 부분은 three.js 홈페이지를 참고하시기 바랍니다.

 

 

6. babylon의 초기 설정

참고로 바빌론의 초기 설정 파일도 넣었다.