JSFiddle - React, Tailwind, and code Playground

by Lukasz Guminski

HTML

<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>

CSS

body{
  overflow:hidden;
  margin:0;
}

JavaScript

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(0, 0, 50);
var renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

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

var light = new THREE.DirectionalLight( 0xffffff, 1);
light.position.set(100, 100, 100);
scene.add(light);
var ambLight = new THREE.AmbientLight( 0x909090);
scene.add(ambLight);

var dodecahedronGeom = new THREE.DodecahedronGeometry(10);
//var dodecahedron = new THREE.Mesh(dodecahedronGeom, new THREE.MeshLambertMaterial({color: "white", transparent: true, opacity: .75} ));
//scene.add(dodecahedron);
var edgesGeom = new THREE.EdgesGeometry(dodecahedronGeom);
console.log(edgesGeom);
var edges = new THREE.LineSegments(edgesGeom, new THREE.LineBasicMaterial({color: "red"}));
scene.add(edges);

var thickness = 0.25;

/* for (var j = 0; j < edgesGeom.attributes.position.count; j++){
  var sphere = new THREE.Mesh(new THREE.SphereBufferGeometry(thickness * 2, 16,8), new THREE.MeshStandardMaterial({color: "red"}));
  sphere.position.set(
    edgesGeom.attributes.position.array[(j * 3) + 0],
    edgesGeom.attributes.position.array[(j * 3) + 1],
    edgesGeom.attributes.position.array[(j * 3) + 2]
  );
  scene.add(sphere);
}
 */
for (var i = 0; i < edgesGeom.attributes.position.count - 1; i+=2){
	
  var startPoint = new THREE.Vector3(
  	edgesGeom.attributes.position.array[i * 3 + 0],
    edgesGeom.attributes.position.array[i * 3 + 1],
    edgesGeom.attributes.position.array[i * 3 + 2]
  );
	var endPoint = new THREE.Vector3(
  	edgesGeom.attributes.position.array[i * 3 + 3],
    edgesGeom.attributes.position.array[i * 3 + 4],
    edgesGeom.attributes.position.array[i * 3 + 5]
  );
  
  var cylLength = new THREE.Vector3().subVectors(endPoint, startPoint).length();
  var cylGeom = new...