링고타운 이야기 - R3F 물리엔진 뼈대 제거

1. 문제이해

 

다음은 3D 모델을 불러오는 React, React Three Fiber의 코드 현황이다.

 

[CanvasPage.tsx]

import { Canvas } from "@react-three/fiber";
import { TalkBalloonComp } from "../component/talk/TalkBalloonComp";
import { talkBalloonAtom } from "../atom/TalkBalloonAtom"
import { useRecoilValue } from "recoil"
import { MapUtilComp } from "../component/talk/MapUtilComp";
import { Physics, Debug } from '@react-three/cannon';
import { OrbitControls } from "@react-three/drei";

interface CanvasPage {
  theme: JSX.Element;
}


export const CanvasPage: React.FC<CanvasPage> = (props: CanvasPage): JSX.Element => {
  const talkBalloon = useRecoilValue(talkBalloonAtom);
  return(
    <>
      <MapUtilComp />
      <Canvas style={{ height:"100vh" }}>
        <OrbitControls/>
        <Physics defaultContactMaterial={{ friction: 0, restitution: 1 }} gravity={[0, -9.81, 0]}>
          <Debug scale={1} color='green'>
            {props.theme}
          </Debug>
        </Physics>
      </Canvas>
      { talkBalloon.isShow?<TalkBalloonComp />:null }
    </>
  )
}

 

CanvasPage에서는 Canvas페이지를 통해 3D배경과 3D 모델을 업로드한다.

또한 Physics를 이용해 물리 엔진이 적용된 3D 모델들을 업로드할 수 있게 되는 것이다.

 

 

 

 

다음은 유저가 3D 배경을 나갈 수 없게 Wall(벽)을 세워둔 것이다.

그런데 이 뼈대를 안보이게 만들어야 사용자들이 '띠용?' 의아해하지 않을 것이다.

 

 

 

[Wall.tsx]

import React from 'react';
import { useBox } from '@react-three/cannon';
import { wallType } from '../../../type/WallType';

export const Wall: React.FC<wallType> = ({
  size,
  position,
  wallKey,
  name,
  mass,
}) => {
  const [ref]:any = useBox(() => ({
    args: size,
    position : position,
    mass,
    friction: 1,    // Adjust the value as needed
    restitution: 0,  // Set to 0 to avoid bouncing
    
  }));

  return (
    <mesh ref={ref} name={name} key={wallKey}>
      <boxGeometry args={size}/>
      <meshStandardMaterial transparent opacity={0} />
      {/* <meshStandardMaterial visible={false} wireframe={false} transparent={true} opacity={0}/> */}
    </mesh>
  );
};

 

문제는 meshStandardMaterial에 wireframe={false} visible={false} 처리를 해도 계속 뼈대가 보였다.

transparent = {true} opacoty={0}으로 아예 투명하게 처리해버려도 그대로였다.

 

어떻게 해결할까...?

 

 

 

2. 해결책

 

[CanvasPage.tsx]

import { Canvas } from "@react-three/fiber";
import { TalkBalloonComp } from "../component/talk/TalkBalloonComp";
import { talkBalloonAtom } from "../atom/TalkBalloonAtom"
import { useRecoilValue } from "recoil"
import { MapUtilComp } from "../component/talk/MapUtilComp";
import { Physics, Debug } from '@react-three/cannon';
import { OrbitControls } from "@react-three/drei";

interface CanvasPage {
  theme: JSX.Element;
}


export const CanvasPage: React.FC<CanvasPage> = (props: CanvasPage): JSX.Element => {
  const talkBalloon = useRecoilValue(talkBalloonAtom);
  return(
    <>
      <MapUtilComp />
      <Canvas style={{ height:"100vh" }}>
        <OrbitControls/>
        <Physics defaultContactMaterial={{ friction: 0, restitution: 1 }} gravity={[0, -9.81, 0]}>
          {/* <Debug scale={1} color='green'> */}
            {props.theme}
          {/* </Debug> */}
        </Physics>
      </Canvas>
      { talkBalloon.isShow?<TalkBalloonComp />:null }
    </>
  )
}

문제는 근본에 있었다.

Canvas로 3D 모델을 불러올 때 Debug라는 태그가 color='green'으로 매겨져있는 것을 확인하게 되었다.

이를 없애주니 뼈대가 모두 사라지는 것을 확인할 수 있었다.