Three.js Utilizzo della texture 2D \ sprite per l'animazione (planeGeometry)

Question

Sono abbastanza nuovo in html5 e three.js. Ho sperimentato un po 'con esso, e in pratica quello che voglio fare è avere una mesh (sto usando planeGeometry, come il tutorial che ho seguito usato). La mesh mostra trame diverse, che possono cambiare in seguito.

Ecco ciò che il mio codice è simile:

angelTexture = THREE.ImageUtils.loadTexture("images/textures/chars/angel/angel.png"); 
angelTexture.offset.x = -0.75; 
angelTexture.offset.y = -0.75; 

angelMesh = new THREE.Mesh(new THREE.PlaneGeometry(79, 53, 79, 53), new THREE.MeshBasicMaterial({ map: angelTexture, wireframe: false })); 

angelMesh.position.x = 0; 
angelMesh.position.y = 0; 
scene.add(angelMesh); 

Il problema è che ogni volta che offset, Mesh sembra abbastanza grande per mostrare tutte le altre Sprites (sto usando la texture come Sprite 2D che ho offset per animarlo). Il risultato è piuttosto disastroso e sto ancora cercando di capire quanto sia grande il Mesh in modo che mostri solo un'istantanea dello Sprite. Tutti i miei tentativi sembrano solo ridimensionare la mesh e la Texture sottostante e mostrano ancora tutti gli sprite.

Qualcuno può indicarmi la giusta direzione? Grazie in anticipo.

...

Il mio amico si avvicinò con una soluzione ... ho perso la proprietà di ripetizione.

angelTexture = THREE.ImageUtils.loadTexture("images/textures/chars/angel/angel.png"); 
angelTexture.offset.x = -0.75; 
angelTexture.offset.y = -0.75; 

angelTexture.repeat.x = 0.25; 
angelTexture.repeat.y = 0.25; 
scene.add(angelMesh); 

Spero che questo aiuti gli altri ad avere lo stesso problema.

Answer 1

Ho avuto la stessa domanda un po 'di tempo fa, e quindi ho scritto un esempio completo di animazione usando un foglio di sprite come texture per un PlaneGeometry, e quindi aggiornando la trama a intervalli regolari - controlla l'esempio su

http://stemkoski.github.io/Three.js/Texture-Animation.html

e visualizzare il codice sorgente commentato per ulteriori spiegazioni.