Three.js 화면 조정하기 Next.js 한스푼을 더해서

Next.js 에서 Three.js 를 구현, 그러나 Three.js의 화면 크기를 변경이 필요하여 변경하는 방법을 기록

DOM 요소의 크기를 설정

<div ref={mountRef} style={{ width: '800px', height: '600px' }}/>

구현할 요소의 크기를 width: '800px', height: '600px' 로 설정하였다.

Next.js 에서 render 설정

const mountRef = useRef<HTMLDivElement | null>(null);m

mountRef를 통해 DOM 요소에 접근하여 width와 height를 아래 코드를 통해 가지고 온다.

const width = mountRef.current.clientWidth;
const height = mountRef.current.clientHeight;
renderer.setSize(width, height);

renderer의 사이즈를 가지고온 DOM 요소와 같이 통일시킨다

카메라도 동일하게 설정

before Code

const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

기존 카메라가 window의 기본을 받았지만 현재 renderer의 크기를 변경하였으므로 카메라도 동일하게 변경시켜줘야 된다.

const camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000);

변경이 적용된 코드

'use client';

import { useEffect, useRef } from 'react';
import * as THREE from 'three';

const ThreeScene: React.FC = () => {
  const mountRef = useRef<HTMLDivElement | null>(null);

  useEffect(() => {
    if (!mountRef.current) return;

    const scene = new THREE.Scene();
    const renderer = new THREE.WebGLRenderer();
    const width = mountRef.current.clientWidth;
    const height = mountRef.current.clientHeight;
    const camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000);
    renderer.setSize(width, height);
    mountRef.current?.appendChild(renderer.domElement);

    const geometry = new THREE.BoxGeometry();
    const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
    const cube = new THREE.Mesh(geometry, material);
    scene.add(cube);

    camera.position.z = 5;

    const animate = () => {
      requestAnimationFrame(animate);
      cube.rotation.x += 0.01;
      cube.rotation.y += 0.01;
      renderer.render(scene, camera);
    };

    animate();

    return () => {
      mountRef.current?.removeChild(renderer.domElement);
    };
  }, []);

  return <div ref={mountRef} style={{ width: '800px', height: '600px' }} />;
};

export default ThreeScene;