Entradas

Introducción

Para las pr ácticas que vamos a hacer tenemos que tener en cuenta que vamos a hacerlas mediante el framework o biblioteca en Español que es conocida como three.js, esta biblioteca es para Javascript y vamos a hacer pr ácticas de forma gr ácfica, es decir vamos a implementar todo lo que tiene que ver con elementos gr ácficos como lo son las coordenadas pasando por X, Y y Z, hasta cosas m á s complejas como los son luces, interfaces gr á ficas de usuario,etc. En estas pr ácticas encontrar ás que empezaremos desde lo m ás b ásico como lo es la parte de descargar la biblioteca de three.js y pasaremos a la parte de coordenadas viendo como es que se ubican mediante three.js y la parte de los ejes y como configurar y posicionar la c ámara  para pasar a la parte de desarrollo o construcci ó n gr á fica, en esta parte dibujaremos l íneas manipulando las coordenadas que veremos en la primera parte, despu és lo que haremos ser á colocar puntos en pantalla y haremos una pr áctica interesante q...
Publicar un comentario
Leer más

Práctica 1: Creando, preparando archivos, librerías y primera práctica

Imagen
Se creó una carpeta en la que agregaremos todas nuestras pr ác ticas, se prepar ó el editor de c ódigo  Sublime Text 3 y se decarg ó la librer ía Three.js de la p á gina  https://threejs.org/. Dentro de la carpeta carpeta agregamos 2 carpetas principales donde una carpeta se le puso el nombre de "librerías" donde pusimos la carpeta three.js-master(three.js descomprimido) y otra de nombre "practica_1". Dentro de la carpeta p r ác tica 1 agregamos 2 carpetas que son "css" y "js". Dentro de la carpeta css agregamos un archivo llamado "estilo.css". Y pusimos el siguiente c ó digo en el archivo: Copiamos los archivos three.js y jquery-3.6.0.js, los pegamos dentro de la carpeta js que se encuentra en nuestra carpeta práctica 1 y le agregamos un archivo llamado script.js creado por nosotros. En la ra í z de la carpeta pr á ctica 1 creamos el archivo index.html para colocar el siguiente c ó digo donde  importamos las librer í as y nuestro archi...
Publicar un comentario
Leer más

Práctica 2: Agregando líneas

Imagen
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 ')".
1 comentario
Leer más

Práctica 3: Agregando cuadrados

Imagen
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.
Publicar un comentario
Leer más

Práctica 4: Graficando 10000 puntos aleatorios

Imagen
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...
Publicar un comentario
Leer más

Práctica 5: Agregar plano, luces ambientales y órbita

Imagen
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...
Publicar un comentario
Leer más

Práctica 6: Agregando figuras

Imagen
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...
Publicar un comentario
Leer más