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, 0, 30);
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(10, 10));

let pts = [];
pts.push(new THREE.Vector3());

let unit = Math.sqrt(3);

let angle = Math.PI / 3;
let axis = new THREE.Vector3(0, 0, 1);

let axisVector = new THREE.Vector3(0, -unit, 0);
let sideVector = new THREE.Vector3(0, unit, 0).applyAxisAngle(axis, -angle);
let circleCount = 10;
let tempV3 = new THREE.Vector3();
for (let seg = 0; seg < 6; seg++) {
  for (let ax = 1; ax <= circleCount; ax++) {
    for (let sd = 0; sd < ax; sd++) {
      tempV3.copy(axisVector)
      	.multiplyScalar(ax)
        .addScaledVector(sideVector, sd)
        .applyAxisAngle(axis, angle * seg);
        
      pts.push(new THREE.Vector3().copy(tempV3));
    }
  }
}
console.log(pts.length);

let g = new THREE.BufferGeometry().setFromPoints(pts);
let m = new THREE.PointsMaterial({
  size: 0.25,
  color: "yellow"
});
let o = new THREE.Points(g, m);
scene.add(o);

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