es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Cómo definir el área de la textura a aplicar en un rostro.

31 Jul, 2023 Programación

Tengo un cubo hecho con Three.JS y quiero aplicar una parte de una textura en cada cara.
Concretamente, estoy buscando una función que tome 4 parámetros: x1, y1, x2, y2 que especifiquen la área de la textura para aplicar a la cara.
Por ejemplo, con la entrada [1, 0, 15, 16] (para una textura de 16×16), quiero la textura de la cara derecha (la izquierda es mi cubo de control, [0, 16, 0, 16]).

Si especifico [16, 0, 0, 16], mi textura está invertida.
Creo que tengo que hacerlo con UV (porque es relativo a la textura y no al cubo mismo), pero hasta ahora no pude obtener un resultado satisfactorio.

También quiero que cada cara sea independiente. Entonces, si modifico la UV de una textura, la UV de las otras no se modifica (incluso si la textura es la misma).

Aquí hay una versión mínima de mi cubo (limpiada de todas mis pruebas y otras cosas no relacionadas con mi problema):
https://jsfiddle.net/theogiraudet/djcnrte0/

¡Gracias por tu respuesta!

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para aplicar una parte específica de una textura en cada cara de un cubo de Three.js, es necesario utilizar el mapeo UV. El mapeo UV es una técnica que asigna una textura 2D a una malla 3D.

    Para lograr el resultado deseado, deberás modificar las coordenadas UV de cada cara. Afortunadamente, Three.js proporciona una forma sencilla de hacerlo.

    Primero, necesitas crear un objeto de textura y cargar tu archivo de imagen. Luego, debes crear un objeto de material que utilice la textura. En el objeto de material, establece la propiedad map.repeat como (1/número de caras horizontalmente, 1/número de caras verticalmente) para repetir la textura en todas las caras.

    const loader = new THREE.TextureLoader();
const texture = loader.load('ruta/a/la/textura.png');

const material = new THREE.MeshBasicMaterial({
  map: texture,
  side: THREE.DoubleSide,
  map.repeat.set(1/3, 1/2) // Suponiendo un cubo con 3 caras horizontales y 2 caras verticales
});

    A continuación, debes modificar las coordenadas UV de cada cara. Las coordenadas UV determinan qué parte de la textura se asigna a cada parte de la malla. En Three.js, las coordenadas UV van desde (0, 0) hasta (1, 1).

    const uvs = [
  new THREE.Vector2(x1/16, 1 - y1/16), // Esquina superior izquierda del área deseada
  new THREE.Vector2(x2/16, 1 - y1/16), // Esquina superior derecha del área deseada
  new THREE.Vector2(x2/16, 1 - y2/16), // Esquina inferior derecha del área deseada
  new THREE.Vector2(x1/16, 1 - y2/16) // Esquina inferior izquierda del área deseada
];

geometry.faceVertexUvs[0][índiceCara] = [uvs[0], uvs[1], uvs[3]]; // Primer triángulo de la cara
geometry.faceVertexUvs[0][índiceCara+1] = [uvs[1], uvs[2], uvs[3]]; // Segundo triángulo de la cara

    En el código anterior, índiceCara representa el índice de la cara para la cual deseas modificar las coordenadas UV. El array uvs contiene las cuatro coordenadas UV, enumeradas en sentido contrario a las agujas del reloj, empezando por la esquina superior izquierda. El objeto geometry.faceVertexUvs contiene las coordenadas UV de todas las caras en la geometría.

    Finalmente, debes crear tu objeto de cubo utilizando la geometría y el material modificados.

    const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({
  map: texture,
  side: THREE.DoubleSide,
  map.repeat.set(1/3, 1/2)
});

const cubo = new THREE.Mesh(geometry, material);

    Recuerda que cada cara necesitará su propio conjunto de coordenadas UV para tener texturas independientes.

Comments are closed.