Practicando con three.js

Para crear esta práctica vamos a copiar la carpeta práctica 1 y vamos a pegarla y renombrarla como "práctica 2". Ahora vamos a pegar el siguiente c ódigo y colocarlo debajo del c ódigo que usamos para mostrar los ejes x, y y z. El  c ódigo presente se encarga de crear puntos con su posici ó n en x, y y z para poder agregarlos en un vector al que nombramos "points" donde los establecemos como un conjunto de puntos en la variable "geometry", ahora tenemos que crear una l ínea  y darle un color con "LineBasicMaterial". Finalmente tenemos que indicar que en esos puntos vamos a trazar la l ínea que creamos con "Line" en donde debemos de pasarle como par ámetros el conjunto de puntos y la l ínea,  despu és la agregamos al escenario con "add('l ínea a trazar ')".

En esta práctica vamos a necesitar copiar la práctica 2 y pegarla, des pué s la renombraremos a práctica 3. Ahora abriremos el archivo de script.js y lo editaremos, lo primero que haremos ser á comentar las líneas de "Mostrar ejes XYZ", una vez hecho esto vamos a agregar las siguientes l íneas de código sustituyendo las líneas de “Crear material de la línea” y “Crear mesh de la línea”. En la primera, ( a diferencia de la pr á ctica 2), lo que hacemos en cambiar “LineBasicMaterial” por “PointsMaterial” y a su vez cambiar “Line” por “Points” y agregar el objeto a escena, esto es bastante sencillo de entender simplemente cambiamos el material del objeto y su objeto a generar a escena para agregarlo posteriormente. Si implementamos todo correctamente vamos a obtener esto como salida: Nota: los puntos generados aqu í  reutilizan las coordenadas que implementamos en la  pr á ctica anterior.

En esta práctica vamos a agregar la pr á ctica 4 copiada y renombrada de la práctica 3. Ahora vamos a eliminar las siguiente líneas de código Vamos a agregar el siguiente código en su lugar para poder generar nuestros elementos: La parte de las "variables" es para definir el límite de nuestra pantalla, en mi caso es de 28x20. La parte de "evaluar las alineaciones" es para generar un numero aleatorio en horizontal y vertical entre 1 y 2 para las 2 variables, es decir "evaluar_vertical" y "evaluar_horizontal", el hecho de definir 2 variables aleatorias para cada uno es para que nos diga en que parte vamos a dibujar el cuadrado, ya que three.js toma como punto de origen el centro de la pantalla, por ello debemos de definir si queremos que se dibuje en X positivo o negativo y en Y positivo o negativo, de modo que se puede dibujar arriba o abajo, a la izquierda o derecha. La parte de "verificar alineación" con sentencias if es para verificar...

Vamos a copiar la pr á ctica 4 y renombarla a pr á ctica 5. Ahora tenemos que entrar a nuestra carpeta librerias y buscar dentro de la siguiente direccion el archivo OrbitControls.js: three.js-master\examples\jsm\controls. Lo siguiente es copiarlo y pegarlo en nuestra carpeta js e importalo en el index: Lo siguiente es ir a nuestro archivo script.js. Una vez en el archivo vamos a comentar la linea "scene.add(punto)", despues vamos a pegar el siguiente código debajo de la parte de "Crear el render y fijar el tamaño": El código se divide en 3 partes: -parte de "agregar controles de  ó rbita": en esta parte vamos a crear un objeto para la órbita que nos servirá para mover la c á mara por el plano. -parte de "agregar luz ambiental": en esta parte nos permite agregar, como su nombre lo dice, luz para el espacio en el que estamos. -parte de "agregar una spotlight": esta parte nos permite crear una luz y un degradado con respecto al alca...

Vamos a copiar la práctica 5 y a renombrarla como práctica 6. Lo primero que haremos va a aser poner el siguiente c ó digo debajo de nuestro c ó digo que ya tenemos y lo que hace es darle un sombreado al render. Ahora debemos de ir a nuestra spotlight y activarle su sombreado para la luz que proyecte sobre las figuras. Una vez establecidas las sombras vamos a indicar donde se va a proyectar nuestra sombra, es decir en que lugar vamos verla, en este caso indicamos que va a ser en el plano donde establecemos su atributo "receiveShadow" como verdadero. Ahora debemos agregar las figuras que queremos que se muestren, en este caso agregaremos un cubo Una vez que agregamos el cubo tenemos que poner su propiedad "castShadow" como verdadero para indicar que queremos que se muestre la sombre de esa figura y al final debemos de establecer su posici ón y de agregarlo al escenario. Lo que tenemos de resultado es: Ahora vamos a agregar un cono, torus, cilindro y esfera para poder...

  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 ...

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 agrega...