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";

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

var baseVector = new THREE.Vector3(0, 1, 0);
var axis = new THREE.Vector3(0, 0, 1);
var angleStep = THREE.Math.degToRad(72);
var pts = [
	new THREE.Vector3().copy(baseVector),
  new THREE.Vector3().copy(baseVector).applyAxisAngle(axis, angleStep * 1),
  new THREE.Vector3().copy(baseVector).applyAxisAngle(axis, angleStep * 2),
  new THREE.Vector3().copy(baseVector).negate().multiplyScalar(Math.cos(THREE.Math.degToRad(36))),
  new THREE.Vector3().copy(baseVector).applyAxisAngle(axis, angleStep * 3),
  new THREE.Vector3().copy(baseVector).applyAxisAngle(axis, angleStep * 4)
];

var geom = new THREE.BufferGeometry().setFromPoints(pts);
geom.setIndex([0, 1, 2, 0, 2, 3, 0, 3, 4, 0, 4, 5]);

var mat = new THREE.MeshBasicMaterial({color: "aqua", wireframe: true});

var mesh = new THREE.Mesh(geom, mat);
scene.add(mesh);

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