« Matériau » : différence entre les versions

De OSWiki
Aller à la navigation Aller à la recherche
Aucun résumé des modifications
 
(11 versions intermédiaires par le même utilisateur non affichées)
Ligne 1 : Ligne 1 :
=Qu'est ce qu'un matériau ?"=
=Qu'est ce qu'un matériau ?"=


Un matériau décrit l'apparence des objets :  
Un [[Materials|matériau]] décrit l'apparence des [[Objects|objets]] :  
* '''couleur''',  
* '''couleur''',  
* '''texture''',
* '''texture''',
Ligne 7 : Ligne 7 :


=Les couleurs=
=Les couleurs=
=Les textures=
Certains [[Materials|matériaux]] acceptent un paramètre [[Color|couleur]] sous la forme d'une valeur hexadécimale comme par exemple 0xffffff. Heureusement, [[Définitions#Three.js|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.
=Ombres et reflets=
=Quelques matériaux=
=Cas pratique=
{|
|style="width: 50%;"|<source lang = 'javascript'>
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );


camera.position.z = 100;
<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]].


var renderer = new THREE.WebGLRenderer({alpha: true});
<syntaxhighlight lang = 'javascript'>
renderer.setSize( window.innerWidth, window.innerHeight );
var hex = color.getHex();
document.body.appendChild( renderer.domElement );
</syntaxhighlight>
Il existe de nombreuses méthodes associées à l'objet


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


var color = new THREE.Color( "#770077" );
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 [https://fr.wikipedia.org/wiki/Texture_(image_de_synth%C3%A8se)].
var material = new THREE.MeshLambertMaterial( {color: color.getHex()} );
var cube1 = forme(material ,-50,50);


var color = new THREE.Color( "#FF0055" );
On utilise des textures pour les appliquer sur des surfaces ou pour créer des cartes de reflexion ou de réfraction.
var material = new THREE.MeshLambertMaterial( {color: color.getHex(), wireframe: true} );
var cube2 = forme(material ,-10,50);


var geometry =  new THREE.OctahedronGeometry( 15 );
Il existe plusieurs classes dédiées à la '''création d'objets texture''' dans Three.js :
var textureLoader = new THREE.TextureLoader();
*[[CanvasTexture]]
var cube3; //déclaré en dehors de la fonction
*[[CompressedTexture]]
textureLoader.crossOrigin = true;
*[[CubeTexture]]
textureLoader.load('../images/webglNoel05.jpeg', function(texture)
*[[DataTexture]]
{
*[[DepthTexture]]
texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
*[[Texture]]
texture.repeat.set( 2, 1 );
*[[VideoTexture]]
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" );
D'autres classes sont utilisées pour '''charger des textures''' :
var material = new THREE.MeshPhongMaterial( {color: color.getHex(), specular: 0x009900 } );
var cube4 = forme(material ,70,50);


var geometry =  new THREE.OctahedronGeometry( 15 );
*[[CompressedTextureLoader]]
var textureLoader = new THREE.TextureLoader();
*[[CubeTextureLoader]]
var cube5; //déclaré en dehors de la fonction
*[[DataTextureLoader]]
textureLoader.crossOrigin = true;
*[[TextureLoader]]
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 );
Il existe également de nombreuses constantes décrite sur la page [[Textures (constantes)]] qui vont définir :
var textureLoader = new THREE.TextureLoader();
* les modes de cartographie,
var cube7; //déclaré en dehors de la fonction
* les modes de recouvrement des géométries par la texture,
textureLoader.crossOrigin = true;
* des filtres d'agrandissement et de réduction,
textureLoader.load('../images/4268-bump.jpg', function(texture) {
* les types, formats, formats de compression des texture  
  texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
* l'encodage.
  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" );
=Ombres et reflets=
var geo = new THREE.SphereGeometry( 20, 32, 32 );
=Quelques matériaux=
var textureLoader = new THREE.TextureLoader();
===[[MeshNormalMaterial]]===
var cube8; //déclaré en dehors de la fonction
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.
textureLoader.crossOrigin = true;
<syntaxhighlight lang = "javascript">
textureLoader.load('../images/bump_bois.jpg', function(texture) {
var material = new THREE.MeshNormalMaterial();
  texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
</syntaxhighlight>
  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);
}); 


 
=Cas pratique=
var light = new THREE.PointLight( 0xFFFFFF , 1.5);
{{Modèle:Utiliser des matériaux}}
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();
</source>
| style="position: absolute; width:50%;  height:90vh;  "|{{Spécial:IframePage/Materiau}}
|}
 
==Analyse du code==

Dernière version du 25 mars 2022 à 13:34

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

Récupérée de « https://cogito.no-ip.info/cogito/OSWiki/index.php?title=Matériau&oldid=4926 »