Three.js-module system

Three.js - 모듈 시스템, module

Just like other languages, you should be able to separate executables, classes, and functions so that you can have a good program.
Module system
Recently, I implemented a lot of node.js, but I do not use node.js when I personally do web programs, so I need require.js on the amd side.
I have implemented it. require.js is a purely client architecture, so you can do it by moving everything from the client to the server. If you're using node.js, the functionality is pretty much the same, so change it to node.js.

다른 언어처럼 실행파일과 클래스, 함수등을 분리할 수 있도록 해야 제대로된 프로그램을 할 수 있을 것입니다.

-모듈 시스템

최근에 node.js로 구현을 많이 하나, 개인적으로 웹프로그램을 할때 node.js를 하지 않아서, amd쪽의 require.js로

구현을 했습니다. require.js는 순수하게 클라이언트 구조라서 작업을 클라이언트에서 한 이후에 서버로 모두 옮기는 식으로 작업을 하면 됩니다. node.js를 쓰는 사람은 기능이 거의 비슷하니 node.js로 살짝 바꾸길 바랍니다.

basicStructure1.zip

3.88MB

Usage of require.js
1. define statement
I implemented a simple class using define in Class1.js.

require.js 의 사용법

1. define 구문

Class1.js 에서 define을 이용한 간단한 class를 구현하였습니다.

; The define statement allows you to define one unit, such as a class. Speaking of node.js, one class that is imported
It's similar.
Number 1 is the address that is actually linked. The root directory will be the folder of the launcher.js called by require.js first.
Number 2 is an alias, you can use anything unless it's a duplicate
Number 3 is the class implementation. For convenience, I used es5 form. funcion () {...} is a constructor and prototype = {...} is a method, so if you want es6 you should modify it to class.
Number 4 is the value passed to the place where this Class1 module is written. In this case, we have implemented a class called Class1 and handed over the implementation.

You will see that we call Class2 from Class1 and use it as new Class2 (). You can organize your file structure as if you were importing it from java.

2. require syntax
The define statement only defines a module and does not execute it.

; define 구문은 클래스같은 단위하나를 정의할수 있습니다. node.js로 말하자면, import되는 하나의 클래스와

유사하다고 할수 있죠.

1번은 실제 링크되는 주소이다. root 디렉토리는 require.js가 최초로 부르는 launcher.js의 폴더가 됩니다.

2번은 별칭이고, 중복되지 않는한 아무거나 쓸수 있습니다

3번은 클래스 구현부입니다. 편의상 es5 형태를 썼습니다. funcion(){...} 은 constructor이고, prototype = {...} 은 메서드이므로, es6를 원하면 class 형태로 적당히 수정하길 바랍니다.

4번은 이 Class1 모듈을 쓰는 곳으로 넘겨주는 값입니다. 여기서는 Class1이라는 class를 구현하였고, 그 구현부를 넘겨주었습니다. 

 

Class1에서 Class2를 불러서 new Class2()로 사용하는게 보이실겁니다. 마치 java에서 import를 해서 쓰듯이 파일 구조를 구성하면 됩니다.

 

2. require 구문

define구문은 모듈을 정의만 할뿐, 실행시키지 않습니다.

So, for example, you need to define a class with define, create an instance with new, and run it. That means you can't do that with the define statement. The first time you start, use the require statement.
The first step is to write require and then import and use the module defined by define.

index.html configuration

그래서 예를 들어, define으로 클래스 정의하고, new로 인스턴스를 만들어서, 실행시키는 동작을 거쳐야 합니다. 최초의 시작을 define 구문으로는 못한다는 말입니다. 처음에 시작할때는 require구문을 씁니다.

첫 시작은 require를 쓰고, 그다음부터 define으로 정의된 모듈을 가져와서 쓴다고 생각하면 됩니다.

 

index.html 구성

The first one is a link between three.js and OrbitControls.js which controls the mouse. You can define this with the define statement above. However, I personally linked directly to the idea that it is not a library that is shared by all programs.
No.2 defines config file that defines constants and global number GLOBAL to be used globally.

1,2 is optional.

3 is the entry point for require.js.

launcher and mainRender

1번은 three.js 와 마우스컨트롤을 하는 OrbitControls.js 를 링크를 걸어놓은것입니다. 이것을 위의 define문으로 정의해서 써도 됩니다. 그러나, 개인적으로 전 프로그램에서 공용으로 사용하는 라이브러리라 굳이 그렇게 안해도 된다는 생각에 직접 링크를 걸었습니다.

2번은 상수등을 정의하는 config파일과 프로그램 전역으로 사용할 전역번수 GLOBAL을 정의한 것입니다.

 

1,2는 옵션입니다.

 

3번이 require.js의 엔트리 포인트를 정의한 것입니다.

 

launcher와 mainRender

launcher

The launcher only calls mainRender. mainRender is the center of the program. You can see that 1 and 3 load the basic scene from the previous chapter. Number 2 is using Class1 as a test.

런쳐는 mainRender만 부르고 있습니다. mainRender는 프로그램의 중심입니다. 1번과 3번은 앞장에서 한 기본 장면을 로드하는걸 알수 있습니다. 2번은 테스트로 Class1을 사용하고 있습니다.