<div id="wrapper">
<canvas id="battleArea"></canvas>
</div>
body{
  margin: 0 auto;
  background-color: white;
  overflow: hidden;
}

#battleArea{
  position: absolute;
  background-color: white; 
  width: auto; 
}
let loader = new THREE.TextureLoader();
loader.crossOrigin = true;

let cubeTexture = THREE.ImageUtils.loadTexture('https://image.ibb.co/mMPej5/mrcage.png');

//Renderer
const renderer = new THREE.WebGLRenderer({
  canvas: document.getElementById("battleArea"),
  antialias: true
});

renderer.setSize(window.innerWidth, window.innerHeight);

//Camera
const camera = new THREE.PerspectiveCamera(
  5,
  window.innerWidth / window.innerHeight,
  2,
  5000
);

//Scene

const scene = new THREE.Scene();

let dirLight = new THREE.DirectionalLight( 0xFFFFFF );
dirLight.position.set(100, -100, 5);
scene.add(dirLight);

let dirLight2 = new THREE.DirectionalLight( 0xBA3232 );
dirLight2.position.set(-100, 100, 5);
scene.add(dirLight2);

//OBJECT
let geometry = new THREE.CubeGeometry(50, 50, 50);
let geometry2 = new THREE.TorusGeometry( 47, 2, 5, 40, 1 );
let geometry3 = new THREE.TorusGeometry( 50, 2, 5, 40, 1 );
let geometry4 = new THREE.TorusGeometry( 53, 2, 5, 40, 1 );
let geometry5 = new THREE.TorusGeometry( 56, 2, 5, 40, 1 );
let geometry6 = new THREE.TorusGeometry( 59, 2, 5, 40, 1 );
let geometry7 = new THREE.TorusGeometry( 62, 2, 5, 40, 1 );
let geometry8 = new THREE.TorusGeometry( 65, 2, 5, 40, 1 );
let geometry9 = new THREE.TorusGeometry( 68, 2, 5, 40, 1 );
let geometry10 = new THREE.TorusGeometry( 71, 2, 5, 40, 1 );
let geometry11 = new THREE.TorusGeometry( 74, 2, 5, 40, 1 );
let geometry12 = new THREE.TorusGeometry( 77, 2, 5, 40, 1 );
let geometry13 = new THREE.TorusGeometry( 80, 2, 5, 40, 1 );

/* let material = new THREE.MeshPhongMaterial({
  envMap: textureCube,
  specular: 0xFF0000,
  shininess: 0
  
}); */
THREE.ImageUtils.crossOrigin = 'anonymous';

let material = new THREE.MeshBasicMaterial( { 
  map: cubeTexture
});

let material2 = new THREE.MeshPhongMaterial({
  color: 0xBA3232,
  specular: 0xFF0000,
  shininess: 25
});

let material3 = new THREE.MeshPhongMaterial({
  color: 0x0359B7,
  specular: 0x0359B7,
  shininess: 25
});

let material4 = new THREE.MeshPhongMaterial({
  color: 0xffffff,
  specular: 0x0359B7,
  shininess: 25
});

let mesh = new THREE.Mesh(geometry, material);
let mesh2 = new THREE.Mesh(geometry2, material2);
let mesh3 = new THREE.Mesh(geometry3, material3);
let mesh4 = new THREE.Mesh(geometry4, material2);
let mesh5 = new THREE.Mesh(geometry5, material3);
let mesh6 = new THREE.Mesh(geometry6, material2);
let mesh7 = new THREE.Mesh(geometry7, material3);
let mesh8 = new THREE.Mesh(geometry8, material2);
let mesh9 = new THREE.Mesh(geometry9, material3);
let mesh10 = new THREE.Mesh(geometry10, material2);
let mesh11 = new THREE.Mesh(geometry11, material3);
let mesh12 = new THREE.Mesh(geometry12, material2);
let mesh13 = new THREE.Mesh(geometry13, material3);


mesh.position.set(0, 0, -2000);
mesh2.position.set(0, 0, -2000);
mesh3.position.set(0, 0, -2000);
mesh4.position.set(0, 0, -2000);
mesh5.position.set(0, 0, -2000);
mesh6.position.set(0, 0, -2000);
mesh7.position.set(0, 0, -2000);
mesh8.position.set(0, 0, -2000);
mesh9.position.set(0, 0, -2000);
mesh10.position.set(0, 0, -2000);
mesh11.position.set(0, 0, -2000);
mesh12.position.set(0, 0, -2000);
mesh13.position.set(0, 0, -2000);

renderer.render(scene, camera);
function init(){
    scene.add(mesh);
    scene.add(mesh2, mesh3, mesh4);
    scene.add(mesh5, mesh6, mesh7);
    scene.add(mesh8, mesh9, mesh10);
    scene.add(mesh11, mesh12, mesh13);
 }

init();


//RENDER LOOP
requestAnimationFrame(render);

function render() {
  mesh.rotation.x += .0080;
  mesh.rotation.y += .0080;
  
  mesh2.rotation.z += .0040;
  mesh3.rotation.z += .0060;
  mesh4.rotation.z += .0080;
  mesh5.rotation.z += .0100;
  mesh6.rotation.z += .0120;
  mesh7.rotation.z += .0140;
  mesh8.rotation.z += .0160;
  mesh9.rotation.z += .0180;
  mesh10.rotation.z += .0200;
  mesh11.rotation.z += .0220;
  mesh12.rotation.z += .0240;
  mesh13.rotation.z += .0260;
        
  renderer.render(scene, camera);
  requestAnimationFrame(render);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/three.js/86/three.min.js