Práctica 8: Configurando luces con GUI

Vamos a opiar y pegar nuestra práctica 7 y la renombraremos a práctica 8.

Vamos a ir a la ruta: C:\Users\RSSpe\Documents\practicas_graficacion\librerias\three.js-master\examples\js\lights y vamos a copiar el archivo "RectAreaLightUniformsLib.js" y pegarlo en nuestra carpeta js.

Vamos a ir a la ruta: C:\Users\RSSpe\Documents\practicas_graficacion\librerias\three.js-master\src y vamos a copiar el archivo "utils.js" y pegarlo en nuestra carpeta js.

Vamos a ir a la ruta: C:\Users\RSSpe\Documents\practicas_graficacion\librerias\three.js-master\examples\js\libs y vamos a copiar el archivo "stats.min.js" y pegarlo en nuestra carpeta js.

Ahora debemos de importar las bibliotecas en nuestro index:

Ahora vamos a modificar nuestro render con el siguiente código.

Lo que sigue es eliminar nuestro cubo personalizado, plano, GUI y nuestra spotlight.

Ahora debemos de agregar nuestro plano nuevo con sus características, establecer coordenadas y agregarlo:

Vamos a agregar una variable para inicializar los controles de incremento

Ahora vamos a agregar la iluminación y a establecer sus atributos y agregalo al plano y lo que sigue es agregar las aréas de luz o que van a proyectar luz y establecer su posición.

Agregamos las lámparas con sus atributos y las agregamos al escenario

La parte final es crear una función que con los colores e intensidades de nuestras luces. Una vez hecho esto debemos de crear 3 interfacez y definir sus atributos para posteriormente agregarlas al escenario.

El resultado es el siguiente y podemos configurar la opacidad y color de cada "foco" si es que los podemos llamar de esta forma.