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

De OSWiki
Aller à la navigation Aller à la recherche
Ligne 23 : Ligne 23 :


=Les textures=
=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 [https://fr.wikipedia.org/wiki/Texture_(image_de_synth%C3%A8se)].
On utilise des textures pour les appliquer sur des surfaces ou pour créer des cartes de reflexion ou de réfraction.
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 :
Il existe plusieurs classes dédiées à la '''création d'objets texture''' dans Three.js :
*[[CanvasTexture]]
*[[CanvasTexture]]
*[[CompressedTexture]]
*[[CompressedTexture]]
Ligne 33 : Ligne 36 :
*[[Texture]]
*[[Texture]]
*[[VideoTexture]]
*[[VideoTexture]]
D'autres classes sont utilisées pour '''charger des textures''' :
*[[CompressedTextureLoader]]
*[[CubeTextureLoader]]
*[[DataTextureLoader]]
*[[TextureLoader]]
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=
=Ombres et reflets=

Version du 19 février 2018 à 01:19

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.

<source 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)"); </source> On peut obtenir la couleur en hexadécimal avec la méthode .getHex de la classe Color.

<source lang = 'javascript'> var hex = color.getHex(); </source> 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

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=2784 »