# Texture Position?

**URL:** <https://discourse.threejs.org/t/texture-position/8681>\
**Category:** Questions\
**Tags:** textures\
**Created:** [July 24, 2019, 11:52pm UTC](https://discourse.threejs.org/t/texture-position/8681 "2019-07-24T23:52:08Z")\
**Posts on this page:** 18\
**Page:** 1

<div class="post-metadata">

**Author:** ![Aerion](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/aerion/32/6633_2.png) [@Aerion](https://discourse.threejs.org/u/Aerion)\
**Post date:** [July 24, 2019, 11:52pm UTC](https://discourse.threejs.org/t/texture-position/8681/1 "2019-07-24T23:52:08Z")

</div>

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/](http://babylontesting.epizy.com/Three.js/three-SpriteMixer/)

The link to SpriteMixer.js is:

[http://babylontesting.epizy.com/Three.js/three-SpriteMixer/SpriteMixer.js](http://babylontesting.epizy.com/Three.js/three-SpriteMixer/SpriteMixer.js)

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [July 25, 2019, 9:05am UTC](https://discourse.threejs.org/t/texture-position/8681/2 "2019-07-25T09:05:48Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![Aerion](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/aerion/32/6633_2.png) [@Aerion](https://discourse.threejs.org/u/Aerion)\
**Post date:** [July 25, 2019, 4:10pm UTC](https://discourse.threejs.org/t/texture-position/8681/3 "2019-07-25T16:10:10Z")

</div>

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! 🙂

---

<div class="post-metadata">

**Author:** ![marquizzo](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/marquizzo/32/25192_2.png) [@marquizzo](https://discourse.threejs.org/u/marquizzo)\
**Post date:** [July 25, 2019, 9:04pm UTC](https://discourse.threejs.org/t/texture-position/8681/4 "2019-07-25T21:04:26Z")

</div>

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](https://threejs.org/docs/#api/en/textures/Texture.offset) For instance, You can set a texture.repeat to `(0.5, 0.5)` to divide it into 4 quadrants:

```auto
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.

---

<div class="post-metadata">

**Author:** ![Aerion](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/aerion/32/6633_2.png) [@Aerion](https://discourse.threejs.org/u/Aerion)\
**Post date:** [July 25, 2019, 9:07pm UTC](https://discourse.threejs.org/t/texture-position/8681/5 "2019-07-25T21:07:35Z")

</div>

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! 🙂

---

<div class="post-metadata">

**Author:** ![Aerion](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/aerion/32/6633_2.png) [@Aerion](https://discourse.threejs.org/u/Aerion)\
**Post date:** [July 26, 2019, 12:33pm UTC](https://discourse.threejs.org/t/texture-position/8681/6 "2019-07-26T12:33:55Z")

</div>

I did explain clear enough?

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [July 26, 2019, 6:05pm UTC](https://discourse.threejs.org/t/texture-position/8681/7 "2019-07-26T18:05:42Z")

</div>

Are you looking for something similar to this? [https://stemkoski.github.io/Three.js/Texture-Animation.html](https://stemkoski.github.io/Three.js/Texture-Animation.html)

---

<div class="post-metadata">

**Author:** ![Aerion](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/aerion/32/6633_2.png) [@Aerion](https://discourse.threejs.org/u/Aerion)\
**Post date:** [July 26, 2019, 11:14pm UTC](https://discourse.threejs.org/t/texture-position/8681/8 "2019-07-26T23:14:11Z")

</div>

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/](http://babylontesting.epizy.com/Three.js/three-SpriteMixer/)

The link to SpriteMixer.js is:

[http://babylontesting.epizy.com/Three.js/three-SpriteMixer/SpriteMixer.js](http://babylontesting.epizy.com/Three.js/three-SpriteMixer/SpriteMixer.js)

---

<div class="post-metadata">

**Author:** ![Aerion](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/aerion/32/6633_2.png) [@Aerion](https://discourse.threejs.org/u/Aerion)\
**Post date:** [July 27, 2019, 3:02pm UTC](https://discourse.threejs.org/t/texture-position/8681/9 "2019-07-27T15:02:43Z")

</div>

Did I explain well enough this time?

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [July 27, 2019, 9:44pm UTC](https://discourse.threejs.org/t/texture-position/8681/10 "2019-07-27T21:44:49Z")

</div>

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:

```auto
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 )`.

---

<div class="post-metadata">

**Author:** ![Aerion](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/aerion/32/6633_2.png) [@Aerion](https://discourse.threejs.org/u/Aerion)\
**Post date:** [July 27, 2019, 10:42pm UTC](https://discourse.threejs.org/t/texture-position/8681/11 "2019-07-27T22:42:10Z")

</div>

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/](http://babylontesting.epizy.com/Three.js/three-SpriteMixer/)

The link to SpriteMixer.js is:

[http://babylontesting.epizy.com/Three.js/three-SpriteMixer/SpriteMixer.js](http://babylontesting.epizy.com/Three.js/three-SpriteMixer/SpriteMixer.js)

* * *

---

<div class="post-metadata">

**Author:** ![Aerion](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/aerion/32/6633_2.png) [@Aerion](https://discourse.threejs.org/u/Aerion)\
**Post date:** [July 28, 2019, 2:31pm UTC](https://discourse.threejs.org/t/texture-position/8681/12 "2019-07-28T14:31:50Z")

</div>

I did explain well enough?

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [July 28, 2019, 2:47pm UTC](https://discourse.threejs.org/t/texture-position/8681/13 "2019-07-28T14:47:52Z")

</div>

> [@Aerion](#):
>
> spriteMixer.showAnimation ( 1 );

In the `SpriteMixer.js` it should be something like that:

```javascript
function showAnimation( anmatnIdx ) {
    for (let i = 0; i < actionSprites.length; i++) {
	actionSprites.visible = i === anmatnIdx;
    }
}

```

---

<div class="post-metadata">

**Author:** ![Aerion](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/aerion/32/6633_2.png) [@Aerion](https://discourse.threejs.org/u/Aerion)\
**Post date:** [July 28, 2019, 4:25pm UTC](https://discourse.threejs.org/t/texture-position/8681/14 "2019-07-28T16:25:51Z")

</div>

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/](http://babylontesting.epizy.com/Three.js/three-SpriteMixer/)

The link to SpriteMixer.js is:

[http://babylontesting.epizy.com/Three.js/three-SpriteMixer/SpriteMixer.js](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;
			}
		}
	}
}

```

* * *

---

<div class="post-metadata">

**Author:** ![Aerion](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/aerion/32/6633_2.png) [@Aerion](https://discourse.threejs.org/u/Aerion)\
**Post date:** [July 29, 2019, 4:34pm UTC](https://discourse.threejs.org/t/texture-position/8681/15 "2019-07-29T16:34:12Z")

</div>

Do I need explain more?

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [July 29, 2019, 5:17pm UTC](https://discourse.threejs.org/t/texture-position/8681/16 "2019-07-29T17:17:27Z")

</div>

@Aerion Please try to avoid such posts. If nobody answers to your question, it should be obvious for you that it needs clarification…

---

<div class="post-metadata">

**Author:** ![Aerion](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/aerion/32/6633_2.png) [@Aerion](https://discourse.threejs.org/u/Aerion)\
**Post date:** [July 29, 2019, 5:52pm UTC](https://discourse.threejs.org/t/texture-position/8681/17 "2019-07-29T17:52:13Z")

</div>

@Mugen87 I do not understand. I thought I explain well enough…

---

<div class="post-metadata">

**Author:** ![Aerion](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/aerion/32/6633_2.png) [@Aerion](https://discourse.threejs.org/u/Aerion)\
**Post date:** [July 29, 2019, 7:18pm UTC](https://discourse.threejs.org/t/texture-position/8681/18 "2019-07-29T19:18:00Z")

</div>

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.