블로그로

이 글은 여러분이 react-three-fiber의 기본 사용법을 알고 있다고 가정합니다. 따라서 react three fiber가 있는 기본 레이아웃이 있다고 가정하면 캔버스와 react three fiber가 있는 일부 3d 모델이 있지만 이제 html이 포함된 3d 모델이 필요합니다. 이 문서에서는 정확히 수행하는 방법을 알려줍니다.

CSS3DRenderer

내가 사용한 접근법은 react three fiber가 three를 기반으로 하기 때문에 three JS에서 CSS3DRenderer를 사용하는 것이었습니다. CSS3DRenderer 렌더러는 캔버스 기반 렌더링 없이 웹사이트에 3D 효과를 적용하려는 경우에 특히 흥미롭지만 우리가 사용하는 방식은 원하는 것을 동적으로 렌더링하는 것입니다. 그러나 다음과 같은 몇 가지 중요한 제한 사항이 있습니다. three.js의 재료 시스템을 사용할 수 없으며 기하학도 사용할 수 없습니다. CSS3DRenderer는 일반적인 DOM 요소에만 집중합니다. 이러한 요소는 특수 개체 CSS3DObject로 래핑된 다음 장면 그래프에 추가됩니다.

시작하기

먼저 CSS3DRenderer를 사용하는 데 필요한 모든 것을 가져오고 싶을 것입니다.

import { CSS3DObject } from 'three/examples/jsm/renderers/CSS3DRenderer';
import { Canvas as CanvasCSS3D, useThree as useThreeCSS3D, useFrame as CSSFrame } from 'react-three-fiber/css3d';

가져온 후에는 3D 개체를 빌드할 생성자를 만들어야 합니다. 생성자는 다음과 같아야 합니다.

function DOMObject({
  dom, position, scale, rotation,
}) {
  const { scene } = useThreeCSS3D();
  const ref = useRef(CSS3DObject);
  CSSFrame(() => {
    ref.current.rotation.y += 0.01;
    ref.current.rotation.x = 0.1;
  })
  useEffect(() => {
    ref.current = new CSS3DObject(dom.current);
    ref.current.position.copy(position);
    ref.current.scale.copy(scale);
    ref.current.rotation.copy(rotation);
    scene.add(ref.current);
    return () => scene.remove(ref.current);
  }, [dom, scene, position, scale, rotation]);
  return null;
}

이제 html 임베디드 3D 모델을 만들 준비가 모두 끝났습니다.

구현

이제 캔버스를 렌더링하는 위치로 이동하고 이 구성 요소에서 가장 먼저 해야 할 일은 전체 캔버스를 조각으로 래핑하는 것입니다. 프래그먼트는 다음과 같아야 합니다.

<>
</>

다음으로 해야 할 일은 생성자가 3D 모델을 만드는 데 사용할 항목을 알 수 있도록 참조를 만드는 것입니다. 간단히 추가하면 됩니다.

const ref = useRef(null);

그런 다음 원본 캔버스 아래에 새롭고 특수한 캔버스를 배치하려고 하지만 조각 내부와 새 캔버스 내부에 특수 3D 개체 생성자를 배치하여 개체를 렌더링합니다.

<>
<Canvas>
      <directionalLight intensity={0.5} />
      <ambientLight intensity={0.5} />
      <spotLight position={[10, 15, 10]} angle={0.9} />
      <Suspense fallback={<Loading />}>
        <Table />
        <Cards />
      </Suspense>
    </Canvas>
    <CanvasCSS3D style={{ position: 'absolute', top: '0' }} camera={{ position: [0, 30, 150] }}>
        <DOMObject
          dom={ref}
          rotation={new THREE.Euler(Math.PI / 4, 0, 0)}
          position={new THREE.Vector3(0, 0, 0)}
          scale={new THREE.Vector3(1, 1, 1)}
        />
      </CanvasCSS3D>
</>

마지막으로 프래그먼트 바로 앞에 div를 생성하고 html을 추가하면 캔버스에서 3D 모델로 렌더링되지만 div에는 특수 3D 개체 생성자가 참조한 ref가 포함되어야 합니다. (ps) div에 입력 상자 또는 버튼을 넣을 수 있으며 개체에도 등록됩니다.

<div style={{ background: 'green', width: '100px', height: '100px' }} ref={ref}>
        hello
 </div>

결론

모든 것이 올바르게 완료되면 캔버스는 다음과 같아야 합니다.