Bevor wir mit der Einführung der Textur beginnen, wollen wir das Rauhigkeitsattribut und das Metallheitsattribut einführen.
Das Rauhigkeitsattribut .roughnessgibt die Rauheit des Materials an, 0 gibt eine glatte Spiegelreflexion an, 1 zeigt eine vollständige diffuse Reflexion an und das Metallheitsattribut .metalnessgibt die Ähnlichkeit zwischen dem Material und Metall an. Für nichtmetallische Materialien wie Holz und Stein verwenden Sie 0. und verwenden Sie 1 für Metall.Es gibt keinen Zwischenwert zum Bestehen. Für das Erscheinungsbild von rostigem Metall können Werte zwischen 0,0 und 1,0 verwendet werden.
Im vorherigen Beispiel haben wir nur Umgebungslicht hinzugefügt, es ist eine einfache Lichtquelle, es hat keine Richtung, und die Farbe dieser Lichtquelle wird der Farbe der vorhandenen Objekte in der Szene überlagert, für die Rauheit und das Metall wir werden in diesem Abschnitt sprechen Bis zu einem gewissen Grad ergibt die Verwendung von Umgebungslicht nur keinen guten Rendering-Effekt. Also, bevor wir beginnen, fügen wir ein paralleles Licht auf der ursprünglichen Basis hinzu.Das parallele Licht kann mit Sonnenlicht verglichen werden, und die Lichtintensität,die von der gesamten vom parallelen Licht beleuchteten Fläche empfangen wird, istgleich.
// 灯光
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);
Dann werfen wir einen Blick auf den glatten Spiegelreflexionseffekt:
const material = new THREE.MeshStandardMaterial({map: doorColorTexture,transparent: true,alphaMap: doorAlphaTexture,aoMap: doorAOTexture,side: THREE.DoubleSide,displacementMap: doorHeightTexture,displacementScale: 0.05,roughness: 0
});
Es ist zu erkennen, dass die Oberfläche des Objekts paralleles Licht direkt abstrahlt. Wenn auf 1 roughnesseingestellt ist, werden Sie den obigen Spiegeleffekt nicht sehen, egal wie Sie ihn einstellen, denn roughnesswenn er auf 1 steht, wird eine diffuse Reflexion durchgeführt, interessierte Schüler können es versuchen.
Wenn in dem Projekt das gesamte Objekt glatt oder rau ist, wird keine Textur benötigt, aber in tatsächlichen Projekten muss oft ein Teil des Objekts glatt sein und andere Teile sind rau, und der Grad der Rauheit ist nicht derselbe. Wenn Sie also einige glänzende Teile auf einem rauen Objekt spezifizieren möchten, können Sie eine metallische Textur-Map für das metalnessMapAttribut festlegen (oder umgekehrt, wenn Sie einige raue Teile auf einem glatten Objekt spezifizieren möchten, können Sie eine Textur-Map verwenden). 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
});
An einer bestimmten Stelle im Modell ist der tatsächliche Wert der beidenmetalness Eigenschaften gleich dem Produkt aus dem Eigenschaftswert selbst und dem Wert in der entsprechenden Karte. roughnessDer obige Code erzeugt den in der folgenden Abbildung gezeigten Effekt:
Es ist ersichtlich, dass der Hauptteil der Tür gespiegelt ist und die Titelseite der Tür aufgrund von Rost möglicherweise nicht vollständig reflektiert wird~
metalnessDie Verwendung ist roughnessgenau und wird hier nicht demonstriert.
Zu guter Letzt
Ein Front-End-Informationspaket ist für alle vorbereitet. Enthält 54, 2,57 G Front-End-bezogene E-Books, "Front-End-Interview-Sammlung (mit Antworten und Analysen)", Video-Tutorials zu schwierigen und wichtigen Kenntnissen (vollständiger Satz).
Freunde in Not, Sie können auf die Karte unten klicken, um sie kostenlos zu erhalten und zu teilen