Three.js 서브 세팅

처음의 기본적인 세팅과 설명은 이전 포스트에 다뤘다.

이제는 부가적으로 추가해줘야 되는 세팅에 대해 알아보자

Stage Resize

Stage Resize는 화면의 크기가 변화 할 때 ThreeJS역시 크기가 자동적으로 변하게 할 수 있게 해주는 것!

stageResize 함수 생성

const stageResize = () => {
  WIDTH = window.innerWidth;
  HEIGHT = window.innerHeight;

  renderer.setSize(WIDTH, HEIGHT);
  camera.aspect = WIDTH / HEIGHT;
};

window.addEventListener("resize", stageResize);

화면 크기를 다시 전달 받고, renderer의 사이즈를 제설정, camera

animate 함수에 내용 추가

const animate = () => {
  /*********** 아래코드 추가 *******/
  camera.lookAt(scene.position);
  camera.updateProjectionMatrix();
  /******************************/
  renderer.render(scene, camera);
  requestAnimationFrame(animate);
};

카메라가 해당 장면을 보게함

카메라에 변경되 값을 다시 적용

OrbitControls

threeJS에서 화면을 자유롭게 컨트롤 할수 있게 해주는 컨트롤러 라이브러리로 존재한다.

바닐라JS에서 OrbitControls를 추가하는 방법

OrbitControls를 추가하는 방법은 CDN으로 추가하는 방법이랑 importmap을 이용하는 방법

CDN

CDN을 통해 가장빠르게 추가할 수 있다.

import { OrbitControls } from "https://unpkg.com/three@0.119.1/examples/jsm/controls/OrbitControls.js";

다음과 같이 추가해줄 수 있는 방법이 있다.

❗️but CDN의 링크를 모를경우 or 최신버젼이 안될 경우

import { OrbitControls } from "https://unpkg.com/three@0.146.0/examples/jsm/controls/OrbitControls.js";

현 0.146.0 최신 버젼을 넣으면 다음과 같이 오류가 발생

Uncaught TypeError: Failed to resolve module specifier "three". Relative references must start with either "/", "./", or "../".

importmap 을 통해 해결

<script type="importmap">
      {
          "imports": {
              "three": "https://cdnjs.cloudflare.com/ajax/libs/three.js/0.146.0/three.module.js"
          }
      }
</script>

index.html에 importmap 을 이용하여 three에 대한 내용을 미리 정의 하면 최신 방법으로 사용 가능

링크가 너무 더럽다 싶으면 아래와 같이도 해결 가능

// index.html
<script type="importmap">
      {
          "imports": {
              "three": "https://cdnjs.cloudflare.com/ajax/libs/three.js/0.146.0/three.module.js",
              "Orbit" :"https://unpkg.com/three@0.146.0/examples/jsm/controls/OrbitControls.js"
          }
      }
 </script>

//index.js
import { OrbitControls } from "Orbit";

위에 두 코드를 각각의 파일에 넣어 OrbitControls를 불러올 수 있다

init() 함수에 다음 코드 삽입

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

더욱 빠른 해결방법

바닐라 자바스크립트로 하지말고 노드로 구현하면 편하다…