Avant de commencer à introduire la texture, introduisons l'attribut de rugosité et l'attribut de métallisation.
L' attribut de rugosité .roughnessindique la rugosité du matériau, 0 indique une réflexion spéculaire lisse, 1 indique une réflexion diffuse complète et l'attribut de métallisation .metalnessindique la similitude entre le matériau et le métal. Pour les matériaux non métalliques, tels que le bois et la pierre, utilisez 0, et utilisez 1 pour le métal. Il n'y a pas de valeur intermédiaire pour passer. Des valeurs comprises entre 0,0 et 1,0 peuvent être utilisées pour l'apparence du métal rouillé.
Dans l'exemple précédent, nous n'avons ajouté que la lumière ambiante, c'est une source de lumière de base, elle n'a pas de direction, et la couleur de cette source de lumière va se superposer à la couleur des objets existants dans la scène, pour la rugosité et le métal nous allons parler dans cette section Dans une certaine mesure, utiliser uniquement la lumière ambiante ne donne pas un bon effet de rendu. Donc, avant de commencer, nous ajoutons une lumière parallèle sur la base d'origine. La lumière parallèle peut être comparée à la lumière du soleil, et l'intensité lumineuse reçue par toute la zone éclairée par la lumière parallèle est la même.
// 灯光
const light = new THREE.AmbientLight(0xffffff, 0.5);
scene.add(light);
// 直线光源
const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
directionalLight.position.set(10, 10, 10);
scene.add(directionalLight);
Examinons ensuite l'effet de réflexion spéculaire lisse :
const material = new THREE.MeshStandardMaterial({map: doorColorTexture,transparent: true,alphaMap: doorAlphaTexture,aoMap: doorAOTexture,side: THREE.DoubleSide,displacementMap: doorHeightTexture,displacementScale: 0.05,roughness: 0
});
On peut voir que la surface de l'objet émet directement une lumière parallèle. Lorsque est roughnessréglé sur 1, peu importe comment vous l'ajustez, vous ne verrez pas l'effet miroir ci-dessus, car roughnesslorsqu'il est sur 1, une réflexion diffuse sera effectuée, les étudiants intéressés peuvent l'essayer.
Si dans le projet, l'objet entier est lisse ou rugueux, aucune texture n'est nécessaire, mais dans les projets réels, une partie de l'objet doit souvent être lisse et d'autres parties sont rugueuses et rugueuses Le degré n'est pas le même. Ainsi, si vous souhaitez spécifier des parties brillantes sur un objet rugueux, vous pouvez définir une carte de texture métallique pour l' metalnessMapattribut (ou inversement, si vous souhaitez spécifier des parties rugueuses sur un objet lisse, vous pouvez utiliser une carte de texture sur le roughnessMapattribut )
const textureLoader = new THREE.TextureLoader();
const roughnessTexture = textureLoader.load(roughness);
const material = new THREE.MeshStandardMaterial({map: doorColorTexture,transparent: true,alphaMap: doorAlphaTexture,aoMap: doorAOTexture,side: THREE.DoubleSide,displacementMap: doorHeightTexture,displacementScale: 0.05,roughness: 1,roughnessMap: roughnessTexture
});
À un emplacement spécifique sur le modèle, la valeur réelle des deuxmetalness propriétés est égale au produit de la valeur de la propriété elle-même et de la valeur dans la carte correspondante. roughnessLe code ci-dessus générera l'effet illustré dans la figure suivante :
On peut voir que la partie principale de la porte est en miroir et que la page de titre de la porte peut ne pas être complètement reflétée en raison de la rouille ~
metalnessL' utilisation est roughnessexactement , et ne sera pas démontrée ici.
Enfin
Une trousse d'information préliminaire est préparée pour tout le monde. Contient 54 livres électroniques liés au front-end 2.57G, "Collection d'interviews front-end (avec réponses et analyse)", des didacticiels vidéo sur les connaissances difficiles et clés (ensemble complet).
Amis dans le besoin, vous pouvez cliquer sur la carte ci-dessous pour recevoir et partager gratuitement