Using an orthographic camera in glTF cannot display correctly

Questions
, ,
1

I’m developing a glTF preview tool where users can drag and drop glb or gltf files. The camera in the scene is determined based on the camera defined in the model file. However, the problem I’m facing now is that the camera view shows everything very small.

chrome:

1
11920×923 4.11 KB

desired effect:

2
21597×692 116 KB

code:

"use client";
import useStore from "@/utils/store";
import { OrbitControls, OrthographicCamera, useGLTF } from "@react-three/drei";
import { Canvas } from "@react-three/fiber";
import THREE from "three";

export default function Model() {
  const { file } = useStore();
  // const { cameras, scene } = file as GLTF;
  const { cameras, scene } = useGLTF("Nee Nee Nee..glb");
  const camera = cameras[0] as THREE.OrthographicCamera;

  return (
    <Canvas
      shadows
      className="rounded-lg"
      gl={{ logarithmicDepthBuffer: true }}
    >
      <primitive object={scene} />

      <hemisphereLight intensity={3} color={"#FFFFFF"} />
      <OrthographicCamera
        makeDefault
        left={camera.left}
        right={camera.right}
        top={camera.top}
        bottom={camera.bottom}
        far={camera.far}
        near={camera.near}
        zoom={camera.zoom}
        position={camera.position}
      />
      <OrbitControls enableZoom={true} />
    </Canvas>
  );
}

mygithub:

2

arent left right top bottom supposed to be responsive? i would try using near far zoom position.

other than that, if the camera is in the scene and exported in the glb, could you run:

npx gltfjsx yourmodel.glb --transform

and try the resulting *.jsx file? (in combination with the compressed glb it generated)