Discussion :

[tkigro]

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]

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]

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]

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]

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]

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()