Antes de comenzar a presentar la textura, presentemos el atributo de aspereza y el atributo de metalicidad.
El atributo de rugosidad .roughnessindica la rugosidad del material, 0 indica un reflejo especular suave, 1 indica un reflejo difuso completo y el atributo de metalidad .metalnessindica la similitud entre el material y el metal. Para materiales no metálicos, como madera y piedra, use 0, y use 1 para metal No hay un valor intermedio para pasar. Se pueden utilizar valores entre 0,0 y 1,0 para la aparición de metal oxidado.
En el ejemplo anterior, solo agregamos luz ambiental, es una fuente de luz básica, no tiene dirección, y el color de esta fuente de luz se superpondrá al color de los objetos existentes en la escena, por la rugosidad y el metal que tenemos. vamos a hablar en esta sección Hasta cierto punto, usar solo luz ambiental no da un buen efecto de renderizado. Entonces, antes de comenzar, agregamos una luz paralela sobre la base original. La luz paralela se puede comparar con la luz del sol, y la intensidad de la luz recibida por toda el área iluminada por la luz paralela es la misma.
// 灯光
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);
Entonces echemos un vistazo al efecto de reflexión especular suave:
const material = new THREE.MeshStandardMaterial({map: doorColorTexture,transparent: true,alphaMap: doorAlphaTexture,aoMap: doorAOTexture,side: THREE.DoubleSide,displacementMap: doorHeightTexture,displacementScale: 0.05,roughness: 0
});
Se puede ver que la superficie del objeto emite luz paralela directamente. Cuando se roughnessestablece en 1, no importa cómo lo ajuste, no verá el efecto de espejo anterior, porque roughnesscuando es 1, se realizará una reflexión difusa, los estudiantes interesados pueden probarlo.
Si en el proyecto, todo el objeto es suave o áspero, entonces no se necesita textura, pero en los proyectos reales, a menudo parte del objeto debe ser suave y otras partes son ásperas y ásperas El grado no es el mismo. Por lo tanto, si desea especificar algunas partes brillantes en un objeto áspero, puede establecer un mapa de textura de metal para el metalnessMapatributo (o, por el contrario, si desea especificar algunas partes ásperas en un objeto suave, puede usar un mapa de textura en el atributo). roughnessMapatributo )
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
});
En una ubicación específica del modelo, el valor real de las dosmetalness propiedades es igual al producto del valor de la propiedad en sí y el valor en el mapa correspondiente. roughnessEl código anterior generará el efecto que se muestra en la siguiente figura:
Se puede ver que la parte principal de la puerta tiene un espejo, y es posible que la página del título de la puerta no se refleje por completo debido a la oxidación ~
metalnessEl uso es roughnessexactamente , y no se demostrará aquí.
Por fin
Se prepara un paquete de información inicial para todos. Contiene 54, 2.57G e-books relacionados con front-end, "Colección de entrevistas de front-end (con respuestas y análisis)", tutoriales en video de conocimientos clave y difíciles (juego completo).
Amigos necesitados, puede hacer clic en la tarjeta a continuación para recibir y compartir gratis