foreach sur des Sprites

**tkigro** · 20/05/2022, 09h05

Bonjour,

Je code avec three.js mais je pense que ça na pas son importance dans mon probleme.
J'ai une classe nommé Scene ou je déclare une variable sprites comme ceci :

sprites = []
Dans cette même classe j'ai une methode destroy qui permet de retirer le sprite de la scene :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
Destroy() {
this.sprites.forEach((sprite) => {
                                this.scene.remove(sprite)
                    })
}

Plus loin dans mon code j'ai ma fonction init que contiens un tas de chose mais je voudrai pouvoir faire un foreach de sprites pour faire exactement la meme chose, voir appeler destroy dans la fonction init si possible.
donc :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

this.scene.remove(sprites.forEach(sprite))

un truc dans ce genre la
Mon problème est que la console me dit que sprites est pas défini et que destroy n'est pas une fonction.
ça fait deja quelque jour que je cherche, même en relisant mes cours je n'ai pas réussi.

Merci d'avance de votre aide !

**NoSmoking** · 20/05/2022, 10h52

Bonjour,
il te faut préciser le contexte, via this, pour utiliser les bons éléments.

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
20
21
const tableau = "12345".split("");
 
class MaClasse {
  constructor() {
    this.tableau = "ABCDE".split("");
  }
  voir(data) {
    data.forEach(d => console.log(d));
  }
  affiche() {
    // en précisant le contexte
    this.voir(this.tableau);
  }
  _affiche() {
    // sans précision du contexte de tableau
    this.voir(tableau);
  }
}
const m = new MaClasse();
m.affiche();  // affichera 'A', 'B', 'C', 'D' et 'E'
m._affiche(); // affichera '1', '2', '3', '4' et '5'

**Mat.M** · 20/05/2022, 11h05

bonjour oui il faudrait nous donner plus de code on ne sait pas comment est initialisée la classe sprite.
Après le message d'erreur est assez explicite

**tkigro** · 20/05/2022, 11h17

Bonjour,

Oui le message est très bien explicite, je ne sais juste pas comment régler se probleme.
Je vais essayer de vous fournir le max d'info alors.

Donc dans ma classe Scene je déclare mes variable, je créer mes scènes avec les texture ect.. avec THREE.js, j'ajoute mes point et j'ajoute mes sprites 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
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
class Scene {
 
            constructor(image, camera) {
                this.image = image
                this.points = []
                this.sprites = []
                this.scene = null
                this.camera = camera
            }
 
 
            createScene(scene) {
                this.scene = scene
                const geometry = new THREE.SphereGeometry(11, 32, 32)
                const texture = new THREE.TextureLoader().load(this.image)
                scene.background = null;
                texture.wrapS = THREE.RepeatWrapping
                texture.repeat.x = -1
                const material = new THREE.MeshBasicMaterial({
                    map: texture,
                    side: THREE.DoubleSide
                })
                material.transparent = true
                this.sphere = new THREE.Mesh(geometry, material)
                this.scene.add(this.sphere)
                this.points.forEach(this.addTooltip.bind(this))
            }
 
            addPoint(point) {
                this.points.push(point)
            }
 
            addTooltip(point) {
 
                var loader = new THREE.TextureLoader();
                let spriteMap = loader.load('../textures/' + point.image, (texture) => {
                    actionSprite = spriteMixer.ActionSprite(texture, 4, 6);
                    actionSprite.setFrame(0);
                    actions.runLeft = spriteMixer.Action(actionSprite, 0, 20, 50);
                    actions.runLeft.playLoop()
                    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));
                    sprite.scale.multiplyScalar(2)
                    this.scene.add(sprite);
                    this.sprites.push(sprite);
                    if (point.scene !== false) {
                        sprite.onClick = () => {
                            this.destroy();
                            point.scene.appear();
 
                        }
                    } else {
                        sprite.onClick = () => {
                        }
                    }
                }
                )
 
                var geometry = new THREE.CircleGeometry(3, 50);
                var material = new THREE.MeshBasicMaterial({
                    map: new THREE.TextureLoader().load('../ressources/insa.png')
                });
                var plane = new THREE.Mesh(geometry, material);
                plane.material.side = THREE.DoubleSide;
                scene.add(plane);
                plane.position.x = 0;
                plane.position.y = -6;
                plane.position.z = 0;
 
                plane.rotation.x = 30
                plane.rotation.y = 0
                plane.rotation.z = 4.5
            }
 
 
            destroy = function () {
                actions.runLeft.stop();
 
                this.sprites.forEach((sprite) => {
                    gsap.to(this.camera.position, {
                        x: -1,
                        y: 0,
                        z: 0,
                        duration: 1.5,
                        ease: "power4.inOut",
                        onComplete: () => {
                            this.sphere.remove(this.scene)
                        }
                    })
 
                    this.sprites.forEach((sprite) => {
                        TweenLite.to(sprite.scale, 1, {
                            x: 0,
                            y: 0,
                            z: 0,
                            onComplete: () => {
                                this.scene.remove(sprite)
                            }
                        })
                    })
                }
                )
            }
 
            appear() {
                this.sprites.forEach((sprite) => {
                    sprite.scale.set(0, 0, 0)
                    TweenLite.to(sprite.scale, 1, {
                        x: 1,
                        y: 3,
                        z: 3
                    })
                })
 
            }
        }

