Matériau

De OSWiki
Aller à la navigation Aller à la recherche

Qu'est ce qu'un matériau ?"

Un matériau décrit l'apparence des objets :

  • couleur,
  • texture,
  • reflets de la lumière.

Les couleurs

Certains matériaux acceptent un paramètre couleur sous la forme d'une valeur hexadécimale comme par exemple 0xffffff. Heureusement, Three.js a un objet couleur très pratique pour travailler avec les couleurs. On peut créer une couleur en prenant une chaîne hexadécimale ou une chaine rgb pour la passer dans la couleur.

<syntaxhighlight lang = 'javascript'> //Utiliser une chaîne hexadécimale var color = new THREE.Color("#6f4171"); //Utiliser une chaîne rgba var color = new THREE.Color("rgba(188, 141, 190, 1)"); </syntaxhighlight> On peut obtenir la couleur en hexadécimal avec la méthode .getHex de la classe Color.

<syntaxhighlight lang = 'javascript'> var hex = color.getHex(); </syntaxhighlight> Il existe de nombreuses méthodes associées à l'objet

Les textures

Dans le domaine de la synthèse d'image, une texture est une image en deux dimensions (2D) que l'on va appliquer sur une surface (2D) ou un volume en trois dimensions (3D) de manière à habiller cette surface ou ce volume [1].

On utilise des textures pour les appliquer sur des surfaces ou pour créer des cartes de reflexion ou de réfraction.

Il existe plusieurs classes dédiées à la création d'objets texture dans Three.js :

D'autres classes sont utilisées pour charger des textures :

Il existe également de nombreuses constantes décrite sur la page Textures (constantes) qui vont définir :

  • les modes de cartographie,
  • les modes de recouvrement des géométries par la texture,
  • des filtres d'agrandissement et de réduction,
  • les types, formats, formats de compression des texture
  • l'encodage.

Ombres et reflets

Quelques matériaux

MeshNormalMaterial

Ce n'est pas le matériel le plus pratique car il permet très peu de contrôles. La couleur des plans du mesh sont définis en fonction de leur position. Cela crée des effets irisés assez beaux sur les objets. C'est mieux que rien, ce matériel n'est pas dépendant de l'éclairage. <syntaxhighlight lang = "javascript"> var material = new THREE.MeshNormalMaterial(); </syntaxhighlight>

Cas pratique

Organisation des dossiers et fichiers

Fichiers Index.html et style.css

Code javascript

Le code

<syntaxhighlight lang = 'javascript'>

var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

camera.position.y +=20; camera.position.x -=10; camera.position.z = 130;

var renderer = new THREE.WebGLRenderer({alpha: true}); renderer.setSize( window.innerWidth, window.innerHeight ); document.body.appendChild( renderer.domElement );

var material = new THREE.MeshNormalMaterial(); var cube = forme(material ,-90,50);

var color = new THREE.Color( "#770077" ); var material = new THREE.MeshLambertMaterial( {color: color.getHex()} ); var cube1 = forme(material ,-50,50);

var color = new THREE.Color( "#FF0055" ); var material = new THREE.MeshLambertMaterial( {color: color.getHex(), wireframe: true} ); var cube2 = forme(material ,-10,50);

var geometry = new THREE.OctahedronGeometry( 15 ); var textureLoader = new THREE.TextureLoader(); var cube3; //déclaré en dehors de la fonction textureLoader.crossOrigin = true; textureLoader.load('../images/webglNoel05.jpeg', function(texture) { texture.wrapS = texture.wrapT = THREE.RepeatWrapping; texture.repeat.set( 2, 1 ); var material = new THREE.MeshLambertMaterial( {map: texture} );

  cube3 = new THREE.Mesh( geometry, material );
  cube3.position.x = 30;
  cube3.position.y = 50;
  scene.add( cube3 );

});

var color = new THREE.Color( "#7833aa" ); var material = new THREE.MeshPhongMaterial( {color: color.getHex(), specular: 0x009900 } ); var cube4 = forme(material ,70,50);

	var geometry =  new THREE.OctahedronGeometry( 15 );

var textureLoader = new THREE.TextureLoader(); var cube5; //déclaré en dehors de la fonction textureLoader.crossOrigin = true; textureLoader.load('../images/webglNoel06.jpeg', function(texture) { texture.wrapS = texture.wrapT = THREE.RepeatWrapping; texture.repeat.set( 2, 1 ); var material = new THREE.MeshPhongMaterial( {map: texture, specular: 0x009900 } );

  cube5 = new THREE.Mesh( geometry, material );
  cube5.position.x = -90;
  cube5.position.y = 10;
  scene.add( cube5);

});

var color = new THREE.Color( "#7833aa" ); var material = new THREE.MeshPhongMaterial( {color: color.getHex(), specular: 0x00ff00 } ); var cube6 = forme(material ,-50,10);


var geometry = new THREE.OctahedronGeometry( 20 ); var textureLoader = new THREE.TextureLoader(); var cube7; //déclaré en dehors de la fonction textureLoader.crossOrigin = true; textureLoader.load('../images/4268-bump.jpg', function(texture) { texture.wrapS = texture.wrapT = THREE.RepeatWrapping; texture.repeat.set( 2, 1 );

 		var material = new THREE.MeshPhongMaterial( {color: color.getHex(), bumpMap: texture} );
 		cube7 = new THREE.Mesh( geometry, material );
 		cube7.position.x = 0;
 		cube7.position.y = 10;
  	scene.add( cube7);

});

var marron = new THREE.Color( "#815B51" ); var geo = new THREE.SphereGeometry( 20, 32, 32 ); var textureLoader = new THREE.TextureLoader(); var cube8; //déclaré en dehors de la fonction textureLoader.crossOrigin = true; textureLoader.load('../images/bump_bois.jpg', function(texture) { texture.wrapS = texture.wrapT = THREE.RepeatWrapping; texture.repeat.set( 2, 1 );

 		var material = new THREE.MeshPhongMaterial( {color: marron.getHex(), bumpMap: texture} );
 		cube8 = new THREE.Mesh( geo, material );
 		cube8.position.x = 50;
 		cube8.position.y = 10;
  	scene.add( cube8);

});


var light = new THREE.PointLight( 0xFFFFFF , 1.5); light.position.set( 10, 0, 80 ); scene.add(light);

var light2 = new THREE.PointLight( 0xFFFFFF , 1.0); light2.position.set( -40, 11, -1 ); scene.add(light2);

function forme(material,posX,posY) {

  var geometry =  new THREE.OctahedronGeometry(15 );
  var obj = new THREE.Mesh(geometry, material);
  obj.position.x = posX;
  obj.position.y = posY;
  scene.add(obj);    
  return obj;	

}

function animate() { requestAnimationFrame( animate );

cube.rotation.x += 0.01; cube.rotation.y += 0.01; cube1.rotation.x -= 0.01; cube1.rotation.y += 0.01; cube2.rotation.x += 0.01; cube2.rotation.y -= 0.01; cube3.rotation.x -= 0.01; cube3.rotation.y -= 0.01;

cube4.rotation.x += 0.01; cube4.rotation.y += 0.01; cube5.rotation.x -= 0.01; cube5.rotation.y += 0.01; cube6.rotation.x += 0.01; cube6.rotation.y -= 0.01; cube7.rotation.x -= 0.01; cube7.rotation.y -= 0.01;

cube8.rotation.x += 0.01; cube8.rotation.y += 0.01;

renderer.render( scene, camera ); }

animate(); </syntaxhighlight>

Analyse du code Javascript