JSFiddle - React, Tailwind, and code Playground

HTML

<div class="d-flex flex-row">
    <div class="w-50 d-flex flex-column">
        <h4>Option-1 Scaled 1 in FBX <br>(Working fine)</h4>
        <div class="container">
            <div class="responsive">
                <canvas id="canvas1"></canvas>
            </div>
        </div>
    </div>
    <div class="w-50 d-flex flex-column">
        <h4>Option-2 Scaled 0.1 in FBX <br>(Looks very small)</h4>
        <div class="container">
            <div class="responsive">
                <canvas id="canvas2"></canvas>
            </div>
        </div>
    </div>
</div>

<script type="module">

  import * as THREE from "https://cdn.jsdelivr.net/npm/three@0.117.1/build/three.module.js";
  import {OrbitControls} from "https://cdn.jsdelivr.net/npm/three@0.117.1/examples/jsm/controls/OrbitControls.js";
  import {FBXLoader} from "https://cdn.jsdelivr.net/npm/three@0.117.1/examples/jsm/loaders/FBXLoader.js";
window.FBXLoader = FBXLoader;
  const thv = function (canvasRef, objectUrl) {

    var camera, scene, renderer, mesh, material, stats, plane, planeBuffer, controls, width, height;
    init();
    animate();

    console.log('canvasRef.clientWidth, canvasRef.clientHeight = ', canvasRef.clientWidth, canvasRef.clientHeight)

    function init() {
      width = canvasRef.clientWidth;
      height = canvasRef.clientHeight;
      // Renderer.
      renderer = new THREE.WebGLRenderer({
        antialias: true,
        shadow: true,
        clearColor: true,
        canvas: canvasRef
      });
      renderer.setSize(width, height);
      renderer.shadowMap.enabled = true;
      renderer.shadowMap.type = THREE.PCFSoftShadowMap;
      renderer.setClearColor("#ddd");

      renderer.setPixelRatio(window.devicePixelRatio);

      renderer.gammaFactor = 2.2;
      renderer.gammaOutput = true;

      renderer.physicallyCorrectLights = true;

      // document.body.appendChild(renderer.domElement);

      // Create camera.
      camera = new THREE.PerspectiveCamera(45, width / height,...

CSS

html, body {
            margin: 0;
            height: 100%;
        }

        .d-flex {
            display: flex;
        }

        .flex-row {
            flex-flow: row;
        }

        .flex-column {
            flex-flow: column;
        }

        .w-50 {

            padding: 10px;
            width: 50%;
        }

        .container {
            position: relative;
            overflow: hidden;
            width: 100%;
            padding-top: 100%;
        }

        .responsive {
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            width: 100%;
            height: 100%;
        }

        canvas {
            width: 100% !important;
            height: 100% !important;
            max-height: 400px !important;
        }

JavaScript

console.log("FBXLoader = ",FBXLoader)