Reporte Practica4 GraficacionU3

INSTITUTO TECNOLGICO SUPERIOR DE SAN LUIS, CAPITAL
INGENIERIA SISTEMAS COMPUTACIONALES

REPORTE DE PRCTICA NO. 4
TITULO DE LA PRACTICA: Transformaciones 3D, Lneas y ASIGNATURA: Graficacion

Superficies Curvas (Texto 3D)
UNIDAD TEMATICA: 3.- Graficacin 3D NUMERO DE PARTICIPANTES: 1
DURACIN : 1 hora LUGAR: Laboratorio de CC
Nombre(s) del alumno(s): William Velzquez Yez CALIF:
I OBJETIVO DE LA PRCTICA:
Elaborar un programa utilizando la librera Three.js que grafique una figura 3D personalizada (la figura no debe ser ninguna de
las vistas en clase y/o practicas anteriores) y mostrarla en la escena. Agregar una interfaz grfica (utilizando controles GUI)
para aplicarle las transformaciones bsicas (Rotacin, Escalacin y Traslacin) y agregar un Texto 3D a la escena con su
nombre propio. Ver instrucciones Practica 4 en el archivo anexo que se encuentra en la plataforma Moodle
(Graficacion_Instrucciones_Practicas_U3.pdf).
II. EXPOSICIN TERICA DE LA PRCTICA:
Llenar por el alumno (que es un grfico 3D, que es Three.js, etc)
III. MATERIAL Y/O EQUIPO:

Computadora con Navegador Web, Apache Web Server y Conexin a internet (para consultas de material en plataforma Moodle y
otras fuentes), APIs
IV. REQUISITOS:
El alumno deber contar con conocimientos sobre lenguaje de programacin Java. Graficacin de objetos 3D y transformaciones.
Sistema de coordenadas (x, y, z).
V. PROCEDIMIENTOS: (Escriba el procedimiento llevado a cabo en la prctica; puede incluir imgenes adems de la
explicacin por cada paso)
Es una biblioteca liviana escrita en JavaScript para crear y mostrar grficos animados por ordenador en 3D en un
navegador Web y puede ser utilizada en conjuncin con el elemento canvas de HTML5, SVG WebGL. El cdigo fuente
est alojado en un repositorio en GitHub
VI. RESULTADOS Y CONCLUSIONES FINALES. Escriba los resultados obtenido y/o conclusiones
VII. CUESTIONARIO
1. Qu problemas se encontraron al resolver la prctica?
Como comenzar
2. Cmo los resolvi?

Viendo ejempos
3. Beneficios que descubri al desarrollo de la prctica?

Que lo pude hacer
<html>
<head>
<title>Ejercicio 3</title>


<script type="text/javascript" src="lib/three.js-master/build/three.js"></script>


<script type="text/javascript" src="lib/three.js-master/examples/js/controls/OrbitControls.js"></script>



<script type="text/javascript" src="lib/THREEx.WindowResize.js"></script>

<script type="text/javascript" src="lib/THREEx.KeyboardState.js"></script>


<script type="text/javascript" src="lib/stats.js-master/src/Stats.js"></script>


<script type="text/javascript" src="lib/dat-gui-master/build/dat.gui.js"></script>
</head>
<body>

<div id="WebGL-output"></div>
<div id="Stats-output"></div>


