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 :
Je récupère ma fèche comme ceci :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
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 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)
Code : Sélectionner tout - Visualiser dans une fenêtre à part
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 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 !
Partager