var cubo = null
var materialInicial = null
var corIncial = null
var candidatos = []
var rato = null

var cena = new THREE.Scene()

var camara = new THREE.PerspectiveCamera( 70,  window.innerWidth / window.innerHeight, 0.1, 500)
camara.position.x = 4
camara.position.y = 3
camara.position.z = 2
//camara.position.set(4,3,2)


var minhaJanela = document.getElementById( 'meuCanvas' )

var renderer = new THREE.WebGLRenderer( { canvas: minhaJanela } )

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

document.body.appendChild( renderer.domElement )

renderer.shadowMap.enabled = true

var controlos = new THREE.OrbitControls( camara, renderer.domElement)

var carregador = new THREE.GLTFLoader()

var raycaster = new THREE.Raycaster()

var rato = new THREE.Vector2()

carregador.load( 'cena.gltf', 	function ( gltf ) {
									cena.add( gltf.scene )

									cubo = cena.getObjectByName('Cubo')
									materialInicial = cubo.material
									corIncial = cubo.material.color

									candidatos.push(cena.getObjectByName('Botao1'))
									candidatos.push(cena.getObjectByName('Botao2'))
									candidatos.push(cena.getObjectByName('Botao3'))
									candidatos.push(cena.getObjectByName('Botao4'))

									cena.traverse( function (elemento) {
 										if (elemento.isMesh) {
 											elemento.castShadow = true
 											elemento.receiveShadow = true
 										}
 									});
 })

var luzPonto1 = new THREE.PointLight( "white" )
luzPonto1.position.set( 5, 6, 0 )
luzPonto1.castShadow = true
cena.add( luzPonto1 )

window.onclick = function(evento) {
	rato.x = (evento.clientX / window.innerWidth) * 2 - 1
	rato.y = -(evento.clientY / window.innerHeight) * 2 + 1
	// invocar raycaster
	pegarPrimeiro()
}

function pegarPrimeiro() {
	raycaster.setFromCamera(rato, camara)

	var intersetados = raycaster.intersectObjects(candidatos)
	if (intersetados.length > 0) {
		// fazer o que houver a fazer com o primeiro interesetado
		//. . . interesetado[0].object . . .
		cubo.material = intersetados[0].object.material
	}
}


document.getElementById('btn_cor').addEventListener('click', mudarCor)
function mudarCor(){
	cubo.material = new THREE.MeshStandardMaterial()
	cubo.material.color = new THREE.Color('yellow')
}

document.getElementById('btn_material').addEventListener('click', mudarMaterial)
function mudarMaterial(){
	cubo.material = new THREE.MeshNormalMaterial()
}

document.getElementById('btn_vis').addEventListener('click', mudarVisiblidade)
function mudarVisiblidade(){
	cubo.visible = !cubo.visible
}

document.getElementById('btn_transparencia').addEventListener('click', mudarTransparencia)
function mudarTransparencia(){
	cubo.transparent = true
	cubo.material.opacity = 0.5

}

document.getElementById('btn_repor').addEventListener('click', repor)
function repor(){
	cubo.material = materialInicial
	cubo.material.color = corIncial
	cubo.transparent = false
	cubo.visible = true
}

animar()

function animar(){
	requestAnimationFrame(animar)
	renderer.render(cena, camara)
}


//renderer.render( cena, camara )