JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://threejs.org/build/three.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script src="https://threejs.org/examples/js/geometries/hilbert3D.js"></script>
<script src="https://threejs.org/examples/js/libs/dat.gui.min.js"></script>

<script src="https://threejs.org/examples/js/lines/LineSegmentsGeometry.js"></script>
<script src="https://threejs.org/examples/js/lines/LineGeometry.js"></script>
<script src="https://threejs.org/examples/js/lines/WireframeGeometry2.js"></script>

<script src="https://threejs.org/examples/js/lines/LineMaterial.js"></script>

<script src="https://threejs.org/examples/js/lines/LineSegments2.js"></script>
<script src="https://threejs.org/examples/js/lines/Line2.js"></script>
<script src="https://threejs.org/examples/js/lines/Wireframe.js"></script>

CSS

body {
	  margin: 0;
}

JavaScript

var line, renderer, scene, camera, camera2, controls;
var line1;
var matLine, matLineBasic, matLineDashed;
var gui;

// viewport
var insetWidth;
var insetHeight;

var geometry, maxInstancedCount;

init();
animate();

function init() {

	renderer = new THREE.WebGLRenderer( { antialias: true } );
	renderer.setPixelRatio( window.devicePixelRatio );
	renderer.setClearColor( 0x000000, 0.0 );
	renderer.setSize( window.innerWidth, window.innerHeight );
	document.body.appendChild( renderer.domElement );

	scene = new THREE.Scene();

	camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 1000 );
	camera.position.set( - 40, 0, 60 );

	camera2 = new THREE.PerspectiveCamera( 40, 1, 1, 1000 );
	camera2.position.copy( camera.position );

	controls = new THREE.OrbitControls( camera, renderer.domElement );
	controls.minDistance = 10;
	controls.maxDistance = 500;


	// Position and Color Data

	var positions = [];
	var colors = [];

	var points = hilbert3D( new THREE.Vector3( 0, 0, 0 ), 20.0, 1, 0, 1, 2, 3, 4, 5, 6, 7 );

	var spline = new THREE.CatmullRomCurve3( points );
	var divisions = Math.round( 12 * points.length );
	var color = new THREE.Color();

	for ( var i = 0, l = divisions; i < l; i ++ ) {

		var point = spline.getPoint( i / l );
		positions.push( point.x, point.y, point.z );

		color.setHSL( i / l, 1.0, 0.5 );
		colors.push( color.r, color.g, color.b );

	}


	// THREE.Line2 ( LineGeometry, LineMaterial )

	geometry = new THREE.LineGeometry();
	geometry.setPositions( positions );
	geometry.setColors( colors );
	maxInstancedCount = geometry.maxInstancedCount;

	matLine = new THREE.LineMaterial( {

		color: 0xffffff,
		linewidth: 5, // in pixels
		vertexColors: THREE.VertexColors,
		//resolution:  // to be set by renderer, eventually
		dashed: false

	} );

	line = new THREE.Line2( geometry, matLine );
	line.computeLineDistances();
	line.scale.set( 1, 1, 1 );
	scene.add( line );


	// THREE.Line ( BufferGeometry, LineBasicMaterial ) -...