La 3D dans les sites web cela fait maintenant quelques années que l’on nous promet la révolution à toutes les sauces. Mais des sites en 3D il y en a peu, la plupart sont surtout des proof of concept. Cela dit la multiplication des framework de toute sorte prouve que les choses évolue. En attendant et pour pas se faire trop larguer je propose une very petite initiation.
Le but de cette initiation est d’afficher et contrôler un objet en 3D créé avec blender
J’ai choisi le framework/librairies three.js car il est fourni avec de nombreux exemples, le plug-in a installer dans blender est bien documenté et surtout elle fonctionne avec où sans WebGL
Three.js se télécharge au moment où j’écris ces quelques lignes ici
Pour le plug-in de blender c’est par ici la version 2.66 fonctionne avec blender 2.67
Installation du plug-in dans blender
sous windows rien de plus simple copier les fichiers __init__.py, export_threejs.py, import_threejs.py
dans le répertoire
C:\Users\USERNAME\AppData\Roaming\Blender Foundation\Blender\2.6X\scripts\addons
(USERNAME est à remplacer par votre nom d’utilisateur windows)
sous linux:
/home/USERNAME/.config/blender/2.6X/scripts/addons
(USERNAME est à remplacer par votre nom d’utilisateur linux)
sous Mac OSX
/Applications/Blender/blender.app/Contents/MacOS/2.6X/scripts/addons
une fois cela fait vous (re)démarrez blender, vous allez dans préférence user (ctrl + alt +U)
Dans l’onglet Add-ons -> Import Export -> tout en bas il doit y avoir Import-Export three.js, vous cochez (img1)
Si vous avez tout bien fait vous devez avoir dans le menu Export (img2)
Je ne vous explique pas comment on exporte cela me semble assez basique. je mets à disposition un sac pliage pour la suite
Les bases de three.js
Pour bien démarrer il faut quelques éléments pour la 3D (style j’y connais quelque chose !!)
- La scène
- Le rendu
- Une caméra
- Un objet (ou plus), dans notre exemple pas de matériaux juste les couleurs défini dans Blender
- Un éclairage (bas oui un scène 3D dans le noir on voit rien)
La structure des répertoires pour l’exemple
Lorsque l’on dézippe three.js dans le répertoire example on se retrouve avec une foule de librairie js bien pratique, je vous conseille de les reprendre dans votre arborescence.
Au final je propose l’arborescence des exemples avec juste une nuance pour le build
html -> /build
/js
/models
/obj
/scenes
/sounds
/textures
Mon premier tout premier exemple
Dans ce premier exemple on va definir :
- une scène (bah oui comme un spectacle)
- Utiliser un caméra Perspective
- Utiliser un point de lumière (plus facile à gérer quand on y comprend rien ;)
- Utiliser l’objet JSON que j’ai exporté depuis Blender, on lui fera faire une rotation de 45° sur l’axe y.
Il n’est pas inintéressant de voir quels sont les matériels que l’on a importé dans le json c’est pour cela qu’il y a une ligne console.log(materials);
<html>
<head>
<title>Mon premier Three.js app</title>
<style>canvas { width: 100%; height: 100% }</style>
</head>
<body>
<script src="/build/three.min.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);
//maintenant on va ajouter un objet créé avec blender
var loader = new THREE.JSONLoader();
loader.load( "obj/pliage_v3_bis.js",function (geometry,materials){
//console.log(materials);
//correction de la couleur du 2 ieme matériel
//materials[1].color = new THREE.Color("rgb(255,0,0)");
mesh2 = new THREE.Mesh( geometry, new THREE.MeshFaceMaterial( materials ) );
mesh2.position.x = 0;
mesh2.scale.x = mesh2.scale.y = mesh2.scale.z = 1;
mesh2.rotation.y = 45;
scene.add( mesh2 );
}
);
// on ajoute un point de lumière
var light = new THREE.PointLight( 0xffffff, 1, 500 );
light.position.set( 8,2,8);
scene.add( light )
//on change la position de la caméra
camera.position.z = 6;
var render = function () {
requestAnimationFrame(render);
renderer.render(scene, camera);
};
render();
</script>
</body>
</html>
Deuxième exemple
On va juste ajouter la gestion de la souris, histoire de faire bouger un peu l’objet.
On ajoute la librairie et remanier le JS (ok c’est du presque copier-coller des exemples)
<input id="valeurRY" type="input"/>
<input id="valeurRX" type="input"/>
<script src="/build/three.min.js"></script>
<script src="/js/Detector.js"></script>
<script>
var SCREEN_WIDTH = window.innerWidth;
var SCREEN_HEIGHT = window.innerHeight;
if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
var scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera( 70, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 10000 );
var mouseX = 0, mouseY = 0;
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;
var renderer,container;
init();
animate()
//maintenant on va ajouter un objet créé avec blender
function init() {
container = document.createElement( 'div' );
document.body.appendChild( container );
renderer = new THREE.WebGLRenderer();
renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT );
renderer.setFaceCulling( THREE.CullFaceNone );
container.appendChild( renderer.domElement );
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
var loader = new THREE.JSONLoader();
loader.load( "obj/pliage_v3_bis.js",function (geometry,materials){
materials[0].color = new THREE.Color("rgb(255,0,0)");
mesh2 = new THREE.Mesh( geometry, new THREE.MeshFaceMaterial( materials ) );
mesh2.position.x = 0;
mesh2.scale.x = mesh2.scale.y = mesh2.scale.z = 1;
scene.add( mesh2 );
}
);
// on ajoute un point de lumière
var light = new THREE.PointLight( 0xffffff, 1, 500 );
light.position.set( 2,2,8);
scene.add( light )
//on change la position de la caméra
camera.position.z = 10;
//detection mouvement du curseur
document.addEventListener( 'mousemove', onDocumentMouseMove, false );
}
function animate() {
requestAnimationFrame(animate );
render();
}
function render () {
var RY =document.getElementById("valeurRY");
var RX =document.getElementById("valeurRX");
mesh2.rotation.x = mouseY * Math.PI / 180;
mesh2.rotation.y = mouseX * Math.PI / 180;
renderer.render(scene, camera);
RX.value=mesh2.rotation.x;
RY.value=mesh2.rotation.y;
}
//action que l'on ralise lorsque le curseur bouge
function onDocumentMouseMove( event ) {
mouseX = ( event.clientX - windowHalfX );
mouseY = ( event.clientY - windowHalfY );
}
function onWindowResize() {
windowHalfX = window.innerWidth / 2;
windowHalfY = window.innerHeight / 2;
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
}
</script>
Bon voilà c’était un very tiny exemple car les possibilités sont bien entendu immense. Il existe des exemples de toutes sortes. Une petite recherche sur vos moteurs préféré vous permettra de découvrir tout un monde extraordinaire.
Comments powered by CComment