I am facing an issue in development. I am implementing a 3D model of jeans in React.js using the Three.js library. In fact, the model is showing in the output, but there is a difference between the original designer model and the output. I am attaching the complete code with a screenshot for reference.[Original 3D modelOutput from code](.png)

const canvasRef = useRef();
  const containerRef = useRef();
  const sceneRef = useRef(null);
  const rendererRef = useRef(null);
  const cameraRef = useRef(null);
  const controlsRef = useRef(null);
  const modelRef = useRef(null);

  useEffect(() => {
    if (!canvasRef.current || !containerRef.current) return;

    // Scene setup
    const scene = new THREE.Scene();
    sceneRef.current = scene;

    // Get container dimensions instead of window
    const container = containerRef.current;
    const containerWidth = container.clientWidth;
    const containerHeight = container.clientHeight || window.innerHeight * 0.7; // Set a default height

    // Camera setup
    const camera = new THREE.PerspectiveCamera(
      35,
      containerWidth / containerHeight,
      1,
      1000
    );
    camera.position.set(5, 5, 5);
    cameraRef.current = camera;
    scene.add(camera);

    // Renderer setup
    const renderer = new THREE.WebGLRenderer({
      canvas: canvasRef.current,
      antialias: true,
    });
    renderer.setSize(containerWidth, containerHeight);
    renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
    renderer.setClearColor(new THREE.Color("#ffffff"));
    renderer.shadowMap.enabled = true; // Enable shadows
    renderer.shadowMap.type = THREE.PCFSoftShadowMap;
    rendererRef.current = renderer;

    // Controls setup
    const controls = new OrbitControls(camera, canvasRef.current);
    controls.enableDamping = true;
    controls.enablePan = false;
    controls.enableZoom = true;
    controls.update();
    controlsRef.current = controls;

    // Lighting setup
    const ambientLight = new THREE.AmbientLight(0xffffff, 1); // Increased intensity
    scene.add(ambientLight);

    const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5); // Adjusted intensity
    directionalLight.position.set(0, 10, 10);
    scene.add(directionalLight);


    // Add fill light from the front
    const fillLight = new THREE.PointLight(0xffffff, 0.5);
    fillLight.position.set(0, 3, 3);
    scene.add(fillLight);

    const backLight = new THREE.DirectionalLight(0xffffff, 0.4);
    backLight.position.set(0, -2, -5);
    scene.add(backLight);

    // Model loading
    const loader = new GLTFLoader();
    const textureLoader = new THREE.TextureLoader();

    loader.load(
      jeansglb,
      (gltf) => {
        const model = gltf.scene;
        modelRef.current = model;
        model.scale.set(1, 1, 1);

        // Load and apply texture
        textureLoader.load(
          jeans,
          (texture) => {
            texture.minFilter = THREE.LinearFilter;
            texture.magFilter = THREE.LinearFilter;
            texture.anisotropy = renderer.capabilities.getMaxAnisotropy();
            texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
            texture.repeat.set(1, 1);

            model.traverse((child) => {
              if (child.isMesh && child.material instanceof THREE.MeshStandardMaterial) {
                child.material.map = texture;
                child.material.roughness = 0.85;
                child.material.metalness = 0.1;
                child.material.needsUpdate = true;
                child.material.side = THREE.DoubleSide;
              }
            });

            // Center the model
            const box = new THREE.Box3().setFromObject(model);
            const center = box.getCenter(new THREE.Vector3());
            model.position.sub(center);

            // Add model to scene
            scene.add(model);

            // Adjust camera to frame model
            const boundingBox = new THREE.Box3().setFromObject(model);
            const boundingBoxCenter = boundingBox.getCenter(new THREE.Vector3());
            const boundingBoxSize = boundingBox.getSize(new THREE.Vector3());
            const maxDimension = Math.max(
              boundingBoxSize.x,
              boundingBoxSize.y,
              boundingBoxSize.z
            );

            camera.position.copy(boundingBoxCenter);
            camera.position.z += maxDimension * 2;
            controls.target.copy(boundingBoxCenter);
            controls.update();
          },
          undefined,
          (error) => console.error("Error loading texture:", error)
        );
      },
      (xhr) => console.log((xhr.loaded / xhr.total) * 100 + "% loaded"),
      (error) => console.error("Error loading 3D model:", error)
    );

    // Window resize handler
    const handleResize = () => {
      const newWidth = container.clientWidth;
      const newHeight = container.clientHeight || window.innerHeight * 0.7;

      if (cameraRef.current && rendererRef.current) {
        cameraRef.current.aspect = newWidth / newHeight;
        cameraRef.current.updateProjectionMatrix();
        rendererRef.current.setSize(newWidth, newHeight);
      }
    };

    window.addEventListener("resize", handleResize);

    // Animation loop
    let animationFrameId;
    const animate = () => {
      animationFrameId = requestAnimationFrame(animate);

      if (controlsRef.current) {
        controlsRef.current.update();
      }

      if (rendererRef.current && sceneRef.current && cameraRef.current) {
        rendererRef.current.render(sceneRef.current, cameraRef.current);
      }
    };
    animate();

    // Cleanup
    return () => {
      window.removeEventListener("resize", handleResize);
      if (animationFrameId) {
        cancelAnimationFrame(animationFrameId);
      }
      if (rendererRef.current) {
        rendererRef.current.dispose();
      }
      if (modelRef.current) {
        modelRef.current.traverse((child) => {
          if (child.isMesh) {
            child.geometry.dispose();
            if (child.material.map) child.material.map.dispose();
            child.material.dispose();
          }
        });
      }
    };
  }, []);

I used the Three.js library to implement a 3D model of jeans in my React.js project. The model successfully renders in the output, but there are noticeable differences between the original designer model and the rendered output.

I have tried the following:

Adjusting the camera settings (e.g., position, field of view). Modifying the light settings (e.g., intensity, type, and position of lights). Ensuring the model file is correctly exported and imported (e.g., verifying .glb or .obj formats and textures). Checking for material or texture mismatches in the Three.js code. Despite these efforts, the rendered model does not match the original. I was expecting the rendered 3D model to look identical to the designer's version in terms of proportions, materials, and textures.