Matériau
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 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 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> |