I have a function that creates mesh when you click on another. Upon clicking, 2 or 3 meshes are created and move to their positions. Now, I want to implement the reverse function: when the meshes are deployed and you click on them again, the previously created meshes should move back and be removed from the scene.
Below is my initial function:
function deploySphere(element, obj) {
var matStdParams = {
roughness: 1,
metalness: 0.8,
color: element.group,
emissive: element.group,
emissiveIntensity: 0.5
};
var sphereMaterial2 = new THREE.MeshStandardMaterial(matStdParams);
var mesh = new THREE.Mesh(sphereGeometry, sphereMaterial2);
mesh.position.x = x;
mesh.position.y = y;
mesh.position.z = z;
mesh.userData.children = element.children;
mesh.userData.name = element.label;
mesh.userData.rang = element.rang;
mesh.userData.def = element.definition;
mesh.userData.posx = element.posx;
mesh.userData.posy = element.posy;
mesh.userData.posz = element.posz;
mesh.userData.parent = obj;
mesh.userData.cartabs = element.cartabs;
mesh.position.normalize();
mesh.position.multiplyScalar(1 / element.rang);
mesh.scale.set(1 / (element.rang / 2), 1 / (element.rang / 2), 1 / (element.rang / 2))
mesh.position.x = obj.position.x;
mesh.position.y = obj.position.y;
mesh.position.z = obj.position.z;
var x = element.posx;
var y = element.posy;
var z = element.posz;
new TWEEN.Tween(mesh.position).to({
x: x,
y: y,
z: z
}, 1000)
.easing(TWEEN.Easing.Elastic.Out).start();
console.log(mesh);
scene.add(mesh);
deployedMeshes.push(mesh)
// lines
var material = new THREE.LineBasicMaterial({
color: 0xffffff
});
var geometry = new THREE.Geometry();
geometry.vertices.push(
obj.position,
new THREE.Vector3(x, y, z)
);
var line = new THREE.Line(geometry, material);
scene.add(line);
gen1 = [];
gen2 = [];
gen3 = [];
gen4 = [];
gen5 = [];
obj.userData.bool = true;
};
It's important to note that each mesh contains information about its state: userData.bool (true if deployed, false if not).
Now, how can I make them move back?
Here is my current attempt:
function removeSphere(element, obj) {
console.log("--- removeSphere / starting function")
for (i = 0; gen1.length > i; i++) {
if (gen1[i].userData.children) {
for (j = 0; gen1[i].userData.children.length > j; j++) {
console.log(gen2[i][j]);
scene.remove(gen2[i][j]);}
} else {
scene.remove(gen1[i])
console.log(gen1[i].userData.children)
}
}
};
Thank you for your time.