0
220
Vistas¿Cómo representar rectángulos de diferentes dimensiones con la misma textura de borde y que las esquinas no se estiren?
Esta es mi textura. Me gustaría tener un montón de rectángulos de diferentes tamaños, eso significa que todos pueden tener diferentes relaciones de aspecto.
Si uso una textura
en un Plano, las texturas se estirarían, especialmente alrededor de las esquinas. (No me importa si el medio se raya ya que es solo un degradado).
Se parece a esto .
Si es posible, me gustaría tener rectángulos de diferentes tamaños que usen una textura y que las esquinas no estén estiradas. Me gusta
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
Hice una implementación de BufferGeometry de 9-slicing. Funciona creando 9 planos con los respectivos UV normales. Cuando lo estira, solo se escalan los bordes y el plano central, por lo que las esquinas no se distorsionan.
const basePlaneVertices = [0, 0, 1, 0, 1, 1, 1, 1, 0, 1, 0, 0]; class NineSlicePlane extends THREE.Mesh { constructor(material, dimensions = { width: 100, height: 100, border: 25 }, uvBorder = 0.25) { let geometry = new THREE.BufferGeometry(); let vertices = []; let uvs = []; const vertexOffsetsX = [0, dimensions.border, dimensions.width - dimensions.border, dimensions.width]; const vertexOffsetsY = [0, dimensions.border, dimensions.height - dimensions.border, dimensions.height]; const uvOffsets = [0, uvBorder, 1 - uvBorder, 1]; for (let i = 0; i < 3; i++) { for (let j = 0; j < 3; j++) { for (let k = 0; k < 6; k++) { vertices.push( basePlaneVertices[k * 2] * (vertexOffsetsX[i + 1] - vertexOffsetsX[i]) + vertexOffsetsX[i] - dimensions.width * 0.5, basePlaneVertices[k * 2 + 1] * (vertexOffsetsY[j + 1] - vertexOffsetsY[j]) + vertexOffsetsY[j] - dimensions.height * 0.5, 0 ); uvs.push(uvOffsets[i + basePlaneVertices[k * 2]], uvOffsets[j + basePlaneVertices[k * 2 + 1]]); } } } geometry.setAttribute('position', new THREE.BufferAttribute(new Float32Array(vertices), 3)); geometry.setAttribute('uv', new THREE.BufferAttribute(new Float32Array(uvs), 2)); super(geometry, material); } }
·
Juan Pablo Isaza
Denunciar
Responde la pregunta