JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdn.rawgit.com/mrdoob/three.js/master/build/three.min.js"></script>
<script>
;(function() {

"use strict";

var root = this

var has_require = typeof require !== 'undefined'

var THREE = root.THREE || has_require && require('three')
if( !THREE )
	throw new Error( 'MeshLine requires three.js' )

function MeshLine() {

	this.positions = [];

	this.previous = [];
	this.next = [];
	this.side = [];
	this.width = [];
	this.indices_array = [];
	this.uvs = [];
	this.counters = [];
	this.geometry = new THREE.BufferGeometry();

	this.widthCallback = null;

	// Used to raycast
	this.matrixWorld = new THREE.Matrix4();
}

MeshLine.prototype.setMatrixWorld = function(matrixWorld) {
	this.matrixWorld = matrixWorld;
}


MeshLine.prototype.setGeometry = function( g, c ) {
	
	this.widthCallback = c;

	this.positions = [];
	this.counters = [];
	// g.computeBoundingBox();
	// g.computeBoundingSphere();

	// set the normals
	// g.computeVertexNormals();
	if( g instanceof THREE.Geometry ) {
		for( var j = 0; j < g.vertices.length; j++ ) {
			var v = g.vertices[ j ];
			var c = j/g.vertices.length;
			this.positions.push( v.x, v.y, v.z );
			this.positions.push( v.x, v.y, v.z );
			this.counters.push(c);
			this.counters.push(c);
		}
	}

	if( g instanceof THREE.BufferGeometry ) {
		// read attribute positions ?
	}

	if( g instanceof Float32Array || g instanceof Array ) {
		for( var j = 0; j < g.length; j += 3 ) {
			var c = j/g.length;
			this.positions.push( g[ j ], g[ j + 1 ], g[ j + 2 ] );
			this.positions.push( g[ j ], g[ j + 1 ], g[ j + 2 ] );
			this.counters.push(c);
			this.counters.push(c);
		}
	}

	this.process();

}

MeshLine.prototype.raycast = ( function () {

	var inverseMatrix = new THREE.Matrix4();
	var ray = new THREE.Ray();
	var sphere = new THREE.Sphere();

	return function raycast( raycaster, intersects ) {

		var precision = raycaster.linePrecision;
		var precisionSq = precision * precision;

		var geometry = this.geometry;

		if (...

CSS

body {
	  margin: 0;
}

JavaScript

var camera, scene, renderer;

init();
animate();

function init() {

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

    scene = new THREE.Scene();
		
		var A = 2, B = 2;

		var geometryMeshLine = new THREE.Geometry();
		geometryMeshLine.vertices.push(new THREE.Vector3((A / 2) * -1, B / 2, 0));
		geometryMeshLine.vertices.push(new THREE.Vector3(A / 2, B / 2, 0));
		geometryMeshLine.vertices.push(new THREE.Vector3(A / 2, (B / 2) * -1, 0));
		geometryMeshLine.vertices.push(new THREE.Vector3((A / 2) * -1, (B / 2) * -1, 0));

		var line = new MeshLine();
		line.setGeometry(geometryMeshLine);
		var materialMeshLine = new MeshLineMaterial({
			lineWidth: 15,
			color: 0xff0000,
			useMap: false,
			opacity: 1,
			resolution: new THREE.Vector2(window.innerWidth, window.innerHeight),
			sizeAttenuation: false,
			near: camera.near,
			far: camera.far
		});

	console.log( )

		var meshMeshLine = new THREE.Mesh(line.geometry, materialMeshLine); 

		scene.add(meshMeshLine);

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

}

function animate() {

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

}