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://threejs.org/examples/js/utils/BufferGeometryUtils.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.5;
for (var j = 0; j < edgesGeom.attributes.position.count; j++){
var sphere = new THREE.Mesh(new THREE.SphereBufferGeometry(thickness, 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);
}
/** Convert an edges geometry to a set of cylinders w/ the given thickness. */
function edgesToCylinders(edgesGeometry, thickness) {
const {position} = edgesGeometry.attributes;
const {array, count} = position;
const r = thickness / 2;
const geoms = [];
for (let i = 0; i < count * 3 - 1; i += 6) {
const a = new THREE.Vector3(array[i], array[i + 1], array[i + 2]);
const b = new THREE.Vector3(array[i + 3], array[i + 4], array[i + 5]);
const vec = new THREE.Vector3().subVectors(b, a);
const len = vec.length();
const geom = new...