So I’m trying to make my Textures flip between 2 different Textures. Basically what I want to do is flip between these 2 animations or more just as long as they are loaded in to begin with so that it looks like one or 2 different animations all at the same time such as walking THEN attacking with a sword.
Here is the link:
http://babylontesting.epizy.com/Three.js/three-SpriteMixer/
The link to SpriteMixer.js is:
http://babylontesting.epizy.com/Three.js/three-SpriteMixer/SpriteMixer.js
Sorry, but your question seems a bit unclear. Can you please describe in more detail your desired behavior?
I’m afraid it’s also not clear why you have shared both links. What should they demonstrate?
I have shared both links to demonstrate the example.so basically what should happen is the 2 ( or more ) animations should be able to flip with each other so it say switches from a walking animation for example, to an attacking animation,then to an idle animation ( for now, that would be the sword in the air ), basically it should be able to flip through multiple animations. i hope i explained clear enough. if not, please do let me know & i will do my best to go into more detail! 
If you want to use Three.js out of the box, without any 3rd-party plugins, you can use the texture’s .repeat and .offset properties For instance, You can set a texture.repeat to (0.5, 0.5) to divide it into 4 quadrants:
0 | 1
---------
2 | 3
Then if you want to look at quadrant 0, you can set texture.offset to (0.0, 0.0). Quadrant 1 would be (0.5, 0.0), etc. You could use smaller values into texture.repeat if you want to fit in more subdivisions into the texture.
Thank you, but that is not what I asked. I do not mean to sound rude, I apologize if I do, but I don’t think I explained clear enough. Which is ok. Basically I want to use preloaded animation planes then swap between them. If I did not explain this well enough, please let me know & I will try to explain better!
I did explain clear enough?
Are you looking for something similar to this? https://stemkoski.github.io/Three.js/Texture-Animation.html
Hi @prisoner849! No, basically I want 1 animation to be visible & the other is invisible until I call it with an index number, starting at 0.
So for example, index [ 0 ] = link_walk ( Link’s walk animation ), index [ 1 ] = link_airsword ( Link’s Sword in the air animation { which currently only has 1 frame for testing purposes } ), I will be adding another animation in soon, so index [ 2 ] = link_otherAnimation, if 0 is chosen, it ONLY shows the walking animation, if 1 is chosen, it ONLY shows the Sword in the Air animation, if 2 is chosen, it ONLY shows the other Animation, then goes back to the previous animation. so i walk, then go into idle. i attack, i go back into idle. etc.
The index number is chosen by the user when calling the SwitchAnimation ( ) function.
The total amount of animations is how many animation planes are pushed into the Array & can be utilized in the for loop like so :
for ( this.__i = 0; this.__i < link_Animation.length; this.__i++ } { ... }
I have updated the demo to reflect this.
Here is the link:
http://babylontesting.epizy.com/Three.js/three-SpriteMixer/
The link to SpriteMixer.js is:
http://babylontesting.epizy.com/Three.js/three-SpriteMixer/SpriteMixer.js
Did I explain well enough this time?
As you can see in the source code of SpriteMixer.js, each “action sprite” is just a plane of THREE.PlaneGeometry() and THREE.MeshBasicMaterial() with a texture.
All those action sprites are stored in spriteMixer.actionSprites, having this, you can set .visible property of the sprite with desired animation to true and all the others to false.
Something like:
function showAnimation( anmatnIdx ) {
for (let i = 0; i < spriteMixer.actionSprites.length; i++) {
spriteMixer.actionSprites.visible = i === anmatnIdx;
}
}
Thus, if you want to play animation with index of 2, then call showAnimation( 2 ).
Hi @prisoner849! Now THAT looks like a SWEET function! Thank you! Only problem I’m having is calling it. For some reason, it’s saying that it’s not a function even though I have added the function to SpriteMixer.js.
Once again, I have updated the demo to add your function to it.
Here is how I called it :
function onDocumentKeyDown(event)
{
var keyCode = event.which;
if (keyCode == 87) { camera.translateZ(-zSpeed); }
if (keyCode === 83) { camera.translateZ(zSpeed); }
if (keyCode === 65) { camera.rotation.y += ySpeed; }
if (keyCode === 68) { camera.rotation.y -= ySpeed; }
if (keyCode === 32)
{
spriteMixer.showAnimation ( 1 );
}
}
Here is the link:
http://babylontesting.epizy.com/Three.js/three-SpriteMixer/
The link to SpriteMixer.js is:
http://babylontesting.epizy.com/Three.js/three-SpriteMixer/SpriteMixer.js
I did explain well enough?
In the SpriteMixer.js it should be something like that:
function showAnimation( anmatnIdx ) {
for (let i = 0; i < actionSprites.length; i++) {
actionSprites.visible = i === anmatnIdx;
}
}
The function isn’t working. It’s not doing anything… Also, I tried to add a function called '__animationHasEnded ( )', but it didn’t work.
What I try to do here is wait for the current animation to end, then allow for the switch to the chosen animation, in this case, that would be 'anmatnIdx'.
Here is the link:
http://babylontesting.epizy.com/Three.js/three-SpriteMixer/
The link to SpriteMixer.js is:
http://babylontesting.epizy.com/Three.js/three-SpriteMixer/SpriteMixer.js
Inside 'SpriteMixer.js' :
function __animationHasEnded ( actionSprite )
{
return actionSprite.currentTile === actionSprite.numberOfTiles - 1;
}
Inside 'index.html' :
function showAnimation( anmatnIdx ) {
for (let i = 0; i < spriteMixer.actionSprites.length; i++) {
this.__hasEnded = ( spriteMixer.actionSprites [ i ].__animationHasEnded ( spriteMixer.actionSprites ) );
if ( this.__hasEnded )
{
if ( i === anmatnIdx ) {
spriteMixer.actionSprites [ i ].visible = true;
spriteMixer.actionSprites [ i - 1 ].visible = false;
}
}
}
}
Do I need explain more?
@Aerion Please try to avoid such posts. If nobody answers to your question, it should be obvious for you that it needs clarification…
@Mugen87 I do not understand. I thought I explain well enough…
Ok, let try this again. So basically I have the function being called with space key. When I press space key, it should flip from default animation to selected animation, wait til’ end of animation then switch back to 1st animation.
I hope I explain well enough this time.
Please let me know if you need explain more.