Three.js使用2D纹理\ sprite进行动画制作(planeGeometry)

Question

我是html5和three.js的新手.我一直在试验它,基本上我想做的就是有一个Mesh(我正在使用planeGeometry,正如我后面的教程所使用的那样).网格显示不同的纹理,可以在以后更改.

这是我的代码的样子:

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

问题是每当我偏移时,Mesh看起来都足以显示所有其他Sprite(我将纹理用作2D Sprite,我将其偏移以对其进行动画处理).结果是非常灾难性的,我仍然在弄清楚如何控制Mesh的大小,以便它只显示Sprite的一个快照.我所有的尝试似乎只是调整网格和底层纹理的大小,仍然显示所有精灵.

有人能指出我正确的方向吗？提前致谢.

...

我的朋友提出了一个解决方案...我错过了重复属性.

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

希望这有助于其他人遇到同样的问题.

Answer 1

我刚才有同样的问题,所以我写了一个完整的动画示例,使用spritesheet作为PlaneGeometry的纹理,然后定期更新纹理 - 查看示例

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

并查看注释的源代码以获取其他说明.

Answer 2

我在给 Lee Stemkoski 的评论中指出，使用较新的THREE.TextureLoader().

我在测试中使用以下 4x4 精灵图像。

TextureAnimator假设您有完整的 16 个图块精灵表，则无需修改 Lee Stemkoski 的函数。

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

动画纹理向后运行。 Codepen 演示

所以我自己做了一个我称之为 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;
}

你需要知道的 imageURL是你的 spritesheet 的 URL framesX是多少个帧适合沿 x 轴（左和右） framesY是多少个帧适合沿 y 轴（上和下） delay是纹理等待多长时间更改到下一帧 _endFrame是可选的 - 有多少帧（如果它不使用整行）

一切看起来都是这样的

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

有很多的欣喜！！！ Codepen 演示在这里