<script type="importmap">
  {
    "imports": {
      "three": "https://unpkg.com/three@0.163.0/build/three.module.js",
      "three/addons/": "https://unpkg.com/three@0.163.0/examples/jsm/"
    }
  }
</script>

body{
  overflow: hidden;
  margin: 0;
}

import * as THREE from "three";
import { OrbitControls } from "three/addons/controls/OrbitControls.js";
import { TransformControls } from 'three/addons/controls/TransformControls.js';

let container;
let camera, scene, renderer;
let orbit, control;

init();

async function init() {

	const { innerWidth, innerHeight } = window;
	container = document.createElement( 'div' );
	document.body.appendChild( container );

	// CAMERA
	camera = new THREE.PerspectiveCamera( 60, innerWidth / innerHeight, 0.01, 1000000 );
	camera.position.set( -6000, -500, -6000 );
  camera.lookAt( -4000, -400, 0 );

	// SCENE
	scene = new THREE.Scene();

	// LIGHTS
	const light = new THREE.DirectionalLight( 0xd5deff );
	light.position.x = 300;
	light.position.y = 250;
	light.position.z = - 500;
	scene.add( light );

	// RENDERER
  renderer = new THREE.WebGLRenderer( { antialias: true, logarithmicDepthBuffer: true } );
	renderer.setPixelRatio( window.devicePixelRatio );
	renderer.setSize( innerWidth, innerHeight );
	container.appendChild( renderer.domElement );
	renderer.outputEncoding = THREE.sRGBEncoding;

	// CONTROLS
	orbit = new OrbitControls( camera, renderer.domElement );
  orbit.update();
  orbit.addEventListener( 'change', animate );
  
	// window resize event
	window.addEventListener( 'resize', onWindowResize );
  
  initWorld();
  animate();
  
}

function initWorld() {
	// Muro
  const tMuro = new THREE.TextureLoader().load('https://i.postimg.cc/Z5DhPzcg/muro.png' ); 
	const gMuro = new THREE.PlaneGeometry( 9676, 6644 );
  const sMuro = new THREE.MeshBasicMaterial( {color: 0xffffff, map: tMuro, side: THREE.DoubleSide, transparent: true} );
  const mMuro = new THREE.Mesh( gMuro, sMuro );
  mMuro.rotation.y = -3.14;
  mMuro.scale.x = 1.05;
  scene.add( mMuro );
  
  // Piso
  const tPiso = new THREE.TextureLoader().load('https://i.postimg.cc/R0jc9g9q/piso.png'); 
	const gPiso = new THREE.PlaneGeometry( 10205, 3204 );
  const sPiso = new THREE.MeshBasicMaterial( {color: 0xffffff, map: tPiso, side: THREE.DoubleSide, transparent: true} );
  const mPiso = new THREE.Mesh( gPiso, sPiso );
  mPiso.rotation.x = -1.57;
  mPiso.position.y = -3322;
  mPiso.position.z = -1500;
  scene.add( mPiso );
  
  // Pintura + bastidor
  const tPintura = new THREE.TextureLoader().load('https://i.postimg.cc/Z5znTXvG/25e336b4c948d730106e3b9db06b4e30.jpg');
  var sPintura = new THREE.MeshBasicMaterial( {map: tPintura});
  var sMarco = new THREE.MeshBasicMaterial( {color: 'lightgray'});
  var mMarco = new THREE.Mesh(
      new THREE.BoxGeometry( 1024, 746, 50 ),
    [
        sMarco,
        sMarco,
        sMarco,
        sMarco,
        sMarco,
        sPintura,
    ]
  );
  scene.add( mMarco );
  
  // AO
  const tAO = new THREE.TextureLoader().load('https://i.postimg.cc/pL3wbt9j/AO.png' ); 
	const gAO = new THREE.PlaneGeometry( 1124, 846 );
  const sAO = new THREE.MeshBasicMaterial( {color: 0xffffff, map: tAO, transparent: true} );
  const mAO = new THREE.Mesh( gAO, sAO );
  mAO.rotation.y = -3.14;
  mAO.position.z = 25;
  mMarco.add( mAO );
  
  // place onto wall
  mMarco.position.z = -50;
  mMarco.position.x = -3200;
  mMarco.position.y = -400;
  mMarco.scale.set(1.5,1.5,1);
  
  animate();
  
  // Transform controls
  control = new TransformControls( camera, renderer.domElement );
  control.addEventListener( 'change', animate );
  control.addEventListener( 'dragging-changed', function ( event ) {
    orbit.enabled = ! event.value;
  } );
  control.attach( mMarco );
  scene.add( control );
  control.showZ = false;
  
}

function onWindowResize() {
	camera.aspect = window.innerWidth / window.innerHeight;
	camera.updateProjectionMatrix();
	renderer.setSize( window.innerWidth, window.innerHeight );
}

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