|
|
@@ -79,9 +79,9 @@
|
|
|
<code>
|
|
|
<script type="module">
|
|
|
|
|
|
- // Find the latest version by visiting https://unpkg.com/three. The URL will
|
|
|
- // redirect to the newest stable release.
|
|
|
- import * as THREE from 'https://unpkg.com/three@<VERSION>/build/three.module.js';
|
|
|
+ // Find the latest version by visiting https://unpkg.com/three.
|
|
|
+
|
|
|
+ import * as THREE from 'https://unpkg.com/three@<version>/build/three.module.js';
|
|
|
|
|
|
const scene = new THREE.Scene();
|
|
|
|
|
|
@@ -99,12 +99,12 @@
|
|
|
<p>
|
|
|
three.js는 3D 엔진의 주요 컴포넌트들에 초점을 두고 있습니다. 다른 여러 유용한 컴포넌트들 —
|
|
|
controls, loaders, post-processing effects — 은
|
|
|
- [link:https://github.com/mrdoob/three.js/tree/dev/examples/jsm examples/jsm] 폴더에 있습니다. 이들은 "예제"로 불리는데, 그대로 사용할 수도 있고,
|
|
|
+ [link:https://github.com/mrdoob/three.js/tree/dev/examples/jsm examples/jsm] 폴더에 있습니다. 이들은 "예제"로 불리는데, 그대로 사용할 수도 있고,
|
|
|
재조합 및 커스터마이징이 가능하기 때문입니다. 이 컴포넌트들은 언제나 코어 라이브러리와 상응하게 이루어져있으며, 이는 다른 비슷한 서드파티 패키지들이 다양한 사람들에 의해 유지보수되고, 최신버전 반영이 안되는 점과는 대비되는 점입니다.
|
|
|
</p>
|
|
|
|
|
|
<p>
|
|
|
- 예제들은 각각 따로 <em>설치할</em> 필요는 없지만, 각각 <em>import</em>를 해 주어야 합니다.
|
|
|
+ 예제들은 각각 따로 <em>설치할</em> 필요는 없지만, 각각 <em>import</em>를 해 주어야 합니다.
|
|
|
three.js가 npm을 통해 설치되었다면, [page:OrbitControls] 컴포넌트를 다음과 같이 불러올 수 있습니다.
|
|
|
</p>
|
|
|
|
|
|
@@ -122,9 +122,9 @@
|
|
|
<code>
|
|
|
<script type="module">
|
|
|
|
|
|
- // Find the latest version by visiting https://unpkg.com/three. The URL will
|
|
|
- // redirect to the newest stable release.
|
|
|
- import { OrbitControls } from 'https://unpkg.com/three@<VERSION>/examples/jsm/controls/OrbitControls.js';
|
|
|
+ // Find the latest version by visiting https://unpkg.com/three.
|
|
|
+
|
|
|
+ import { OrbitControls } from 'https://unpkg.com/three@<version>/examples/jsm/controls/OrbitControls.js';
|
|
|
|
|
|
const controls = new OrbitControls();
|
|
|
|
|
|
@@ -140,7 +140,7 @@
|
|
|
<h3>CommonJS 불러오기</h3>
|
|
|
|
|
|
<p>
|
|
|
- 대부분의 자바스크립트 번들러는 이제 ES 모듈을 기본적으로 지원하지만, 오래된 빌드 도구들은 그렇지 않을 수 있습니다.
|
|
|
+ 대부분의 자바스크립트 번들러는 이제 ES 모듈을 기본적으로 지원하지만, 오래된 빌드 도구들은 그렇지 않을 수 있습니다.
|
|
|
이 경우에, 번들러에 ES 모듈을 인식할 수 있도록 설정해줄 수 있습니다. 예를들어 [link:http://browserify.org/
|
|
|
Browserify] 는 [link:https://github.com/babel/babelify babelify] 플러그인을 불러오기만 하면 됩니다.
|
|
|
</p>
|
|
|
@@ -150,16 +150,16 @@
|
|
|
<p>
|
|
|
npm을 통해 설치하는 경우, 호스팅 및 CDN으로 설치했을 때와 import 경로가 다릅니다. 이 점은 양쪽의 사용자 모두에게 불편한 문제가 될 것이라는 점을 알고 있습니다.
|
|
|
빌드 도구나 번들러를 사용하는 개발자들은 상대경로보다 단순한 패키지 구분자(ex: 'three')로 사용하기를 선호하지만 <em>examples/</em> 폴더의 파일들은
|
|
|
- <em>three.module.js</em>에 상대 경로를 사용하기 때문에 예상을 빗나가게 됩니다. 빌드 도구를 사용하지 않는 사람들 — 빠른 프로토타입 제작, 학습용도, 개인적 취향 — 도 마찬가지로 이러한 상대 경로를 싫어할 텐데,
|
|
|
+ <em>three.module.js</em>에 상대 경로를 사용하기 때문에 예상을 빗나가게 됩니다. 빌드 도구를 사용하지 않는 사람들 — 빠른 프로토타입 제작, 학습용도, 개인적 취향 — 도 마찬가지로 이러한 상대 경로를 싫어할 텐데,
|
|
|
특정 폴더 구조가 필요하고, 전역 <em>THREE.*</em>를 사용하는 것보다 엄격하기 때문입니다.
|
|
|
</p>
|
|
|
|
|
|
<p>
|
|
|
- [link:https://github.com/WICG/import-maps import maps] 이 후에 활발하게 지원된다면 이러한 상대 경로들을 npm 패키지 이름, 'three'처럼 단순한 패키지 식별자로 변경할 예정입니다.
|
|
|
- 이는 npm 패키지에서 주로 쓰이는 경로 작성법과 일치하고, 두 사용자군 모두에게 파일을 불러오는 데에 동일한 코드를 사용할 수 있게 해 줄 것입니다.
|
|
|
- 빌드 도구를 사용하지 않는 것을 선호하는 사용자들에게도, 간단한 JSON 맵핑을 통해 CDN이나 직접 파일 폴더에서 불러오는 것을 가능하게 해 줄 것입니다.
|
|
|
+ [link:https://github.com/WICG/import-maps import maps] 이 후에 활발하게 지원된다면 이러한 상대 경로들을 npm 패키지 이름, 'three'처럼 단순한 패키지 식별자로 변경할 예정입니다.
|
|
|
+ 이는 npm 패키지에서 주로 쓰이는 경로 작성법과 일치하고, 두 사용자군 모두에게 파일을 불러오는 데에 동일한 코드를 사용할 수 있게 해 줄 것입니다.
|
|
|
+ 빌드 도구를 사용하지 않는 것을 선호하는 사용자들에게도, 간단한 JSON 맵핑을 통해 CDN이나 직접 파일 폴더에서 불러오는 것을 가능하게 해 줄 것입니다.
|
|
|
실험적 방법으로, [link:https://glitch.com/edit/#!/three-import-map?path=index.html import map
|
|
|
- 예제]처럼 map polyfill과 함께 import 해서 더 간단하게 사용해볼 수도 있습니다.
|
|
|
+ 예제]처럼 map polyfill과 함께 import 해서 더 간단하게 사용해볼 수도 있습니다.
|
|
|
</p>
|
|
|
|
|
|
<h3>Node.js</h3>
|
|
|
@@ -183,4 +183,4 @@
|
|
|
|
|
|
</body>
|
|
|
|
|
|
-</html>
|
|
|
+</html>
|
Mr.doob