Threejs - Rotate around in circle

by black strings

HTML

<script src="https://rawgit.com/mrdoob/three.js/dev/build/three.js"></script>
<script src="https://rawgit.com/mrdoob/three.js/dev/examples/js/controls/OrbitControls.js"></script>

CSS

body {
  margin:0;
}

JavaScript

var objects = []; 
var scene = new THREE.Scene();

var width = window.innerWidth;
var height = window.innerHeight;

var camera = new THREE.PerspectiveCamera( 35, width/height, 0.1, 1000 );
var renderer = new THREE.WebGLRenderer();

renderer.setSize( width, height );
renderer.setClearColor( 0xcccccc, 1 ); 
document.body.appendChild( renderer.domElement );
scene.add(camera);

controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.screenSpacePanning = true;
setToFullOrbit(controls)
camera.position.copy(new THREE.Vector3(fti(5), fti(5), fti(5)) );
// fix first frame render issue going invisible
camera.lookAt(new THREE.Vector3(0,0,0));

var axisHelper = new THREE.AxisHelper();
scene.add(axisHelper);

var grid = new THREE.GridHelper(fti(12), 12);
scene.add(grid);

// ---- playground here

// an empty mesh container to house the 4 circles
// once parent contains the 4 circles, you just rotate the parent.
// this is one way to do it vs rotating each child independentaly
var parentContainer = new THREE.Mesh();
scene.add(parentContainer);

var circles = createAll4CirclesWithOffsetPositions();
circles.forEach(c => {
	parentContainer.add(c);
});

// rotate the parent in the animation render()

// ---- end of playground
function createAll4CirclesWithOffsetPositions(){
  var raidus = 3;
  var segments = 10;
	
  var circles = [
  	createCircle(raidus, segments),
    createCircle(raidus, segments),
    createCircle(raidus, segments),
    createCircle(raidus, segments)
  ];
  
  var offsetDistance = 20;
  
  // east, north, west, south
  var offsetVectors = [
  	new THREE.Vector3(1,0,0),
    new THREE.Vector3(0,1,0),
    new THREE.Vector3(-1,0,0),
    new THREE.Vector3(0,-1,0)
  ];
  
  // apply the offset distance to each offsetVector
  offsetVectors.forEach(offsetVector => {
  	offsetVector.setLength(offsetDistance);
  });
  
  // add the offset vectors to each circle to give them their offset starting position
  for(var i=0; i<circles.length; i++){
 ...