Publicité

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émarrer, 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>

 

Mon premier tout 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.

 

 

 

 

three.js img 001 three.js img 002 three.js img 003 three.js img 004

Nouveau Calque...

Vous avez aimé cet article ? Alors partagez-le avec vos amis en cliquant sur les boutons ci-dessous :


Commentaires (2)

  • Invité - Onibi

    Okey. C'était juste un manque de précision de ta part, je crois, vis à vis des ignares êtres que nous sommes ;)<br />C'est le dossier contenant les fichiers, qu'il faut déplacer dans les addons. En mettant les fichiers directement dans addons, ça ne marche visiblement pas.

  • Invité - Onibi

    Bonjour,<br />Ce tuto semble très intéressant, merci. Cependant, j'ai beau avoir installé blender 1.67 pour l'occasion, lorsque je mets les fichiers __init__.py, export_threejs.py, import_threejs.py à l'endroit indiqué, l'addon three ne s'affiche pas dans la liste des addons blender. Alors que j'ai bien redémarré.<br />Une solution ?

Poster un commentaire en tant qu'invité

0

Publicité - Ce contenu peut vous intéresser - Test

La pub ça rapporte pas grand chose, en plus ça vous laisse d'horribles cookies non comestibles, autrement appelé trackers. Ce cookie est utilisé par DoubleClick (Google Adsense). Vous avez tout le droit de ne pas en vouloir et donc quitter cet excellent blog. Dans le cas contraire, vous l'acceptez et vous poursuivez le surf en toute connaissance de cause (par ailleurs j'utilise piwik).