Práctica 7: Agregando GUI

 

Para empezar copiamos la práctica 6, la pegamos y la renombramos como práctica 7.

Lo siguiente es ir a la ruta: C:\Users\RSSpe\Documents\practicas_graficacion\librerias\three.js-master\examples\js\libs.

Una vez dentro vamos a copiar el archivo "dat.gui.min.js" y lo vamos a pegar en nuestra carpeta js y lo que sigue es importar el archivo en nuestro index.

Ahora comentamos las figuras que agregamos anteriormente y comentamos la línea donde establecemos "shadowMapSoft" como true en nuestro render.

Lo que sigue es poner esta parte de código.

Para avanzar eliminaremos las siguientes líneas:

Ahora vamos a colocar un plano, y a habilitar su sombra para finalmente posicionarlo y programar su rotación en el eje X y posteriormente agregarlo al plano.

Ahora vamos a crear una caja y establecer sus características "MeshLamberMaterial" como el color y opacidad, después vamos pasar la caja a "Mesh" para crear un cubo, darle un nombre y habilitar su sombra para finalmente agregarlo a escena.

Lo siguiente es agregar una función para poder agregar valores por default a los aspectos de velocidad, opacidad y color como podemos ver en el código, después sigue agregar el control de GUI.

Ahora debemos de agregar una función que reciba nuestra GUI y agregar cada atributo a su interfaz con valores mínimos y máximos.

Finalmente debemos de agregar el siguiente código que es para poder establecer el color, opacidad de los objetos y nuestras coordenadas de nuestra cámara.

Podemos ver nuestra interfaz con su GUI y podremos cambiar la velocidad de rotacion, el color de la figura y su opacidad.