Как встроить 3D -модель Sketchfab в раздел героев React JSX с правильным размером? ⇐ Javascript

[Anonymous]

Я пытаюсь внедрить 3D -модель Sketchfab в мой раздел героев JSX React, но каждый раз, когда я делаю, модель выглядит чрезвычайно маленькой - как один пиксель.
Однако модель остается крошечной. Как я могу правильно размер и масштабировать трехмерную модель внутри моего героя, чтобы она хорошо подходила и была полностью заметна? Другие модели выглядят нормально, но не это. < /P>
Любая помощь ценится! < /P>

Код: Выделить всё

import React, { Suspense, useRef, useEffect, useState } from "react";
import { Canvas, useFrame, useLoader, useThree } from "@react-three/fiber";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
import { OrbitControls, Environment, Html, useGLTF } from "@react-three/drei";
import { Box3, Vector3 } from "three";
import * as THREE from 'three';

// Model component that loads and animates the 3D model
function Model() {
const gltf = useLoader(GLTFLoader, "/traveler.glb");
const modelRef = useRef();
const mixer = useRef();
const { camera } = useThree();

useEffect(() => {
if (!gltf || !modelRef.current) return;

// Setup animation mixer
if (gltf.animations.length) {
mixer.current = new THREE.AnimationMixer(gltf.scene);
gltf.animations.forEach((clip) => {
mixer.current.clipAction(clip).play();
});
}

// Auto-scale and center model
const box = new THREE.Box3().setFromObject(modelRef.current);
const center = box.getCenter(new THREE.Vector3());
const size = box.getSize(new THREE.Vector3());

const maxDim = Math.max(size.x, size.y, size.z);
const fov = camera.fov * (Math.PI / 180);
const distance = Math.abs(maxDim / Math.sin(fov / 2));

camera.position.set(center.x, center.y, distance * 1.5);
camera.lookAt(center);

const scaleFactor = 2 / maxDim;
modelRef.current.scale.setScalar(scaleFactor);
modelRef.current.position.set(-center.x, -center.y, -center.z);
}, [gltf]);

useFrame((_, delta) => {
if (mixer.current) mixer.current.update(delta);
});

return 
;
}

// Loader component for displaying during model loading
function Loader() {
return (



Loading 3D model...


);
}

// Main component
const HeroModel3D = () => {
return (











);
};

export default HeroModel3D;

Это мое Inspo

Подробнее здесь: https://stackoverflow.com/questions/794 ... per-sizing