Threejs - plot objects on circle curve

by black strings

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/examples/js/controls/OrbitControls.js"></script>

CSS

/* fix mouse click offset errors when doing drags */
body {
  margin: 0;
}

JavaScript

var scene, renderer, camera;
var cube;
var controls;

init();
lightSetup();
animate();

function init() {
  renderer = new THREE.WebGLRenderer({
    antialias: true
  });
  var width = window.innerWidth;
  var height = window.innerHeight;
  renderer.setSize(width, height);
  document.body.appendChild(renderer.domElement);

  scene = new THREE.Scene();

  var gridXZ = new THREE.GridHelper(1000, 100);
  scene.add(gridXZ);

  var axes = new THREE.AxesHelper(1000);
  scene.add(axes);

  camera = new THREE.PerspectiveCamera(45, width / height, 1, 10000);
  camera.position.y = 0;
  camera.position.z = 30;
  camera.lookAt(new THREE.Vector3(0, 0, 0));

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


 const curve = new THREE.EllipseCurve(
	0,  0,            // ax, aY
	10, 10,           // xRadius, yRadius
	0,  2 * Math.PI,  // aStartAngle, aEndAngle
	false,            // aClockwise
	0                 // aRotation
);

	var objectHeight = 1;
  var objectWidth = 1;

  // Get all the points that are evenly space for the object
  var points = curve.getSpacedPoints(Math.ceil(curve.getLength() / objectWidth));

  // Get the last point in the curve
  points.push(curve.getPointAt(1));

	// Create a curve geometry
  var curveGeometry = new THREE.BufferGeometry().setFromPoints(points);

	// Create a curve material
  var curveMaterial = new THREE.LineBasicMaterial({
    color: 0xff0000
  });

  // Create the curve to add to the scene
  var curveObject = new THREE.Line(curveGeometry, curveMaterial);

  // Add curve to scene
  scene.add(curveObject);
  
  
  var points2 = [];
  
  for(const point of points) {
  	points2.push(new THREE.Vector3(point.x, point.y));
  }

  for (var i = 1; i < points2.length - 1; i++) {
    var block = createBlock(objectWidth, objectHeight);

   block.geometry.applyMatrix4(new THREE.Matrix4().makeTranslation(-objectWidth / 2, objectWidth / 2, 0));
    
        // Get the direction of the current point and next point
    var slope =...