C’est une pause aussi bien professionnelle qu’extra pro. Je n’utilise quasiment pas d’ordi.
Retour début décembre. Until then, goodbye for now.
Rives de Seine
Tourner le cadre en utilisant la souris.
Sympa certes, mais pas aussi bien fait que le « 360° car visualizer »
http://carvisualizer.plus360degrees.com/threejs/
Un collègue m’a soumis le code suivant :
<script type="text/javascript">
function prime (i){return /^(?!(11+)\1+$)/.test (Array.apply(null, new Array(i)).map(Number.prototype.valueOf,1).toString().replace (/,/g, ""));}
</script>
C’est très intelligent mais très obfuscant.
Imaginez que votre nombre n devienne 11..1 (n fois). (code réalisé par l’expression Array.apply(null, new Array(i)).map(Number.prototype.valueOf,1).toString().replace (/,/g, « »));)
Le principe de la regex est de s’assurer que la chaîne passée en paramètre n’est pas précédée d’un 1 lors de son recoupage. L’algo de test de la regex va d’abord s’assurer que 11..1 n-1 fois ne soit pas capturé par le groupe \1 (vraisemblablement il y a peu de chance que ce soit le cas), sinon il va recouper avec n – 2, et ainsi de suite jusqu’à 2.
S’il y arrive, c’est que n est divisible par le nombre utilisé pour la recoupe. Si aucune recoupe n’a marché, l’expression régulière sera valide et en fait sa condition est nécessaire et suffisante pour prouver que n est premier.
Petit essai de modeling d’avion en utilisant comme base des cercles et en utilisant la fonction ‘Loft’ de maya.
(Créer un solide NURBS en interpolant tous les cercles sélectionnés)
Je joins le modèle maya pour vous permettre de l’utiliser et de l’améliorer.
robinDR400Simple
FYI : J’utilise la version students de Maya, gratuite et disponible très facilement sur le site Autodesk. Je n’envisage aucune utilisation commerciale de mon travail.
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.
- Prenez votre objet dans votre éditeur préféré
- Exportez le en .obj
- Éditez les fichiers objet.obj et objet.mtl pour remplacer les « , » par des « . »
- Utilisez le script python suivant : https://raw.github.com/mrdoob/three.js/master/utils/converters/obj/convert_obj_three.py
- vous possédez un fichier js à incorporer dans une page html
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.
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 !
À placer en .xpm ou en .ico pour faire de jolis raccourcis eclipse personnalisés.
Je l’ai nommée Rain walk. Son amertume fait ressentir la fraîcheur de la pluie en plein été. Elle comporte aussi des tons enjoués qui évoquent la légèreté d’une marche rapide.
Clip audio : Le lecteur Adobe Flash (version 9 ou plus) est nécessaire pour la lecture de ce clip audio. Téléchargez la dernière version ici. Vous devez aussi avoir JavaScript activé dans votre navigateur.