¿Cómo se repite el mapa de texturas como GL_REPEAT?

Tengo un modelo de casa en mi juego, y tengo algunos materiales para la geometría de la casa. Hay un material para la pared de la casa, y tengo una imagen de mapa de textura para mostrar los ladrillos.¿Cómo se repite el mapa de texturas como GL_REPEAT?

var mat = new THREE.MeshPhongMaterial({ 
    ambient: 0x969696, 
    map: THREE.ImageUtils.loadTexture('textures/G/G0.jpg'), 
    overdraw: true,combine: THREE.MultiplyOperation 
});

De esta manera anterior, el mapa de textura se presenta como GL_CLAMP quiero que se muestre como GL_REPEAT.

¿Qué debo hacer?

Si no puede ver las imágenes, marque this.

Fuente

2012-07-03 user1497753

Se llama THREE.RepeatWrapping allí. El loadTexture se establece de manera predeterminada en THREE.ClampToEdgeWrapping (consulte la función de ctor del enlace anterior). No sé si puede usar el callback (porque this en JS es un poco raro (parece que apunta al Image creado, no al creado Texture)). Firma:

loadTexture: function (path, mapping, callback) {

mejor que acaba de nombrar a la textura de forma local y establecer los modos de envoltura de forma manual:

var t = THREE.ImageUtils.loadTexture('textures/G/G0.jpg'); 
t.wrapS = t.wrapT = THREE.RepeatWrapping;

Parece que no vamos ahora con threejs sin mirar el código real ...

Fuente

2012-07-03 06:48:47

He intentado configurar wrapS y wrapT así, pero no funciona. Creo que tal vez el material está mal, ahora uso el MeshPhongMaterial, ¿debería usar ShaderMaterial en su lugar? – user1497753

No sé, intentaré hacer que esto funcione. La textura debe ser una potencia de dos, ver [WebGLRenderer, l. 5721] (https://github.com/mrdoob/three.js/blob/master/src/renderers/WebGLRenderer.js). –

Tuve un problema similar, escalé un cubo y la textura se estiró. Para evitar esto, necesita establecer el nuevo tamaño de cubo en 'render()' como ese: 'texture.repeat.set (2 * cWidth, 2 * cHeight);' (entonces la textura se comporta como un patrón sin escala). Espero que ayude. –

me han publicado un ejemplo de trabajo completo en: http://stemkoski.github.com/Three.js/Texture-Repeat.html

la parte pertinente del ejemplo de código es:

// for example, texture repeated twice in each direction 
var lavaTexture = THREE.ImageUtils.loadTexture('images/lava.jpg'); 
lavaTexture.wrapS = lavaTexture.wrapT = THREE.RepeatWrapping; 
lavaTexture.repeat.set(2, 2); 
var lavaMaterial = new THREE.MeshBasicMaterial({ map: lavaTexture }); 
var lavaBall = new THREE.Mesh(THREE.GeometryUtils.clone(sphereGeom), lavaMaterial); 
scene.add(lavaBall);

Fuente

2012-07-04 12:16:35

Muchas gracias He sabido cómo hacer que la textura se repita en el cubo y la esfera. Pero tengo otra pregunta sobre cómo hacer que la textura se repita en los materiales de la geometría. Tengo un modelo cargado en mi juego, la geometría del modelo tiene algunas materiales, cada uno de ellos tiene una textura-imagen diferente, así que ¿podría darme alguna sugerencia o ejemplo? ¡Gracias! – user1497753

Lo tengo. ¡Es exactamente lo mismo! La imagen que estaba usando tiene un tamaño de 120 * 120, la cambio a 128 * 128 para resolver el problema. Tal vez el tamaño de la imagen debe ser de 128 * 128 o 256 * 256 o algo así, si quieres ver 'repetir' – user1497753

Sí, para que las características de repetición funcionen, las dimensiones de la imagen deben tener una potencia de 2. –

La imagen debe ser de 8x8, 16x16, 32x32, 128x128, 256x256, 512x512, etc. Y todo estar trabajando. =)

Fuente

2014-11-24 12:02:14 Ilya

El envoltorio requiere que las imágenes sean potencia-de-dos (POT), pero no tienen que ser cuadradas. – WestLangley

@WestLangley ¿quiere decir que un 8x512 también funcionaría? – fuchs777

@ fuchs777 Eso es correcto. – WestLangley

¿Cómo se repite el mapa de texturas como GL_REPEAT?

Respuesta

Cuestiones relacionadas