Práctica #7 PRIMITIVAS Y CLASES DE MATERIAL CON THREE.JS

Tamaño: px

Comenzar la demostración a partir de la página:

Download "Práctica #7 PRIMITIVAS Y CLASES DE MATERIAL CON THREE.JS"

Pedro Arroyo Soler
hace 6 años
Vistas:

1 Práctica #7 PRIMITIVAS Y CLASES DE MATERIAL CON THREE.JS

2 Objetivos 2 Familiarizarse con la estructura general de un programa usando Three.js Identificar los objetos más importantes del API. Utilizar eficientemente la documentación on-line. Identificar las primitivas de Three.js y los principales tipos de materiales.

3 Material de apoyo 3 Descargar la versión liberada del API desde Three.js o directamente de github: Probar los ejemplos adjuntos a las notas A3. Aplicaciones 3D con WebGL y Three.js, visualizar el cambio con respecto al uso de WebGL nativo. Revisar la documentación de apoyo disponible en la carpeta descargada ubicada en three.js-master/docs o directamente del sitio de Three.js:

4 Actividades: página Crea un copia del archivo ejemplo2-2_threejs_cuborotatorio.html. 2. Revisa la documentación para mostrar individualmente (modificando el archivo 1 a la vez) las siguientes primitivas: BoxGeometry CylinderGeometry DodecahedronGeometry IcosahedronGeometry SphereGeometry TorusGeometry

5 Actividades: página Ahora une las 6 figuras en una misma escena (3 arriba y 3 abajo), para esto toma en cuenta las siguientes configuraciones iniciales: Configura el fondo en color negro. Configura la posición de la cámara para alejarla lo suficiente y ver las 6 figuras, recuerda que puedes asignar el vector de posición en un solo paso: camera.position.set( coordx, coordy, coordz ) o asignando componente por componente: camera.position.x, camera.position.y, camera.position.z Configura las propiedades de la cámara (perspectiva), en caso de que la escena completa no se visualice con las proporciones correctas.

6 Actividades: página Posiciona las 6 primitivas en lugares diferentes para que queden distribuidas simétricamente en la escena. En el eje Z todas deben tener la misma posición. 5. Asigna un material del mismo color a todas las primitivas, apóyate de la paleta de colores de HTML5 o de algún editor para asignar colores más vistosos. 6. Haz que cada figura rote simultáneamente en su misma posición. Para poder visualizar eficientemente todas las caras de cada figura, utiliza cualquiera de los siguientes pares de valores para las rotaciones que implementes: x += 0.02; y y += 0.01; x += 0.02; y z += 0.01;

7 Vista previa: página 1 7

8 Actividades: página Retoma la página 1 de esta práctica y crea una copia. 2. Revisa el ejemplo ejemplo2-3_threejs_cubotexturizado. 3. Realiza los ajustes necesarios para que en lugar del cubo texturizado se muestren tus 6 figuras anteriores. 4. Lo que sigue es crear 3 variables globales para visualizar distintas clases de material. Las variables globales se deben llamar: material0, material1, material2.

9 Actividades: página Las 3 clases de materiales a crear (con el mismo color) deben ser: THREE.MeshPhongMaterial para material0 THREE.MeshStandardMaterial para material1 THREE.MeshBasicMaterial para material2 6. Modifica la función run() para que la rotación de cada figura se mantenga constante, es decir, aunque no se haga clic. 7. Agrega una variable global de nombre material, que sirva como contador e inicialízala con 0.

10 Actividades: página Modifica la función onmouseup() para configurar el comportamiento al hacer clic sobre el canvas: Con cada clic se debe incrementar en uno el contador material. En caso de que el contador sea mayor o igual a 3 éste se debe reiniciar con 0 para que sólo tome los valores 0, 1 y 2. Usar una estructura switch para asignar un material diferente al anterior, a todas las primitivas. Por ejemplo: cubo.material = material0; cilindro.material = material0; 9. Nótese que con cada clic va a cambiar el material de todas las primitivas simultáneamente.

11 Actividades: página Finalmente agrega tu firma a la práctica dentro del body: <footer> <p>neojc 2018</p> </footer>

12 Vista previa: página 2 12

Documentos relacionados

CONTPAQi Componentes Carta técnica 1.1.4

CONTPAQi Componentes Carta técnica 1.1.4 Carta técnica 1.1.4 Versión anterior 1.1.3 (Enero 2015) Liberación 26 de febrero de 2015 No olvides revisar el historial de cartas técnicas si brincas de una versión antigua y existen versiones intermedias;