JSFiddle - React, Tailwind, and code Playground

by Paul West

CSS

body {
  overflow: hidden;
  margin: 0;
}

JavaScript

import * as THREE from "https://threejs.org/build/three.module.js";
import {OrbitControls} from "https://threejs.org/examples/jsm/controls/OrbitControls.js";

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

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

scene.add(new THREE.GridHelper());

for(let i = 0; i < 10; i++){
	
  let start = new THREE.Vector3().random().subScalar(0.5).multiplyScalar(10);
  let end = new THREE.Vector3().random().subScalar(0.5).multiplyScalar(10);
  setPoint(start, "red");
  setPoint(end, "blue");
  
  let g = new THREE.CylinderBufferGeometry(0.05, 0.05, 1, 8);
  g.translate(0, 0.5, 0);
  g.rotateX(Math.PI * 0.5);
  let m = new THREE.MeshBasicMaterial({color: "gray"});
  let l = new THREE.Mesh(g, m);
  l.scale.z = start.distanceTo(end);
  l.position.copy(start);
  l.lookAt(end);
  scene.add(l);
}

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

function setPoint(position, color){
	let g = new THREE.SphereBufferGeometry(0.075, 8, 4);
  let m = new THREE.MeshBasicMaterial({color: color});
  let o = new THREE.Mesh(g, m);
  o.position.copy(position);
  scene.add(o);
}