<script type="text/javascript">
function init()
{
//estadisticas monitor
var stats = initStats();
//crear escena
var escenario = new THREE.Scene();
//crear render
var renderer = new THREE.WebGLRenderer();
renderer.setClearColor(0xFFFFFF);
renderer.setSize(window.innerWidth, window.innerHeight);
//crear camara
var camara = new THREE.PerspectiveCamera(25, window.innerWidth / window.innerHeight, 1, 1000);
camara.position.set(100, 100, 100);
/*camara.position.x=0;
camara.position.y=0;
camara.position.z=100;*/
camara.lookAt(escenario.position);
//aadir el elemento renderer al div webgl-output

document.getElementById("WebGL-output").appendChild(renderer.domElement);
//controles orbit
var controlesOrbit = new THREE.OrbitControls(camara, renderer.domElement);
controlesOrbit.addEventListener('change', renderer);
//resize de ventana
THREEx.WindowResize(renderer, camara);
//por teclado
var teclado = new THREEx.KeyboardState();
//crar grid
var grid = new THREE.GridHelper(50, 5);
var coloLineasP = new THREE.Color("rgb(255,0,0)");
var colorGrid = new THREE.Color("rgb(0,0,0)");
grid.setColors(coloLineasP, colorGrid);
escenario.add(grid);
//plano 2D
//crear el dodecaedro
var geometriadodecaedro = new THREE.DodecahedronGeometry(20, 5);

var materialdodecaedro = new THREE.MeshBasicMaterial({ color: 0xFE9A2E });
var dodecaedro = new THREE.Mesh(geometriadodecaedro, materialdodecaedro);
escenario.add(dodecaedro);
//controles GUI
var controlesGUI = new function () {

//datos para rotacion
this.rotarX = 0;
this.rotarY = 0;
this.rotarZ = 0;
//datos para escalacion

this.escalarX = 1;
this.escalarY = 1;
this.escalarZ = 1;
//datos para traslacion

this.trasladarX = 0;
this.trasladarY = 0;
this.trasladarZ = 0;
//datos propiedades objeto

this.alambrado = materialdodecaedro.wireframe;
this.color = materialdodecaedro.color.getStyle();
this.transparencia = materialdodecaedro.transparent;
this.opacidad = materialdodecaedro.opacity;
this.visible = true;
};
//interfaz
var interfazGUI = new dat.GUI();

var interfaztransformacion = interfazGUI.addFolder("Menu - Transformaciones");
//interfaz rotacion
var interfazrotacion = interfaztransformacion.addFolder("Rotacion");
interfazrotacion.add(controlesGUI, 'rotarX', -10, 10);
interfazrotacion.add(controlesGUI, 'rotarY', -10, 10);
interfazrotacion.add(controlesGUI, 'rotarZ', -10, 10);
//interfaz escalacion
var interfazescalacion = interfaztransformacion.addFolder("Escalacion");
interfazescalacion.add(controlesGUI, 'escalarX', -10, 10);
interfazescalacion.add(controlesGUI, 'escalarY', -10, 10);
interfazescalacion.add(controlesGUI, 'escalarZ', -10, 10);
//interfaz traslacion
var interfaztraslacion = interfaztransformacion.addFolder("Traslacion");
var contX = interfaztraslacion.add(controlesGUI, 'trasladarX', -50, 50);
var contY = interfaztraslacion.add(controlesGUI, 'trasladarY', -50, 50);
var contZ = interfaztraslacion.add(controlesGUI, 'trasladarZ', -50, 50);
contX.listen();
contX.onChange(function (value) { dodecaedro.position.x = controlesGUI.trasladarX });
contY.listen();
contY.onChange(function (value) { dodecaedro.position.y = controlesGUI.trasladarY });
contZ.listen();
contZ.onChange(function (value) { dodecaedro.position.z = controlesGUI.trasladarZ });
var interfazpropiedades = interfazGUI.addFolder("Propiedades - Objeto");

interfazpropiedades.add(controlesGUI, 'alambrado').onChange(function (e)
{ materialdodecaedro.wireframe = e; });
interfazpropiedades.addColor(controlesGUI, 'color').onChange(function (e)
{ materialdodecaedro.color.setStyle(e); });
interfazpropiedades.add(controlesGUI, 'transparencia').onChange(function (e)
{ materialdodecaedro.transparent = e; });
interfazpropiedades.add(controlesGUI, 'opacidad', 0, 1).onChange(function (e)
{ materialdodecaedro.opacity = e; });
interfazpropiedades.add(controlesGUI, 'visible').onChange(function (e) { materialdodecaedro.visible =
e; });
Animacion();
function Animacion()
{
//rotar usando controlesGUI
dodecaedro.rotation.x = controlesGUI.rotarX;
dodecaedro.rotation.y = controlesGUI.rotarY;
dodecaedro.rotation.z = controlesGUI.rotarZ;
//escalar usando controlesGUI

dodecaedro.scale.set(controlesGUI.escalarX, controlesGUI.escalarY, controlesGUI.escalarZ)
//funcion para animar objetos

requestAnimationFrame(Animacion);
Renderizar();
}
function Renderizar()
{
stats.update();
//controlesOrbit.update();
//renderisar escena, objetos y camara
renderer.render(escenario, camara);
}
function initStats()
{
var stats = new Stats();
//0 - fps, 1 - ms
stats.setMode(0);
stats.domElement.style.position = 'absolute';
stats.domElement.style.top = '0px';
stats.domElement.style.left = '0px';
document.getElementById("Stats-output").appendChild(stats.domElement);
return stats;
}
window.onload = init;
</script>
</body>
</html>

Reporte Practica4 GraficacionU3

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Reporte Practica4 GraficacionU3

Cargado por

Copyright:

Formatos disponibles

INSTITUTO TECNOLGICO SUPERIOR DE SAN LUIS, CAPITAL

INGENIERIA SISTEMAS COMPUTACIONALES

TITULO DE LA PRACTICA: Transformaciones 3D, Lneas y ASIGNATURA: Graficacion

II. EXPOSICIN TERICA DE LA PRCTICA:

Llenar por el alumno (que es un grfico 3D, que es Three.js, etc)

III. MATERIAL Y/O EQUIPO:

2. Cmo los resolvi?

3. Beneficios que descubri al desarrollo de la prctica?

//aadir el elemento renderer al div webgl-output

var geometriadodecaedro = new THREE.DodecahedronGeometry(20, 5);

var controlesGUI = new function () {

//datos para escalacion

//datos para traslacion

//datos propiedades objeto

var interfazGUI = new dat.GUI();

var interfazpropiedades = interfazGUI.addFolder("Propiedades - Objeto");

//rotar usando controlesGUI

//escalar usando controlesGUI

//funcion para animar objetos

También podría gustarte