Convertir votre modèle 3D en script JS

Aujourd’hui, je vous propose un exemple pour afficher votre objet CAO 3D sur une page web.
Oubliez des outils non open source tel Inka (qui ne fonctionne pas sous linux), c’est gratuit, et facilement reproductible.

Voici un bout de page html5 capable d’afficher une scène 3D Three.js avec un fichier object.js

<script type="text/javascript">
var renderer = new THREE.WebGLRenderer( { antialias: true } );
var scene = new THREE.Scene();
var mesh = null;
var camera = new THREE.PerspectiveCamera( 75, ($(window).width () - 45) / ($(window).height () - 25), 1, 1000 );
var canvasWidth = ($(window).width () - 45);
var canvasHeight = ($(window).height () - 25);
var lookAt = new THREE.Vector3( 0, 150, 0);
$('#scene').append (renderer.domElement);

function addLight (){
var dirLight = new THREE.DirectionalLight(0xffffff, 0.95);
dirLight.position.set(-3, 3, 7);
dirLight.position.normalize();
scene.add(dirLight);

var pointLight = new THREE.PointLight(0xFFFFFF, 5, 50);
pointLight.position.set(10, 20, -10);
scene.add(pointLight);
}

function setupCamera (){
camera.position.z = 60;
scene.add( camera );
}
function setGeometry ( geometry, geoColor ) {
var material = new THREE.MeshBasicMaterial( {
color: geoColor,
vertexColors : THREE.FaceColors,
});
mesh = new THREE.Mesh( geometry, material);

mesh.scale.z = 2;
mesh.scale.y = 1;
mesh.scale.x = 2;
scene.add(.mesh);
}

function ajustSizes (){
renderer.setSize (canvasWidth, canvasHeight);
var jsonLoader = new THREE.JSONLoader();
jsonLoader.load( "object.js", function (geometry) { setGeometry (geometry, 0xA0A0B0);});
loadRestOfScene();
}

function loadRestOfScene (){
addLight ();
setupCamera ();
}

function animLoop (){
camera.position.y += .1;
lookAt.y = camera.position.y;
camera.lookAt(lookAt);
renderer.render(scene, camera);
requestAnimationFrame( function () {animLoop ();});
}
setTimeout (function (){animLoop ();}, 1000);
</script>
<canvas id="scene"></canvas>

Un exemple ? Allez voir mon cv animé, l’écran 9 montre des escaliers 3D.

Tu souhaites quelque chose très fort ? Dis le en jquery !

Je viens de voir un site très distrayant qui prouve que le temps de la page web inamovible et statique est bel et bien révolu.

J’ai l’impression de voir une œuvre d’art, ou bien une féerie, ou une fantaisie de l’esprit en regardant certains sites animés.
Par exemple, je suis tombé sur ce site de mariage http://public.orsi-and-jan.info/home qui est vraiment subjuguant.

Joignant l’admiration à l’envie, m’est venu l’idée de m’y essayer moi aussi.
J’ai donc créé mon petit cv accessible à l’adresse http://libe.toile-libre.org/cv/cv.html qui regroupe plusieurs anims faites maison que je trouve sympa.
Plusieurs utilisent canvas, une utilise Three.js (+ WebGL), une utilise SVG, et toutes utilisent scrollorama (basé sur tweenmax).

Bonne rigolade !