Ce qui m’intéresse c'est le destroy, qui est censé détruire tout mes sprites de ma scène actuel quand je change de scène, c'est a dire quand je clique sur un sprite, Donc de ce coté ça fonctionne.

Ce que j'essaie de faire est de créer une map, quand je clique sur un area, je veux qu'une fonction se déclenche et cet fonction contiens un changement de scène mais je veux aussi appelé destroy dans cet fonction ou juste faire disparaitre les sprite actuelle de la scène, comme au dessus. j'ai donc fait comme ça :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
neutre () {
                sPieceNeutre.createScene(scene)
                s.destroy()
                sPiece1960.destroy()
                sChaufferie.destroy()
                sCouloir.destroy()
                sPieceTravail.destroy()
            }

cette méthode est dans une fonction init

Le problème c'est que pour l’instant j'ai que 6 scènes mais que par la suite je pourrai en avoir 20 30 ou même 50 et donc j'aurai genre 50 lignes de +, ce n'est pas du tout propre.

J'ai donc essayer de faire un foreach comme ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
this.sprites.forEach((sprite) => {
                                this.scene.remove(sprite)
                    })
}

sauf que Sprites est pas défini dans la fonction actuel mais défini que dans la class Scene.

Sachant que sprite contiens tout mes points que je souhaite supprimer a chaque changement de scène.

J'aimerai donc pouvoir récupérer tout les valeur contenue dans le Tableau sprites qui est dans ma class Scene depuis ma fonction Init.

Je sais pas si j'ai été assez clair, désolé d'avance si je vous ai pas fourni assez d'information et merci de m'avoir répondu

**NoSmoking** · 20/05/2022, 14h10

