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

De OSWiki
Aller à la navigation Aller à la recherche
Aucun résumé des modifications
 
(5 versions intermédiaires par le même utilisateur non affichées)
Ligne 9 : Ligne 9 :
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.
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.


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


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


=Les textures=
=Les textures=
=Ombres et reflets=
=Quelques matériaux=
=Cas pratique=
{{Modèle:Utiliser des matériaux}}
{|
|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.y +=20;
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)].
camera.position.x -=10;
camera.position.z = 130;


var renderer = new THREE.WebGLRenderer({alpha: true});
On utilise des textures pour les appliquer sur des surfaces ou pour créer des cartes de reflexion ou de réfraction.
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );


var material = new THREE.MeshNormalMaterial();
Il existe plusieurs classes dédiées à la '''création d'objets texture''' dans Three.js :
var cube = forme(material ,-90,50);
*[[CanvasTexture]]
*[[CompressedTexture]]
*[[CubeTexture]]
*[[DataTexture]]
*[[DepthTexture]]
*[[Texture]]
*[[VideoTexture]]


var color = new THREE.Color( "#770077" );
D'autres classes sont utilisées pour '''charger des textures''' :
var material = new THREE.MeshLambertMaterial( {color: color.getHex()} );
var cube1 = forme(material ,-50,50);


var color = new THREE.Color( "#FF0055" );
*[[CompressedTextureLoader]]
var material = new THREE.MeshLambertMaterial( {color: color.getHex(), wireframe: true} );
*[[CubeTextureLoader]]
var cube2 = forme(material ,-10,50);
*[[DataTextureLoader]]
*[[TextureLoader]]


var geometry = new THREE.OctahedronGeometry( 15 );
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 cube3; //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/webglNoel05.jpeg', function(texture)
* les types, formats, formats de compression des texture  
{
* l'encodage.
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" );
=Ombres et reflets=
var material = new THREE.MeshPhongMaterial( {color: color.getHex(), specular: 0x009900 } );
=Quelques matériaux=
var cube4 = forme(material ,70,50);
===[[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>


var geometry = new THREE.OctahedronGeometry( 15 );
=Cas pratique=
var textureLoader = new THREE.TextureLoader();
{{Modèle:Utiliser des matériaux}}
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();
</source>
| style="position: absolute; width:50%;  min-height:100%;  "|{{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 »