CSS3DRenderer 팩키지

주요 클라스

1. CSS3DRenderer

CSS3DRenderer는 Three.js에서 제공하는 렌더링 클래스로, HTML 요소를 3D 공간에 표시할 수 있게 합니다. 주로 3D 모델과 함께 텍스트나 UI 요소를 표시할 때 사용됩니다2. CSS3DRenderer는 다음과 같은 주요 메서드를 가지고 있습니다:

• setSize(width, height): 렌더의 크기를 설정합니다.
• render(scene, camera): 3D 장면을 렌더링합니다.
• domElement: 렌더의 컨테이너 요소를 반환합니다.

2. CSS3DSprite

CSS3DSprite는 CSS3DRenderer와 함께 사용되는 클래스로, HTML 요소를 3D 공간에서 회전하거나 이동할 수 있게 합니다. CSS3DSprite는 CSS3DObject의 하위 클래스로, HTML 요소를 3D 객체로 변환합니다. 주요 속성은 다음과 같습니다:

• element: 대상 HTML 요소.
• spriteRatio: 스프라이트 회전 보정 비율.

3. CSS3DObject

- HTML 요소를 3D 객체로 변환하는 기본 클래스

4. CSS3DRenderer.domElement

- 렌더의 컨테이너 요소

5. CSS3DRenderer.cameraElement

- 카메라 요소

 

import React, { useEffect, useRef } from 'react';
import { CSS3DRenderer, CSS3DSprite } from 'three/examples/jsm/renderers/CSS3DRenderer';
import * as THREE from 'three';

const SpriteComponent = () => {
  const mountRef = useRef(null);

  useEffect(() => {
    const width = mountRef.current.clientWidth;
    const height = mountRef.current.clientHeight;

    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000);
    camera.position.z = 500;

    const renderer = new CSS3DRenderer();
    renderer.setSize(width, height);
    mountRef.current.appendChild(renderer.domElement);

    const element = document.createElement('div');
    element.style.width = '100px';
    element.style.height = '100px';
    element.style.background = 'red';
    const sprite = new CSS3DSprite(element);

    scene.add(sprite);

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

    animate();
  }, []);

  return <div ref={mountRef} style={{ width: '100%', height: '100vh' }} />;
};

export default SpriteComponent;