JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
<script src="https://cdn.jsdelivr.net/gh/spite/THREE.MeshLine/src/THREE.MeshLine.js"></script>

CSS

body{
  overflow: hidden;
  margin: 0;
}

JavaScript

let scene = new THREE.Scene();
let camera = new THREE.PerspectiveCamera(60, innerWidth / innerHeight, 1, 100);
camera.position.set(0, 0, 10);
let renderer = new THREE.WebGLRenderer();
renderer.setSize(innerWidth, innerHeight);
document.body.appendChild(renderer.domElement);

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

let grid = new THREE.GridHelper(10, 10, "white", "gray");
grid.rotation.x = Math.PI * 0.5;
scene.add(grid);

const points = [
	1,0,0,
  1,1,0,
  2,1,0,
  2,0,0,
  1,0,0
];

let boxTranslatedLine = new MeshLine();
boxTranslatedLine.setPoints(points);

let material = new MeshLineMaterial({
	lineWidth: 0.4,
  color: new THREE.Color(0x0000ff),
});

let boxTranslatedLineMesh = new THREE.Mesh(boxTranslatedLine, material);
scene.add(boxTranslatedLineMesh);

// find center as offset for mesh
let b3 = new THREE.Box3().setFromBufferAttribute(boxTranslatedLineMesh.geometry.attributes.position);
let center = new THREE.Vector3();
b3.getCenter(center);
boxTranslatedLineMesh.geometry.translate(-center.x, -center.y, -center.z);

boxTranslatedLineMesh.position.copy(center);
/////////////////////////////////

let positionTranslatedLine = new MeshLine();
positionTranslatedLine.setPoints(points);
let positionTranslatedLineMesh = new THREE.Mesh(positionTranslatedLine, material);
positionTranslatedLineMesh.position.y += -2;
scene.add(positionTranslatedLineMesh);

renderer.setAnimationLoop(() => {
  renderer.render(scene, camera);
})