Addons

더해진것들?

three.js의 핵심은 3D engine에 집중하고, 유용한 컴포넌트들(controls, loaders, 전처리효과등등)은 examples/jsm 폴더에 있다.
이것들을 Addons라고 한단다. 이전엔 examples라고 했다지..
얘네들은 그대로( off the shelf , 기성품으로) 사용할수도 있고 재조합 및 커스터마이징 할 수 있어서 examples라고 하는데, 다른 서드파티 패키지들은 업데이트되고 변경되는 반면 얘네들은 최신버전이 반영안됨. 그러니까 업데이트는 필요없지만 반드시 개별적으로 import 해줘야 함.

npm으로 install 한 상태에서도 OrbitControls를 사용하려면 three/addons/~ 에서 따로 import 해줘야 한다는 것!

import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

const controls = new OrbitControls( camera, renderer.domElement );

cdn으로 설치한 경우에도 이렇게 따로 또 import (+import map에 추가) 해줘야한다는 것이다.
그러나 이때 에는 addon을 가져오는 버전과 three.js 를 가져오는 버전을 동일하게 해줘야 한다는 점이 중요하다.

<script async src="https://unpkg.com/es-module-shims@1.6.3/dist/es-module-shims.js"></script>

<script type="importmap">
  {
    "imports": {
      "three": "https://unpkg.com/three@<version>/build/three.module.js",
      "three/addons/": "https://unpkg.com/three@<version>/examples/jsm/"
    }
  }
</script>

<script type="module">

  import * as THREE from 'three';
  import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

  const controls = new OrbitControls( camera, renderer.domElement );

</script>

 

 

 

 

https://threejs.org/docs/index.html#manual/en/introduction/Installation

어차피 공식 문서에 적혀져있는 내용이지만 공식문서 못 읽는 병이 있는 남의 블로그 글이 잘 읽히는 나같은 개발자가 한명쯤은 있겠지....