Saltar al contenido

Tutorial de Three.js – Hola Mundo Cubo

En este post, hablaremos de Three.js. Una biblioteca y API de javascript que le permite crear un gr谩fico 2D o 3D en su p谩gina web f谩cilmente sin tener que lidiar directamente con WebGL usando solo javascript. Creando una experiencia web inmersiva con el soporte de navegadores cruzados.

Qu茅 es Three.js

Three.js es b谩sicamente una capa abstracta construida sobre webGL para que sea m谩s f谩cil de usar. Los usuarios solo pueden usar su navegador web sin tener que descargar ning煤n marco o aplicaci贸n adicional para experimentar gr谩ficos 3D. Verifique algunas demos de la implementaci贸n de three.js aqu铆.

Dado que three.js se basa en javascript, es relativamente f谩cil agregar interactividad entre objetos 3D e interfaces de usuario como el teclado y el mouse. Entonces three.js es perfectamente adecuado para hacer un juego 3D en una plataforma web.

C贸mo usar Three.js

Para mostrarle las ideas de los pasos fundamentales para crear un objeto 3D animado con three.js, agregaremos un cubo giratorio a una p谩gina web vac铆a.

Configuraci贸n de escena

Para cada proyecto, lo primero que tenemos que hacer es crear una escena. La escena es como un universo donde podemos agregar objetos, c谩maras y luces, etc.

var scene = new THREE.Scene();

A continuaci贸n tenemos que configurar la c谩mara, hay c谩maras en perspectiva y ortogr谩ficas. Durante la mayor parte del tiempo, mantendremos la perspectiva, que es un tipo de c谩mara normal en el que ver谩 objetos m谩s cercanos, m谩s grandes y m谩s peque帽os, cuando est茅n lejos. Para la c谩mara de ortograf铆a, ver谩 una vista isom茅trica de un 谩ngulo espec铆fico sin perspectiva.

Te puede interesar:   Tutorial Typed.js | Animaci贸n de escritura en Javascript

Entonces el primer par谩metro de la c谩mara es el campo de visi贸n, b谩sicamente es el ancho del 谩ngulo de percepci贸n. Configur茅moslo en 75, la siguiente es la relaci贸n de aspecto, vamos a usar el ancho actual dividido por la altura.

var camera = new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight);

A continuaci贸n, vamos a configurar el renderizador. Puedes considerarlo como un motor de renderizado. Vamos a usar el renderizador WebGL por ahora. Puede personalizar la opci贸n de representaci贸n aqu铆, como anti-aliasing. \

var renderer = new THREE.WebGLRenderer({antialias: true});

Usaremos el m茅todo setsize para designar la resoluci贸n de representaci贸n. Usemos el ancho y la altura actuales. Luego agregue el elemento del renderizador a su cuerpo o elemento html que desee

renderer.setSize(window.innerWidth,window.innerHeight);
$('body').append(renderer.domElement);

Creando un Cubo

Ahora tenemos la escena y la configuraci贸n de la c谩mara. A continuaci贸n vamos a crear un cubo.

Lo primero es crear una geometr铆a, pensar en ella como un esqueleto para nuestro objeto. Hay muchos tipos de geometr铆a disponibles, pero como vamos a crear un cubo, usaremos BoxGeometry con el mismo tama帽o. en todas las dimensiones

var geometry = new THREE.BoxGeometry(1,1,1);

Ahora vamos a necesitar una piel para cubrir nuestra geometr铆a. As铆 que necesitamos material que defina las caracter铆sticas de la piel, como la opacidad, el reflejo o la textura. Usemos MeshBasicMaterial (color s贸lido sin reflexi贸n y c谩lculo de iluminaci贸n) con color rojo por ahora.

var material = new THREE.MeshBasicMaterial({color: 0xff0000});

Ahora podemos crear nuestro cubo creando un objeto de malla usando nuestra geometr铆a y material y agregando el cubo a la escena.

var cube = new THREE.Mesh(geometry,material);
scene.add(cube);

Pero como acabamos de agregar todo a la escena sin especificar la posici贸n, ahora nuestro cubo est谩 en el mismo lugar que la c谩mara y no se procesar谩. Vamos a moverlo un poco. Tambi茅n voy a cambiar el 谩ngulo de rotaci贸n.

cube.position.z = -5;
cube.rotation.x = 10;
cube.rotation.y = 5;

Llame a un m茅todo de renderizado en el objeto renderizador y p谩sele la escena y la c谩mara.

renderer.render(scene,camera);

Y aqu铆 est谩 el cubo renderizado.

Te puede interesar:   Colecci贸n de Hola Mundo en diferentes lenguajes de programaci贸n

A帽adiendo animaci贸n

Para este tutorial, vamos a crear un bucle de animaci贸n a partir de una llamada de funci贸n recursiva.

Primero crea una funci贸n para definir la acci贸n para cada cuadro. En el interior, incrementaremos un poco la rotaci贸n y llamaremos el m茅todo de renderizado. Al final de la funci贸n, llamaremos a requestAnimationFrame. Este m茅todo ser谩 invocado por los navegadores a la frecuencia de actualizaci贸n de pantalla actual. Generalmente 60 veces por segundo. Le pasaremos la funci贸n animada actual para que sea un ciclo recursivo.

var animate = function(){
cube.rotation.x += 0.01;
renderer.render(scene,camera);
requestAnimationFrame(animate);
}

Inicia el ciclo de animaci贸n llamando a nuestra funci贸n.

animate();

Vea c贸mo funciona la animaci贸n en este v铆deo.

Te puede interesar:   Generar c贸digos QR con PHP y HTML

De modo que lo b谩sico de c贸mo utilizar three.js para crear una animaci贸n 3D simple en su sitio web.

C贸digo fuente Three JS

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<script src="jquery-2.1.4.js"></script>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div id="navbar"><span>Three.js Tutorial</span></div>
<script src="three.min.js"></script>
<script>
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight);
var renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setSize(window.innerWidth,window.innerHeight);
$('body').append(renderer.domElement);
var geometry = new THREE.BoxGeometry(1,1,1);
var material = new THREE.MeshBasicMaterial({color: 0xff0000});
var cube = new THREE.Mesh(geometry,material);
scene.add(cube);
cube.position.z = -5;
cube.rotation.x = 10;
cube.rotation.y = 5;
renderer.render(scene,camera);
var animate = function(){
cube.rotation.x += 0.01;
renderer.render(scene,camera);
requestAnimationFrame(animate);
}
animate();
</script>
</body>
</html>

Continua aprendiendo con nosotros:

Estilos css para tablas
Mejor servidor local
0/5 (0 Reviews)
Comparte