Buen día.
Para acreditar la materia de graficacion en el instituto tecnológico
de la laguna, se me encomendó investigar sobre WebGl.
A lo largo de esta temporada, estaré poniendo avances sobre
mi investigación de este conjunto de librerías que nos permiten graficar a través
de javascript.
El primer punto es elegir el framework/API con el que se desarrollara la investigación.
El que más me convenció fue THREE.js, esto es debido al
extenso material que hay en la web.
Con esta API podemos crear y mostrar animaciones graficas en
3D en los navegadores web.
Yo lo probé con la última versión de Chrome y si funciono, también
leí que se puede con FireFox 4 o superior
A continuación les pongo una serie de links donde e encontrado
información acerca Three.js
Y puedes ir de la mano con esta serie de tutoriales:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Sample
Three.js</title>
<style>
#container
{
background: #000;
width: 400px;
height: 300px;
}
</style>
</head>
<body>
<div id="container">
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script src="js/Three.js"></script>
<script type="text/javascript">
// set the scene size
var WIDTH = 400,
HEIGHT = 300;
// set some camera attributes
var
VIEW_ANGLE = 45,
ASPECT = WIDTH / HEIGHT,
NEAR = 0.1,
FAR = 10000;
// get the DOM element to attach to
// - assume we've got jQuery to hand
var $container = $('#container');
// create a WebGL renderer, camera
// and a scene
var renderer = new
THREE.WebGLRenderer();
var camera = new
THREE.PerspectiveCamera(VIEW_ANGLE,
ASPECT,
NEAR,
FAR);
var scene = new
THREE.Scene();
// the camera starts at 0,0,0 so pull it
back
camera.position.z = 300;
// start the renderer
renderer.setSize(WIDTH, HEIGHT);
// attach the render-supplied DOM element
$container.append(renderer.domElement);
// create the sphere's material
var sphereMaterial = new THREE.MeshLambertMaterial(
{
color: 0xCC00FF
});
// set up the sphere vars
var radius = 50, segments = 16, rings =
16;
// create a new mesh with sphere geometry
-
// we will cover the sphereMaterial next!
var sphere = new
THREE.Mesh(
new THREE.CubeGeometry(20, 20, 20),
sphereMaterial);
// add the
sphere to the scene
scene.add(sphere);
// and the camera
scene.add(camera);
// create a point light
var pointLight = new THREE.PointLight(0xFFFFFF);
// set its position
pointLight.position.x = 10;
pointLight.position.y = 30;
pointLight.position.z = 130;
// add to the
scene
scene.add(pointLight);
// draw!
renderer.render(scene, camera);
</script>
</html>
Y ahora veamos su visualización:
En las siguientes semanas iremos viendo mas ejemplos de diferentes tutoriales hasta alcanzar a realizar ejemplos propios y trabajar en un proyecto en especifico.
saludos y gracias!!
Fernando Hoyos.
