Corsi on-line

ThreeJS: animazioni 3D con JavaScript

ThreeJS è una libreria Open Source basata su JavaScript per la realizzazione di animazioni tridimensionali integrabili in pagine Internet e applicazioni Web; le caratteristiche principali di questa soluzione sono la leggerezza, la versione minificata del framework pesa appena qualche Kb, e il basso livello di complessità dei metodi disponibili. Anche possedendo conoscenze basilari in tema di JavaScript si potrà diventare rapidamente produttivi.CatturaChiaramente ThreeJS presenta un core completamente incentrato sul rendering, motivo per il quale essa potrà essere utilizzata per l’implementazione di progetti basati sull’elemento canvas di HTML5, per la resa grafica dinamica di immagini Bitmap tramite linguaggi di scripting, le proprietà CSS3D per i browser che le supportano, il formato SVG (Scalable Vector Graphics) e l’interfaccia di programmazione WebGL (Web-based Graphics Library).

Adottare la libreria è particolarmente semplice, una volta inclusa nel documento al quale si sta lavorando si potrà procedere con la chiamata ai metodi. L’esempio seguente mostra come sia possibile sfruttare ThreeJS per ottenere un cubo rotante animato tridimensionalmente a partire da un’immagine PNG bidimensionale (nel nostro caso una texture). L’output generato sarà simile a quello dell’immagine mostrata in precedenza.

<!DOCTYPE html>
<html>
<head>
<title>Animazione 3D di un cubo con ThreeJS</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">

<style>
body {
margin: 0px;
background-color: black;
overflow: hidden;
}
</style>

</head>
<body>
<script src="three.min.js"></script>
<script>
var camera, scene, renderer;
var mesh;
init();
animate();
function init() {
camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 1000 );
camera.position.z = 450;
scene = new THREE.Scene();
var texture = new THREE.TextureLoader().load( 'side.png' );
var geometry = new THREE.BoxBufferGeometry( 210, 210, 210 );
var material = new THREE.MeshBasicMaterial( { map: texture } );
mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
renderer = new THREE.WebGLRenderer();
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
window.addEventListener( 'resize', onWindowResize, false );
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
function animate() {
requestAnimationFrame( animate );
mesh.rotation.x += 0.005;
mesh.rotation.y += 0.01;
renderer.render( scene, camera );
}
</script>
</body>
</html>

Nel caso specifico i test del rendering sono stati eseguiti su Firefox 46, ma la libreria si è dimostrata in grado di funzionare senza particolari problemi anche sulle versioni più recenti di Google Chrome e Opera Browser.

Via ThreeJS

Post correlati
I più letti del mese
Tematiche