JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">

  <head>
    <title>three.js - UV mapping tests</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <style>
      body {
        background: #ffffff;
        color: #000000;
        text-align: center;
        font-family: sans-serif;
      }

      h3 {
        margin-top: 60px;
        margin-bottom: 30px;
        font-weight: normal;
      }

      canvas {
         margin: 10px;
        width: 80vw;
         height: 80vw;
      }

    </style>

  </head>

  <body>
    <script type="importmap">{
	"imports": {
		"three": "https://threejs.org/build/three.module.js"
	}
}</script>
    <script type="module">
      import * as THREE from "three";
        const geometry = new THREE.ConeGeometry(50, 100, 8); // define the geo you want to inspect here
        
import { OrbitControls } from "https://sbedit.net/jsm/controls/OrbitControls.js";
        import { UVsDebug } from 'https://cdn.jsdelivr.net/gh/mrdoob/three.js@r128/examples/jsm/utils/UVsDebug.js';

        /*
         * This is to help debug UVs problems in geometry,
         * as well as allow a new user to visualize what UVs are about.
         */

        function test(name, geometry) {
            const d = document.createElement('div');
            d.innerHTML = '<h3>' + name + '</h3>';
            d.appendChild(UVsDebug(geometry));
            document.body.appendChild(d);
        }

        const points = [];
        for (let i = 0; i < 10; i++) {
            points.push(new THREE.Vector2(Math.sin(i * 0.2) * 15 + 50, (i - 5) * 2));
        }

        
        // Debug UVs for a cone geometry
        test(' THREE.ConeGeometry', geometry);

        // Create the scene, camera, and renderer
        const scene = new THREE.Scene();
        const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
        const renderer = new...