JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container"></div>
 
 <script type="importmap">
   {
            "imports": {
                "three": "https://unpkg.com/three@v0.158.0/build/three.module.js",
                "three/addons/": "https://unpkg.com/three@v0.158.0/examples/jsm/"
            }
        }
</script>

CSS

body {
  margin: 0;
}

JavaScript

import * as THREE from 'three';
import {
  OrbitControls
} from 'three/addons/controls/OrbitControls';

const container = document.getElementById('container');

const scene = new THREE.Scene();
scene.background = new THREE.Color(0x000000);

const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 0, 5);

const axesHelper = new THREE.AxesHelper(5);
scene.add(axesHelper);

const renderer = new THREE.WebGLRenderer({
  antialias: true,
});
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
container.appendChild(renderer.domElement);

const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;

const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshNormalMaterial();

// Change this variable to adjust scale
const s = 3;

const mesh = new THREE.Mesh(geometry, material);
// Option 1
mesh.position.x = (s - 1) / 2;
// Option 2
// mesh.position.x = s / 2;
mesh.scale.x = s;
scene.add(mesh);

window.addEventListener('resize', () => {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();

  renderer.setSize(window.innerWidth, window.innerHeight);
});

renderer.setAnimationLoop(() => {
  controls.update();

  renderer.render(scene, camera);
});