Three.js à l'Aide de texture 2D\sprite pour l'animation (planeGeometry)

Je suis assez nouveau en html5 et three.js. J'ai expérimenté un peu avec elle, et, fondamentalement, ce que je veux faire est d'avoir une Maille (je suis en utilisant planeGeometry, comme le tutoriel, j'ai suivi utilisé). Le Maillage montre de Textures différentes, qui peuvent changer plus tard.

Voici ce que mon code ressemble à ceci:

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

Le problème est qu'à chaque fois que je compense, le Maillage semble assez grand pour montrer à tous les autres Sprites (je suis en utilisant la texture en 2D Sprite que je compense pour l'animer). Le résultat est assez catastrophique et je suis encore à essayer de comprendre comment contrôler la taille de la Maille est de sorte qu'il n'en montre qu'un instantané de l'image-objet. Toutes mes tentatives semblent seulement pour redimensionner la Maille ainsi que le sous-jacent de la Texture et de la affiche toujours tous les Sprites.

Quelqu'un peut me pointer dans la bonne direction? Merci à l'avance.

...

Mon ami est venu avec une solution...
J'ai raté la propriété répéter.

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

Espère que cela aide les autres à avoir le même problème.

Mon ami est venu avec une solution... j'ai raté la propriété répéter. Voir ci-dessus modifier pour l'explication

OriginalL'auteur Spolarium7 | 2013-04-16

19

J'ai eu la même question il y a longtemps, et j'ai donc rédigé un exemple complet de l'animation à l'aide d'un spritesheet comme texture pour un PlaneGeometry, puis la mise à jour de la texture à intervalles réguliers -- découvrez l'exemple à

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

et afficher le commentaire le code source pour plus d'explication.

Merci! C'est joliment fait. Amusez-vous bien!
Ce code a une faille. Je ne sais pas quand la faille a commencé, mais la texture est affiché dans le coin inférieur gauche de l'avion, et le code qui est censé pour vous permettre de contrôler le décalage en Y ne pas faire son travail. Je travaille pour mieux comprendre le problème et répondre une fois que je l'ai trouver.

OriginalL'auteur Lee Stemkoski

Je l'ai noté dans mon commentaire de Lee Stemkoski que spritesheets qui ont plus d'une ligne ne fonctionnent pas de la même lors de l'utilisation de la plus récente THREE.TextureLoader().

Je suis l'aide de la suite de 4x4 image sprite dans mes tests.

$Three.js à l'Aide de texture 2D\sprite pour l'animation (planeGeometry)$

Avec aucune modification Lee Stemkoski de TextureAnimator fonction, en supposant que vous avez un de 16 tuiles spritesheet.

var texture = new THREE.TextureLoader().load('grid-sprite.jpg');
var annie = new TextureAnimator(texture, 4, 4, 16, 150);

La texture animée fonctionne à l'envers.
Codepen Démo

$Three.js à l'Aide de texture 2D\sprite pour l'animation (planeGeometry)$

J'ai donc fait mon propre que j'appelle THREE.SpriteSheetTexture

THREE.SpriteSheetTexture = function(imageURL, framesX, framesY, frameDelay, _endFrame) {

    var timer, frameWidth, frameHeight,
            x = 0, y = 0, count = 0, startFrame = 0, 
            endFrame = _endFrame || framesX * framesY,
            CORSProxy = 'https://cors-anywhere.herokuapp.com/',
            canvas = document.createElement('canvas'),
            ctx = canvas.getContext('2d'),
            canvasTexture = new THREE.CanvasTexture(canvas),
            img = new Image();

    img.crossOrigin = "Anonymous"
    img.onload = function(){
        canvas.width = frameWidth = img.width / framesX;
        canvas.height = frameHeight = img.height / framesY;
        timer = setInterval(nextFrame, frameDelay);
    }
    img.src = CORSProxy + imageURL;

    function nextFrame() {
        count++;

        if(count >= endFrame ) {
            count = 0;
        };

        x = (count % framesX) * frameWidth;
        y = ((count / framesX)|0) * frameHeight;

        ctx.clearRect(0, 0, frameWidth, frameHeight);
        ctx.drawImage(img, x, y, frameWidth, frameHeight, 0, 0, frameWidth, frameHeight);

        canvasTexture.needsUpdate = true;
    }

    return canvasTexture;
}

Et ce que vous devez savoir à ce sujet
imageURL est l'URL de votre spritesheet
framesX est le nombre d'images à adapter le long de l'axe des x (gauche et droite)
framesY est le nombre d'images à adapter le long de l'axe y (haut et bas)
delay est combien de temps il la texture attend pour changer l'image suivante
_endFrame est facultatif - Combien de cadres sont là (dans le cas où elle ne marche pas, utilisez une ligne complète)

Que tout ressemble à quelque chose comme ceci

texture = new THREE.SpriteSheetTexture('https://s3-us-west-2.amazonaws.com/s.cdpn.io/68819/grid-sprite.jpg', 4, 4, 100, 16);
var material = new THREE.MeshBasicMaterial({ 
    map: texture
});
geometry = new THREE.BoxGeometry( 200, 200, 200 );
mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );

Et il y avait beaucoup de joie!!!
Codepen Démo Ici

OriginalL'auteur Cmndo

Vous devez vous connecter pour publier un commentaire.