Utiliser un GIF avec three.js

Version imprimable

Bonjour,

Actuellement en stage, je doit réaliser une visite virtuelle d'un lieux. Aucun problème a ce niveau la mais je rencontre un petit problème (tout bête je suis sur).
J'utilise three.js, je créer donc une scène avec une flèche pour changer de scène quand je clique dessus, je me retrouve contraint a utilisé une image animé a la place d'une simple photo pour remplacer la fleche, j'ai pensé donc a utilisé un GIF, j'arrive sans problème a utilisé un gif en HTML mais je doit utilisé ce gif en Javascript. Quand j'utilise ce gif l'animation n'est pas gardé, je me retrouve donc seulement avec l'image mais sans animation.
J'ai essayé énormément de chose mais je n'ai pas trouvé, j'ai vu aussi qu'il etait possible de le faire avec une librairie JS mais je n'ai pas vraiment trouver le moyen de le faire, je pense devoir jouer avec un TextureLoader mais même problème je n'ai pas trouvé comment le faire.
Voici le code de ma flèche :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 addTooltip(point) { let spriteMap = new THREE.TextureLoader().load('../Icon/' + point.image) let spriteMaterial = new THREE.SpriteMaterial({ map: spriteMap }) let sprite = new THREE.Sprite(spriteMaterial) sprite.name = point.name sprite.position.copy(point.position.clone().normalize().multiplyScalar(10)) this.scene.add(sprite) this.sprites.push(sprite) if (point.scene !== false) { sprite.onClick = () => { this.destroy() point.scene.createScene(scene) point.scene.appear() } } }
Je récupère ma fèche comme ceci :
Code:

1 2 3 4 5 6 7 s.addPoint({ position: new THREE.Vector3(1.0042816818082683, -1.3491190568262212, 10.807929968636689), name: 'Hall', scene: sHall, image: 'fleche.png' })
Je précise que je ne veux pas utilisé le HTML pour récupérer le GIF car je pense que ce serai trop compliqué a utilisé vu le nombre de fois que j'utiliserai ce gif ( je me peu etre)

Je peu bien évidement utilisé du SVG ou du MP4, le format n'est pas important tant que l'image peu être animé indéfiniment

Merci d'avance de prendre de votre temps pour m'aider !

Update

Bonjour,

Bon je pense que je me suis mal exprimé au dessus donc je vais reformulé tout ça et apporté les modifications que j'ai fait.

Pour l'instant j'ai une sprite Animé grâce a spriteMixer, par contre, seul une sprite est animé alors que sur la même page j'ai 2 sprite (différent ou non).

Mon but est de réussir a animé autant de sprite que je veux.

Voici les bout de code utile a mon problème :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
 
addTooltip(point) {
				var loader = new THREE.TextureLoader();
				let spriteMap = loader.load('../public/textures/' + point.image , (texture) => {
					actionSprite = spriteMixer.ActionSprite(texture, 4, 6);
					actionSprite.setFrame(0);
					actions.runLeft = spriteMixer.Action(actionSprite, 1, 20, 30);
					actionSprite.scale.set(5, 3, 5);
					let spriteMaterial = new THREE.SpriteMaterial({
						map: spriteMap
					})
 
					let sprite = new THREE.Sprite(spriteMaterial)
 
					sprite.name = point.name;
					sprite.position.copy(point.position.clone().normalize().multiplyScalar(10));
					this.scene.add(sprite);
					this.sprites.push(sprite);
					if (point.scene !== false) {
						sprite.onClick = () => {
							this.destroy();
							point.scene.createScene(scene);
							point.scene.appear();
						}
					}
				}
				)
			}

Code:

1
2
3
4
5
6
 
function animate() {
				requestAnimationFrame(animate)
				renderer.render(scene, camera)
				controls.update();
			}

Code:

1
2
3
4
5
 
	spriteMixer = SpriteMixer();
			spriteMixer.addEventListener('loop', (e)=> {
				console.log(e)
			})

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
function loop() {
			requestAnimationFrame(loop);
			renderer.render(scene, camera);
 
			delta = clock.getDelta();
			spriteMixer.update(delta);
 
			if (running == 'right') {
				actionSprite.position.x += 0.05;
			} else if (running == 'left') {
				actionSprite.position.x -= 0.05;
			};
		};

Voila, si quelqu'un arriverai a regler mon problème, il me sauverai la vie ! Merci d'avance et bonne journée !

26/04/2022, 10h54
mathieu

je pense qu'on pourrait mieux vous aider si on avait un exemple complet à tester.
vous pouvez par exemple faire cet exemple de test sur ce site :
https://codesandbox.io/s/vanilla
26/04/2022, 11h04
tkigro

Résolu

Je viens tout juste de régler mon problème mais merci beaucoup d'avoir répondu !
Il fallait juste déplacer un bout de code qui n'avais rien a faire a la fin du programme ^^
Désolé du dérangement.