Circular Positioning - THREE

by Optimix

CSS

body {
  margin: 0;
}

canvas {
  cursor: grab;
  display: block;
}

canvas:active {
  cursor: grabbing;
}

JavaScript

import * as THREE from 'https://unpkg.com/[email protected]/build/three.module.js';
import { OrbitControls } from 'https://unpkg.com/[email protected]/examples/jsm/controls/OrbitControls.js';

const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(2);
document.body.appendChild(renderer.domElement);

const camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.1, 15);
camera.position.z = 8;

const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;

const scene = new THREE.Scene();

const geometry = new THREE.BoxGeometry(0.2, 0.2, 0.2);
const material = new THREE.MeshNormalMaterial();

const boxCount = 10;
const step = Math.PI * 2 / boxCount;
const radius = 3;

for (let i = 0; i < boxCount; i++) {
  const box = new THREE.Mesh(geometry, material);
  
  const angle = step * (i + 1);

  box.position.x = Math.cos(angle) * radius;
  box.position.y = Math.sin(angle) * radius;

  scene.add(box);
}

renderer.setAnimationLoop(() => {
  controls.update();

	renderer.render(scene, camera);
});