Inclusione libreria three.js
<script type="text/javascript" src="js/three.min.js"></script>Definizione "schermo" dell'animazione; il canvas dell'animazione verrà aggiunto in quest'area:
<div class="demo" style="width:650px;height:175px;">
</div>All'interno di un tag <script>, sviluppiamo un'animazione 3d che visualizza un logo di S2 Software rotante su entrambi gli assi x e y (nel codice utilizzo jQuery per facilitare le operazioni sul div ".demo"):
// Dichiarazione variabili globali
var camera, scene, renderer;
var geometry, material, border, mesh;
// Inizializzazione scena e lancio funzione di animazione continua
init();
//animate(); non la chiamo qui: il rendering verrà lanciato dopo il caricamento della texture
function init() {
// Telecamera: definizione zoom (30), aspect ratio e lunghezza focale (da 1 a 10000)
camera = new THREE.PerspectiveCamera(30, jQuery('.demo').width() / jQuery('.demo').height(), 1, 10000);
camera.position.z = 700; // posizione in altezza: in questo caso, indica la distanza dal cubo
// Nuova scena e nuovo oggetto WebGLRenderer; se il device non supporta WebGL, si può utilizzare THREE.CanvasRenderer
scene = new THREE.Scene();
renderer = new THREE.WebGLRenderer();
renderer.setSize(jQuery('.demo').width(), jQuery('.demo').height()); // imposta il renderer con le dimensioni del div.demo
jQuery('.demo').append(renderer.domElement); // aggiunge il renderer nel div.demo
// Creazione di un cubo 200x200x200 pixel
geometry = new THREE.CubeGeometry(200, 200, 200);
// Caricamento texture: utilizzo il logo di S2 Software, dimensione 200x200 px
// (asincrono per cominciare il rendering solo a caricamento immagine ultimato)
THREE.ImageUtils.loadTexture('img/s2-200x200.png', {}, function(texture) {
// Nuovo materiale mappato come da texture
material = new THREE.MeshBasicMaterial({map: texture});
// Applicazione del materiale
mesh = new THREE.Mesh(geometry, material);
// Il cubo entra in scena
scene.add(mesh);
// Comincia l'animazione (primo rendering e successivi)
animate();
});
}
function animate() {
// Chiamata prossimo frame
requestAnimationFrame(animate);
// Rotazione cubo sui due assi
mesh.rotation.x += 0.01;
mesh.rotation.y += 0.01;
// Rendering frame attuale
renderer.render(scene, camera);
}
Ecco il risultato finale:
Materiale monocromatico con bordo
È possibile utilizzare più materiali sulla stessa geometria; nell'esempio, creo un piano 100x100 con sfondo blu ed aggiungo un bordo nero tramite THREE.SceneUtils.createMultiMaterialObject():
var material = new THREE.MeshBasicMaterial( { color: 0x0000FF} );
var border = new THREE.MeshBasicMaterial( { color: 0x000000, wireframe: true, wireframeLinewidth : 1} );
var plane = new THREE.PlaneGeometry(100, 100);
var multiMatObj = THREE.SceneUtils.createMultiMaterialObject(plane, [material, border]);
Più scene con la stessa telecamera
In alcuni casi è utile renderizzare alcuni oggetti prima ed altri dopo, per evitare sovrapposizioni errate. Ecco quindi la necessità di utilizzare più THREE.Scene:
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
var camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 1000);
var scene1 = new THREE.Scene();
var scene2 = new THREE.Scene();
// ...aggiunta elementi in scene1 e scene2...
renderer.render(scene1, camera);
renderer.render(scene2, camera);
Per oggi è tutto, spero di porter tornare presto sull'argomento magari introducendo il tema dell'illuminazione della scena.
