Come ripetere la mappa texture come GL_REPEAT?

Ho un modello di casa nel mio gioco, e ho alcuni materiali per la geometria della casa. C'è un materiale per il muro della casa, e ho un'immagine di mappa della trama per mostrare i mattoni.Come ripetere la mappa texture come GL_REPEAT?

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

In questo modo al di sopra, la texture map appare come GL_CLAMP lo voglio mostrare come GL_REPEAT.

Cosa devo fare?

Se non riesci a vedere le immagini, controlla this.

fonte

2012-07-03 user1497753

Si chiama THREE.RepeatWrapping lì. Il valore loadTexture è impostato su THREE.ClampToEdgeWrapping per impostazione predefinita (vedere la funzione Ctor dal collegamento precedente). Non so se è possibile utilizzare lo callback (perché this in JS è un po 'strano (sembra che punti allo Image creato, non allo Texture creato)). Firma:

loadTexture: function (path, mapping, callback) {

Meglio basta il nome la consistenza a livello locale e di impostare le modalità di avvolgere manualmente:

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

Sembra che tu non stai andando lontano con threejs senza guardare il codice vero e proprio ...

fonte

2012-07-03 06:48:47

Ho provato a impostare wrapS e wrapT in questo modo, ma non funziona. Penso che forse il materiale sia sbagliato, ora uso il MeshPhongMaterial, dovrei usare ShaderMaterial? – user1497753

Non so, proverei comunque a farlo funzionare. La trama deve essere una potenza di due, vedere [WebGLRenderer, l. 5721] (https://github.com/mrdoob/three.js/blob/master/src/renderers/WebGLRenderer.js). –

Ho avuto un problema simile, ho ridimensionato un cubo e la trama è stata allungata. Per evitare ciò è necessario impostare la nuova dimensione del cubo in 'render()' in questo modo: 'texture.repeat.set (2 * cWidth, 2 * cHeight);' (quindi la texture si comporta come un pattern non ridimensionato). Spero possa aiutare. –

mi hanno inviato un esempio di lavoro completo a: http://stemkoski.github.com/Three.js/Texture-Repeat.html

la parte rilevante del codice di esempio è:

// 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);

fonte

2012-07-04 12:16:35

Grazie mille! Ho saputo come ripetere la texture su cubo e sfera. Ma ho un'altra domanda su come far ripetere la trama sui materiali della geometria? Ho qualche modello caricato nel mio gioco, la geometria della modella ne ha alcuni materiali, ognuno di essi ha un'immagine di trama diversa, quindi potresti darmi qualche suggerimento o esempio? Grazie! – user1497753

Ce l'ho. È proprio allo stesso modo! L'immagine che stavo usando ha una dimensione di 120 * 120, lo cambio in 128 * 128 quindi il problema è risolto! Forse la dimensione dell'immagine deve essere 128 * 128 o 256 * 256 o qualcosa se vuoi vedere 'ripeti' – user1497753

Sì, per far funzionare le funzioni di ripetizione le dimensioni dell'immagine devono essere pari a 2. –

immagine deve essere 8x8, 16x16, 32x32, 128x128, 256x256, 512x512, ecc E tutti al lavoro. =)

fonte

2014-11-24 12:02:14 Ilya

Il wrapping richiede che le immagini siano power-of-two (POT), ma non devono essere quadrate. – WestLangley

@WestLangley vuoi dire che anche un 8x512 funzionerebbe? – fuchs777

@ fuchs777 È corretto. – WestLangley

Come ripetere la mappa texture come GL_REPEAT?

risposta

Problemi correlati