Three.js Using 2D texture \ sprite for animation (planeGeometry)

Question

I am new to html5 and three.js. I experimented a bit with this, and basically what I want to do is have Mesh (I use planeGeometry since the tutorial I used used). Mesh displays various textures that may subsequently change.

This is what my code looks like:

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

The problem is that whenever I move, the Mesh seems large enough to show all the other sprites (I use the texture as a 2D sprite, which I compensated to animate it). The result is pretty disastrous, and I'm still figuring out how to control how big Mesh is so that it shows only one Sprite shot. All my attempts seem to only resize the mesh as well as the underlying texture and still show all the sprites.

Can someone point me in the right direction? Thanks in advance.

...

My friend came up with a solution ... I missed the replay property.

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

Hope this helps others having the same issue.

Answer 1

I had the same question a while ago, and so I wrote a complete animation example using a sprite as a texture for PlaneGeometry, and then to update the texture at regular intervals - see the example in

http://stemkoski.imtqy.com/Three.js/Texture-Animation.html

and review the comment source code for an additional explanation.

Answer 2

In my commentary on Lee Stemkoski, I noted that sprite sheets containing more than one row do not work the same when using the newer THREE.TextureLoader() .

I use the following 4x4 sprite image in my tests.

Without changing Lee Stemkoski's TextureAnimator , TextureAnimator , provided that you have a complete sprite table of 16 tiles.

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

Animated texture works in the opposite direction. Codepen demo

So I made my own, which I call 🎉🎉🎉 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; } 

And what you need to know about this imageURL is the URL of your spritesheet framesX , how many frames fit along the x-axis (left and right) framesY , how many frames fit along the y-axis (up and down) delay , how long the texture expects to move to the next frame . _endFrame is optional. - How many frames exist (if the full line is not used)

It all looks something like this

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

And there was a lot of joy !!! Codepen Demo Here