Three.js Mithilfe von 2D-texture\sprite-animation (planeGeometry)

Ich bin ganz neu in html5 und three.js. Ich habe experimentiert ein bisschen mit ihm, und im Grunde, was ich tun wollen ist zu haben ein Gitter (ich bin mit planeGeometry, als das tutorial, ich folgte es verwendet). Das Netz zeigt verschiedene Texturen, das kann sich später noch ändern.

Hier ist, was mein code sieht wie folgt aus:

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

Das problem ist, dass wenn ich ausgeglichen, die Masche scheint groß genug zu zeigen, alle anderen Sprites (ich verwende die textur als 2D-Sprite, dass ich Ausgleich zu animieren). Das Ergebnis ist ziemlich katastrophal und ich bin immer noch herauszufinden, wie man Steuern, wie groß das Netz ist, so dass es zeigt nur eine Momentaufnahme des Sprites. Alle meine versuche scheinen nur, um die Größe der Maschen sowie die zugrunde liegende Textur und zeigt immer noch alle Sprites.

Kann mir jemand zeigen in die richtige Richtung? Vielen Dank im Voraus.

...

Mein Freund kam mit einer Lösung...
Ich habe die repeat-Eigenschaft.

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

Hoffe, das hilft anderen mit dem gleichen problem.

  • Mein Freund kam mit einer Lösung... ich habe die repeat-Eigenschaft. Siehe oben für die Erklärung Bearbeiten
InformationsquelleAutor Spolarium7 | 2013-04-16
  1. 19

    Ich hatte die gleiche Frage vor einer Weile, und so habe ich geschrieben, ein vollständiges Beispiel zu animieren, mit einem spritesheet als textur für ein PlaneGeometry, und dann aktualisieren Sie die textur in regelmäßigen Abständen -- überprüfen Sie heraus das Beispiel bei

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

    und anzeigen der kommentierte source-code für die zusätzliche Erklärung.

    • Danke! Schön gemacht. Happy coding!
    • Dieser code hat einen Fehler. Ich weiß nicht, Wann der Fehler begann, aber die textur gerendert wird an der unteren linken Ecke der Ebene, und der code soll, können Sie Steuern, das Y-offset nicht seine Aufgabe. Ich arbeite daran, das problem zu verstehen, besser und werde Antworten, sobald ich es herausfinden.
    InformationsquelleAutor Lee Stemkoski
  2. 1

    Habe ich festgestellt, in meinem Kommentar zu Lee Stemkoski, dass spritesheets, die mehr als eine Zeile funktionieren nicht, das gleiche bei Verwendung der neueren THREE.TextureLoader().

    Ich bin mit dem folgenden 4x4-sprite in meinen tests.

    Three.js Mithilfe von 2D-texture\sprite-animation (planeGeometry)

    Ohne änderung Lee Stemkoski ist TextureAnimator Funktion, vorausgesetzt, Sie haben eine 16-Kachel spritesheet.

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

    Die animierte textur rückwärts läuft.
    Codepen-Demo

    Three.js Mithilfe von 2D-texture\sprite-animation (planeGeometry)

    So, ich habe meine eigenen, die ich nennen ??? 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;
}

    - Und was Sie darüber wissen müssen
    imageURL ist die URL Ihrer spritesheet
    framesX ist, wie viele Bilder passen entlang der x-Achse (Links und rechts)
    framesY ist, wie viele Bilder passen entlang der y-Achse (oben und unten)
    delay ist, wie lange es die textur wartet, um zum nächsten frame
    _endFrame ist optional - Wie viele Bilder sind es (im Fall es nicht verwenden eine volle Zeile)

    Dass alles so aussieht

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

    Und es gab viel Jubel!!!
    Codepen-Demo Hier

    InformationsquelleAutor Cmndo
Schreibe einen Kommentar