Pas tout regardé en détails mais ...
Attention à la perte du contexte quand tu utilises une fonction asynchrone, ce qui est le cas de oncomplete.
Dans ce cas il faut conserver le contexte

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
  // préserve le contexte
  const thisObj = this;
 
  this.sprites.forEach((sprite) => {
    gsap.to(this.camera.position, {
      x: -1,
      y: 0,
      z: 0,
      duration: 1.5,
      ease: "power4.inOut",
      onComplete: () => {
        // ici le this n'est pas celui que l'on croit !!
        // this.sphere.remove(this.scene)
        thisObj.sphere.remove(thisObj.scene)
      }
    })
    // ...

Pourquoi mettre une forEach dans le forEach ?

**tkigro** · 20/05/2022, 14h19

Exacte j'ai fait une erreur sur le foreach mais le probleme ne viens pas de la.
Je pense ne pas avoir compris quand tu dit : ici le this n'est pas celui que l'on croit !!

Le this ne fait pas référence a Scene ?
Je pensais que ça revenais au meme que d'ecrire Scene.sprites = []

Je voudrai juste recupérer le this.sprites = [] defini dans la classe scene et l'utilisé dans ma fonction init()

**NoSmoking** · 21/05/2022, 15h51

Je pense ne pas avoir compris quand tu dit : ici le this n'est pas celui que l'on croit !!

Le this ne fait pas référence a Scene ?

place un console.log(this) dans ton code pour te rendre compte :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
onComplete: () => {
    // ici le this n'est pas celui que l'on croit !!
    console.log("this =", this);
    console.log("thisObj =", thisObj);
    // this.sphere.remove(this.scene)
    thisObj.sphere.remove(thisObj.scene)
}

Tu peux également lire la documentation : gsap.to() pour plus d'infos.

**tkigro** · 21/05/2022, 22h46

Bonjour,

Je ne suis actuellement pas sur mon lieux de stage donc je regarderai mardi mais en tout cas merci beaucoup de votre aide.

Je reviendrai poster un message Mardi pour vous donner une avancé de mon problème !

Bon WE a vous

**tkigro** · 24/05/2022, 08h08

Bonjour,

Je viens d'essayer le console.log et voici ce que la console me retourne :

this
Scene*{image: 'RDC/Entre.JPG', points:
Array(1), sprites: Array(1), addTooltip: ƒ, destroy: ƒ,*…}

Donc le this fait apparemment référence a sprite D’après le console.log

J'avoue que savoir ça m'aide pas vraiment..

Avez vous des idées ?

**NoSmoking** · 24/05/2022, 18h26

Donc le this fait apparemment référence a sprite D’après le console.log

visiblement je dirais plutôt à un objet Scene si je regarde comme cela :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
this
Scene * {
  image: 'RDC/Entre.JPG',
  points: Array(1),
  sprites: Array(1),
  addTooltip: ƒ,
  destroy: ƒ,
  *…
}

as-tu essayé avec console.log("thisObj =", thisObj) ?

J'avoue que savoir ça m'aide pas vraiment..

à savoir où te situes dans la « hiérarchie » de ton objet et donc de savoir ce que tu peux appliquer comme méthode.

**tkigro** · 24/05/2022, 20h51

Avec le : console.log("thisObj =", thisObj) la console me retourne une erreur,

Uncaught ReferenceError: thisObj is not defined.

Si jamais j'ai toujours une méthode qui permet de désactiver toute mes scene mais le problème c'est que ça me prend vachement de ligne dans le code alors qu'un simple foreach m'aurai permis de le faire en 2-3 lignes..

**NoSmoking** · 25/05/2022, 11h20

... la console me retourne une erreur,

as-tu affecté la variable thisObj comme je l'ai indiqué au post #5 ?

**tkigro** · 25/05/2022, 11h40

Oui oui, c'est pas comme ça qui fallait faire ?
J'ai essayer beaucoup d'autre méthode mais toujours aucun changement..

**NoSmoking** · 26/05/2022, 09h20

Je dois admettre que je me perds un peu dans ce que tu annonces et ai du mal à visualiser la structure finale de ta classe !

Problème de scope, de chainage car je lis dans ton code this.sphere.remove(this.scene) et d'un autre côté this.scene.add(this.sphere) qui est « enfant » de qui, qu'est remove et/ou add ?

Toujours est-il qu'il te faut impérativement savoir ce que vaut le this dans ta méthode onComplete pour pouvoir adresser les bons éléments.

Pour rappel, au cas où, Les fonctions fléchées n’ont pas de “this”, si besoin il est récupéré « plus haut ».

Un petit exercice pour voir cela el comportement avec ou sans.
Sur base du HTML suivant :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<div class="box yellow"></div>
<div class="box red"></div>
<div class="box blue"></div>
<div class="box green"></div>

en mettant une pincée de CSS pour voir les éléments :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
.box {
  width: 5em;
  height: 5em;
  margin: .25em;
}
.green  {background-color: #0C0;}
.red    {background-color: #C00;}
.blue   {background-color: #00C;}
.yellow {background-color: #CC0;}

Maintenant la class Anim pour le test :

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
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
class Anim {
  constructor(selector) {
    this.elements = document.querySelectorAll(selector);
  }
 
  reverse() {
    console.log("Test.reverse() : Méthode interne anti plante !!!");
  }
 
  play() {
    this.elements.forEach((elem) => {
      gsap.to(elem, {
        duration: 1,
        x: 100,
        rotation: 360,
        onComplete: function() {  // pas de notation arrow
          console.log(this);      // ici this vaut object Tween
          this.reverse();         // va exécuter Tween.reverse
        }
      })
    })
  }
 
  playArrow() {
    // forEach pas forcément obligatoire
    gsap.to(this.elements, {
      duration: 1,
      x: 100,
      rotation: 360,
      onComplete: () => {         // avec notation arrow
        console.log(this);        // ici this vaut object Test
        this.reverse();           // va exécuter Test.reverse
      }
    })
  }
}

il suffit de lancer au choix

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

new Anim(".box").play();       // affichera quelque chose comme <Anim {elements: NodeList(4)}>

ou

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

new Anim(".box").playArrow();  // affichera <Test.reverse() : Méthode interne anti plante !!!>

pour voir la différence dans la console.

Remarque : pour ceux qui veulent tester, il est nécessaire d'insérer à minima

Code htlm :

Sélectionner tout - Visualiser dans une fenêtre à part

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js"></script>

pour que l'exemple fonctionne, pourquoi faire simple !!

Il serait intéressant d'avoir un exemple complet, minimaliste et en ligne si possible, pour pouvoir tester en profondeur

**darkstar123456** · 30/05/2022, 11h12

Bonjour,

Je suis un peu perdu aussi dans le code
Je suis parti du résumé gentiment fourni par @NoSmoking pour créer un Codepen d'exemple
Voici l'URL : https://codepen.io/DarkStar123456/pe...g?editors=1111

J'ai juste ajouté 2 boutons pour exécuter les méthodes

foreach sur des Sprites

JavaScript

Discussions similaires

Partager

Partager