Entrar

JavaScript JavaScript

Curso breve de introducción a la programación en JavaScript

Curso de introducción a la programación en JavaScript

Acceso al contenido

Librería 3D (javascript) Librería 3D (javascript)

Three.js

Es una biblioteca liviana escrita en JavaScript para crear y mostrar gráficos animados por ordenador en 3D en un navegador Web y puede ser utilizada en conjunción con el elemento canvas de HTML5, SVG o WebGL. El código fuente está alojado en un repositorio en GitHub.

https://threejs.org/

 

Ejemplos con three.js Ejemplos con three.js

Seis cubos de diferentes materiales

Ahora creamos seis cubos en diferentes posiciones y les asignamos diferentes materiales.

Acceso al contenido

Diseño web Diseño web

Web de HTML, CSS, JavaScript y otros.

Web  sobre HTML, CSS, JavaScript, Blender, Three.js, Matter.js ....

Acceso al contenido

Animación en 2D Animación en 2D

Animación en 2D con JavaScript y Matter.js

Curso de animación en 2D en JavaScript usando la librería Matter.js

Acceso al contenido

Librería 2D (javascript) Librería 2D (javascript)

matter.js

La librería de JavaScript matter.js nos permite realizar juegos en 2D.

https://brm.io/matter-js/

Incluye un motor de física y por tanto hay colisiones entre los objetos y se pueden aplicar fuerzas y restricciones.

A continuación se muestra un ejemplo básico realizado con  matter.js.

Acceso al contenido

Ejemplo básico con Three js

El ejemplo consiste en una escena básica: luz, cámara y  un cubo en rotación.

<html>
<head>
<title>My first three.js app</title>
<style>
body { margin: 0; }
canvas { width: 100%; height: 100% }
</style>
</head>
<body>
<script src="js/three.js"></script>
<script>
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );

var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

var geometry = new THREE.BoxGeometry( 1, 1, 1 );
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );

camera.position.z = 5;

var animate = function () {
requestAnimationFrame( animate );

cube.rotation.x += 0.1;
cube.rotation.y += 0.1;

renderer.render(scene, camera);
};

animate();
</script>
</body>