ThoSzy

I've got a function that create mesh when you click on another. On the click, 2 or 3 mesh are created and go to their positions. Know i would like to do the reverse function : when the mesh are deployed, and you click anoter time on the mesh, the previously created mesh go back and are removed from the scene.

Here is my first function :

function sortiSphere(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.définition;
    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);
    lesMesh.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;

};

Notice that the mesh contain a information about their state : userData.bool (true if deployed, false if not)

Now, how do I tell them to go back ?

Here is what I got for now :

    function deleteSphere(element, obj) {
    console.log("--- deleteSphere / debut fonction")



    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)
        }
    }
};

Thanks for your time

Hello, I try to place meshs on sphere depending on their rank in a json file.

I am looking for a way to define the position of my meshs in my loop in order to prevent them to be created on each other.

    function onMouseGauche(event) {

        event = event || window.event;
        if (event.button == 0) {
            mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
            mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;

            // update the picking ray with the camera and mouse position
            raycaster.setFromCamera(mouse, camera);
            // calculate objects intersecting the picking ray

            var intersects = 0;
            intersects = raycaster.intersectObjects(scene.children);

            if (intersects.length > 0) {


                if (intersects[0].object.userData.bool != true) {
                    //                    Scalar = Scalar + 400;
                    Scalar = Scalar / 1;
                    Scale = Scale / 1;
                    console.log(intersects[0].object.userData)

                    if (intersects[0].object.userData.children) {

                        var loop = 0;

                        intersects[0].object.userData.children.forEach(function(element) {

                            var sphereMaterial2 = new THREE.MeshBasicMaterial({
                                color: element.group
                            });

                            var mesh = new THREE.Mesh(sphereGeometry, sphereMaterial2);
                            var phi = ( 2 * Math.PI)
                            var theta = (2 * Math.PI)

                            var x = Math.random() * 2 - 1;
                            var y = Math.random() * 2 - 1;
                            var z = Math.random() * 2 - 1;

//                            if (loop == 0) {
//                                var x = Math.random() * 2 - 1;
//                                var y = Math.cos(theta) * Math.random();
//                                var z = Math.cos(phi) * Math.random()
//                            }
//                            if (loop == 1) {
//                                var x = Math.cos(phi) * Math.random();
//                                var y = Math.random() * 2 - 1;
//                                var z = Math.cos(theta) * Math.random()
//                            }
//                            if (loop == 2) {
//                                var x = Math.tan(phi) * Math.random();
//                                var y = Math.tan(theta) * Math.random();
//                                var z = Math.random() * 2 - 1
//                            }
                            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.position.normalize();
                            mesh.position.multiplyScalar(Scalar / element.rang);
                            mesh.scale.set(Scale / element.rang, Scale / element.rang, Scale / element.rang)

                            mesh.position.x = mesh.position.x + intersects[0].object.position.x;
                            mesh.position.y = mesh.position.y + intersects[0].object.position.y;
                            mesh.position.z = mesh.position.z + intersects[0].object.position.z;

                            console.log(element)



                            scene.add(mesh);



                            // lines
                            var material = new THREE.LineBasicMaterial({
                                color: 0xffffff
                            });

                            var geometry = new THREE.Geometry();
                            geometry.vertices.push(
                                intersects[0].object.position,
                                mesh.position
                            );

                            var line = new THREE.Line(geometry, material);
                            scene.add(line);

                            intersects[0].object.userData.bool = true;
                            loop = loop + 1
                        });

                    }

                }

            }
        }
        // ajouter position de caméra actuelle
        camera.userData.push([Math.round(camera.position.x), Math.round(camera.position.y), Math.round(camera.position.z)])
    }

 Here is the function that draw the sphere meshs.

How can i define my coordinates more efficiently?

Thank you