JSFiddle - React, Tailwind, and code Playground

CSS

body {
	  margin: 0;
}

JavaScript

import * as THREE from 'https://cdn.skypack.dev/[email protected]/build/three.module.js';
import {
  OrbitControls
} from 'https://cdn.skypack.dev/[email protected]/examples/jsm/controls/OrbitControls.js';

let camera, scene, renderer;
init();
animate();

function init() {

  camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.01, 10);
  camera.position.z = 6;

  scene = new THREE.Scene();

  const shape = new THREE.Shape([
    new THREE.Vector2(0.5, 0.5),
    new THREE.Vector2(-0.5, 0.5),
    new THREE.Vector2(-0.5, -0.5),
    new THREE.Vector2(0.5, -0.5),
  ]);

  const extrudeSettings = {
    depth: 1,
    bevelEnabled: true,
    bevelThickness: 0.5,
    bevelSize: 0.25,
    bevelOffset: 0,
    bevelSegments: 8
  };

  const geometry = new THREE.ExtrudeGeometry(shape, extrudeSettings);
  const material = new THREE.MeshNormalMaterial();
  let mesh = new THREE.Mesh(geometry, material);

  const json = JSON.stringify(mesh.toJSON());
  console.log(json);
  mesh = new THREE.ObjectLoader().parse(JSON.parse(json));

  scene.add(mesh);

  renderer = new THREE.WebGLRenderer({
    antialias: true
  });
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);

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

}

function animate() {

  requestAnimationFrame(animate);
  renderer.render(scene, camera);

}