three.js orbitcontrols (vs trackballcontrols) 마우스 카메라 회전

2022.06.06 - [Next.js] - Next.js + three.js = 3d object 표현

Next.js + three.js = 3d object 표현

nextjs위에 3d object 표현하는 거 해봤는데 👆👆👆 왠지 마우스로 휘리릭 휘리릭 돌려보고 싶더라고 그래서 해봤지 ㅋ stack overflow를 헤매다가 이런 동작은 controls 라는 카테고리로 분류되어 있다는 걸 알았어. 그러면 고민하지 말고 threejs.org를 가보자. 공식 홈페이지 보다 더 잘 설명해주는 곳은 없으니까 ㅎㅎ

https://threejs.org/docs/#examples/en/controls/OrbitControls

three.js docs

Threejs.org orbitcontrol

뭐 물론 영어라 토나오는 사람들 있을지 모르겠지만... 영어하기 싫으면 개발자 때려치우고 다른 거 하자 ㅎㅎ 암튼 내가 하려고 하는 화면을 휘리릭 돌리는 건 orbitcontrols라는 걸 사용한다고 해. 읽어보자면 target object 주변을 orbit하는 걸 할 수 있게 해준다고 하네. 사용법은 그다지 어렵지 않을 것 같아.

//camera와 domElement를 사용해서 controls를 새로 만들어주고
const controls = new OrbitControls( camera, renderer.domElement );

//update().
//controls.update() must be called after any manual changes to the camera's transform
camera.position.set( 0, 20, 100 );
controls.update();

function animate() {
	requestAnimationFrame( animate );

	//그리고 animation 안에서 controls.update() 하면 끝!
	// required if controls.enableDamping or controls.autoRotate are set to true
	controls.update();

	renderer.render( scene, camera );
}

주석에도 대강 달아놨지만 controls를 추가해주고 controls.update()를 해주면 끝. 아래는 sbcode라는 곳에서 제공하는 orbitcontrols 예제야. 앞으로 자주 방문하게 될 것 같은 느낌적인 느낌이군! 즐겨찾기 등록!

https://sbcode.net/threejs/orbit-controls/

OrbitControls - Three.js Tutorials

우리가 하려는 nextjs에서 할 때도 딱히 달라지는 건 없어. 예전에 만들어둔 threejs 컴포넌트에 몇 줄만 추가해주면 끝.

import React, { useEffect, useRef } from "react";
import * as THREE from "three";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";//여기!

const ThreeJS = () => {
  const canvasRef = useRef<HTMLCanvasElement>(null);
  useEffect(() => {
    if (canvasRef.current) {
      const scene = new THREE.Scene();
      const renderer = new THREE.WebGLRenderer({
        canvas: canvasRef.current,
        antialias: true,
      });
      renderer.outputEncoding = THREE.sRGBEncoding;
      const camera = new THREE.PerspectiveCamera(30, 1);
      camera.position.set(0, 0, 5);
      const loader = new GLTFLoader();
      scene.background = new THREE.Color("white");
      const light = new THREE.DirectionalLight(0xffffff, 10);
      scene.add(light);
      const controls = new OrbitControls(camera, renderer.domElement);//여기!
      controls.update();//여기!
      loader.load("/scene.gltf", (object) => {
        scene.add(object.scene);
        const animate = () => {
          requestAnimationFrame(animate);
          object.scene.rotation.y += 0.01;
          renderer.render(scene, camera);
          controls.update();//여기!
        };
        animate();
      });
    }
  }, [canvasRef]);

  return (
    <div>
      <canvas ref={canvasRef} id="canvas" width="300" height="300"></canvas>
    </div>
  );
};

export default ThreeJS;

딱 4줄 추가하면 완료되는 것 같아. 전체 코드는 github 링크에서 👇👇👇👇

https://github.com/peter-bang/nextjs-3djs

GitHub - peter-bang/nextjs-3djs: three.js on next.js

자 결과는 아래와 같이 빙글빙글 돌아가던 기존 threejs 컴포넌트에 orbit control이 더해서 카메라를 빙글빙글 돌릴 수가 있지. 오브젝트를 돌리는 게 아니라 카메라가 도는 거라는 거! 여러분들도 같이 돌려보자 ㅎ 은근 잼나 ㅋㅋㅋ

orbitcontrols

 

그리고 이렇게 끝나면 아쉬우니까 한개만 더! orbitcontrols말고 trackballcontrols 라는 게 있어. 사용법이랑 움직임은 orbit이랑 거의 비슷한데 위쪽이랑 아래쪽으로 한계가 없어. 그러니까 orbit은 위나 아래로 마우스를 움직이다보면 정남, 정북 이후로는 넘어가지 않아. 그에 비에 trackball은 계속 돌아가서 뒤집힌 오브젝트도 볼 수 있어. 실제로 해보면 차이를 쉽게 알 수 있어 ㅎㅎ

orbitcontrols vs trackballcontrols

 

이 두가지가 마우스로 카메라를 회전하는 방법으로 쓰이고 있는 것 같아. three.js가 진짜 미친듯이 공부할게 많은데 ㅎㅎ 시작부터 어려운거 막 하고 그러면 지치니까 이런 것부터 천천히 하나씩 해보자구 ㅎㅎㅎ 그래도 막 뭐가 움직이고 그러니까 재밌지 않아? ㅎㅎ