var camera, scene, renderer, control, orbit, cube, cube1;

var back = false;
var meshes = new Array();
var meshl = new Array();
var meshr = new Array();

const textures = [];
const loader = new THREE.TextureLoader();
loader.crossOrigin = "";
var arr = [
    'https://s3-us-west-2.amazonaws.com/s.cdpn.io/30256/jungle.jpg',
    'https://s3-us-west-2.amazonaws.com/s.cdpn.io/30256/1200_bodie-11.jpg',
    'https://s3-us-west-2.amazonaws.com/s.cdpn.io/30256/1200_110627-8240-Myst.jpg'
];

for (let i = 0; i < arr.length; i++) {
    textures[i] = loader.load(arr[i]);
}

init();
render();

function init() {
    console.log("check");
    container = document.createElement('div');
  document.body.appendChild(container);
    renderer = new THREE.WebGLRenderer({
    antialias: true
  });
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.setClearColor(0xf0f0f0);
    container.appendChild(renderer.domElement);

    camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 3000);
    camera.position.set(100, 100, 500);
    camera.lookAt(0, 20, 0);

    scene = new THREE.Scene();
    scene.add(new THREE.GridHelper(2000, 10));

    var light = new THREE.DirectionalLight(0xffffff, 2);
    light.position.set(1, 1, 1);
    scene.add(light);

    orbit = new THREE.OrbitControls(camera, renderer.domElement);
    orbit.update();
    orbit.addEventListener('change', render);

//    control = new THREE.TransformControls(camera, renderer.domElement);
   // control.addEventListener('change', render);

    /*control.addEventListener('dragging-changed', function(event) {

        orbit.enabled = !event.value;

    });*/

    var material = new THREE.MeshBasicMaterial();
    var geometry = new THREE.PlaneGeometry(200, 200, 200);
    cube = new THREE.Mesh(geometry, material);

    /*control.attach(cube);
    scene.add(control);*/
  scene.add(cube);

    //child mesh objects for click events
    var mesh11 = new THREE.Mesh(new THREE.PlaneGeometry(20, 40, 0), new THREE.MeshBasicMaterial({
        color: 0xaa00ff
    }));
    mesh11.position.x = 90;
    cube.add(mesh11);
    var mesh12 = new THREE.Mesh(new THREE.BoxGeometry(20, 40, 0), new THREE.MeshBasicMaterial({
        color: 0xaa00ff
    }));
    mesh12.position.x = -90;
    cube.add(mesh12);
    //pushing the code to arrays
    meshr.push(mesh11);
    meshl.push(mesh12);

    //adding DOM Event listenersto child objects
    var domEvents = new THREEx.DomEvents(camera, renderer.domElement);
   
 var texToShow = 1;
  material.map = textures[texToShow];
  domEvents.addEventListener(mesh11, 'click', function(event) {
            texToShow = (2 + texToShow) % 3;
            material.map = textures[texToShow];
            render();
    }, false);
domEvents.addEventListener(mesh12, 'click', function(event) {
    texToShow = (4 + texToShow) % 3;
    material.map = textures[texToShow];
    render();
}, false);
window.addEventListener('resize', onWindowResize, false);
} //end of init()

function onWindowResize() {

    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();

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

function render() {
    //requestAnimationFrame(render);
    renderer.render(scene, camera);
}