3d 모델 파일들 크기를 하나도 안맞춰놔서 scale이나 position 조절 할때 눈대중으로 사용하고있었음

blender세상의 좌표계와 canvas세상의 좌표계를 맞추고 모델들 크기를 맞춰서 export하는 작업을 해보자

일단 blender세상의 좌표계와 canvas세상의 좌표계를 비교해보기 위해 blender에서 1m x 1m x 1m크기의 박스를 하나 만들어서 export 시켜보자.

오른쪽의 transform탭에서 크기를 확인할 수 있다.

public\testModel\1mBox.glb 으로 export 시켜서 scene에 불러와보자.

//Canvas 코드

<Canvas camera={{ position: [0, 10, -10] }}>
  <OrbitControls />
  <ambientLight intensity={0.5} color={'#cfcabb'} />
  <directionalLight
    position={[1, 1, 0]}
    intensity={3}
    color={'#e2bb83'}
  />
  <Box
    scale={1}
    position={new THREE.Vector3(0, 0, 0)}
    color={new THREE.Color('red')}
  />
  <Box
    scale={1}
    position={new THREE.Vector3(1, 0, 0)}
    color={new THREE.Color('blue')}
  />
</Canvas>

//Box.tsx 코드
import React, { useRef } from 'react';
import { useFrame } from '@react-three/fiber';
import { useGLTF } from '@react-three/drei';
import * as THREE from 'three';

interface MyModelProps {
  url: string;
  scale: number;
  position: THREE.Vector3;
  color: THREE.Color;
}
interface BoxProps {
  scale: number;
  position: THREE.Vector3;
  color: THREE.Color;
}

const MyModel: React.FC<MyModelProps> = ({ url, scale, position, color }) => {
  const { scene } = useGLTF(url);

  const cube = scene.getObjectByName('Cube') as THREE.Mesh;
  //console.log(cube) //겹치는 문제때문에 찍어
  cube.material = new THREE.MeshBasicMaterial({ color });

  cube.scale.set(scale, scale, scale);
  cube.position.set(position.x, position.y, position.z);
  return <primitive object={scene.clone()} />;
};

const Box: React.FC<BoxProps> = ({ scale, position, color }) => {
  return (
    <>
      <MyModel
        url={'./testModel/1mBox.glb'}
        scale={scale}
        position={position}
        color={color}
      />
    </>
  );
};

export default Box;

실행결과

왜인지 두 Box가 겹쳐 보인다. 그래서 불러온 Cube를 살펴봤다.

아래 scale을 보면 1이아닌 0.5로 되어있는것을 볼 수 있었다.

blender에서 scale을 1로 초기화시켜서 내보내주지 않아서 그런것 같다.

위에서 보면 저부분이 0.5로 되어있는데 ctrl + a를 눌러서 적용시켜주면 1로 초기화 시켜줄 수 있다.

다시 export해서 1mBox.glb파일을 덮어씌워 주자.

그 결과 겹쳐지는 문제를 해결했다.