import * as THREE from 'three';

const camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 10 );
camera.position.z = 1;

const scene = new THREE.Scene();

const geometry = new THREE.BoxGeometry( 0.2, 0.2, 0.2 );
const material1 = new THREE.MeshBasicMaterial({color: 0xff0000});
const material2 = new THREE.MeshBasicMaterial({color: 0x0000ff});
geometry.addGroup(0, geometry.index.count / 2, 0);
geometry.addGroup(geometry.index.count / 2, geometry.index.count, 1);

const mesh = new THREE.InstancedMesh( geometry, [material1, material2], 1 );
mesh.setMatrixAt(0, new THREE.Matrix4());
scene.add( mesh );

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

function animation( time ) {
  mesh.rotation.x = time / 2000;
  mesh.rotation.y = time / 1000;

  renderer.render( scene, camera );
}