メッシュ除去の逆関数を書く

Question

メッシュを作成する関数があります。クリックすると、2または3メッシュが作成され、その位置に移動します。メッシュの展開時に、メッシュ上のアノータ時間をクリックすると、以前に作成されたメッシュが元に戻り、シーンから削除されます。ここで

は私の第一の機能である：メッシュが自分の状態に関する情報が含まれていることを

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; 

}; 

お知らせ：userData.bool（真実ではない場合は展開し、偽の場合）今

、どのように私が言うん彼らは戻ってくる？ここで

私は今のところ得たものです：あなたがtween.jsを使用する場合はお時間を

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

おかげ

Answer 1

は、あなたはその.onUpdate()と.onComplete()メソッドを使用することができます。

これは究極の解決策ではありませんが、これは一例です。

のが私たちの基本オブジェクトのコンテナを持ってみましょう：

btnAdd.addEventListener("click", setBase); 

：

var bases = new THREE.Group(); 
scene.add(bases); 

は今、我々はそれがボタンをクリックすること聞かせて、私たちは私たちの基本オブジェクトを作成しますイベントを必要とします

var rndBase = function() { 
    return THREE.Math.randFloatSpread(10); 
} 

function setBase() { 
    var base = new THREE.Mesh(new THREE.SphereGeometry(.5, 8, 4), new THREE.MeshBasicMaterial({ 
    color: Math.random() * 0xffffff 
    })); 
    base.position.set(rndBase(), rndBase(), rndBase()); 
    bases.add(base); 
} 

すべての準備ができて、私たちはC：と私たちのsetBase()機能は次のようになります。基本オブジェクトをクリックすることから始めます。 mousedownのイベントリスナーにする：

window.addEventListener("mousedown", setOrRemove, false); 

var raycaster = new THREE.Raycaster(); 
var mouse = new THREE.Vector2(); 
var intersects; 
var obj; 

function setOrRemove(event) { 
    mouse.x = (event.clientX/window.innerWidth) * 2 - 1; 
    mouse.y = -(event.clientY/window.innerHeight) * 2 + 1; 
    raycaster.setFromCamera(mouse, camera); 
    intersects = raycaster.intersectObjects(bases.children); 
    if (intersects.length > 0) { 
    obj = intersects[0].object; 
    if (obj.children.length != 0) { // simple check for existence of children 
     removeObj(obj); // if children were deployed, then remove them and their parent (base object) 
    } else { 
     setChildren(obj); // otherwise, as a base object has no children, then we'll add some 
    } 
    } 
} 

最も面白いのはここから始まります。

のは、子供たちを設定してみましょう：

function setChildren(parent) { 
    let radius = Math.random() + 1; 
    for (let i = 0; i < THREE.Math.randInt(2, 3); i++) { //as you said there are 2 or 3 children 
    var child = new THREE.Mesh(new THREE.BoxGeometry(.25, .25, .25), new THREE.MeshBasicMaterial({ 
     color: parent.material.color, 
     wireframe: true 
    })); 
    child.userData.direction = new THREE.Vector3(rndBase(), rndBase(), rndBase()).normalize(); // random direction (must be a normalized vector) 
    child.userData.radius = radius; 
    parent.add(child); 
    } 
    let start = { val: 0 }; 
    let end = { val: 1 }; 
    new TWEEN.Tween(start).to(end, 1000) // we simply change from 0 to 1 during 1 second 
    .easing(TWEEN.Easing.Elastic.Out) 
    .onUpdate(// here we'll update position of each children in accordance to direction and radius 
     function() { 
     parent.children.forEach((child) => { 
      child.position.copy(child.userData.direction).multiplyScalar(child.userData.radius * this.val); 
     }) 
     } 
    ) 
    .start(); 
} 

、ベースオブジェクトとその子の除去は、次のとおりです。だから、

function removeObj(baseObj) { // very similar to how we created children 
    let start = { val: 1 }; 
    let end = { val: 0 }; 
    new TWEEN.Tween(start).to(end, 1000) 
    .easing(TWEEN.Easing.Elastic.In) 
    .onUpdate(
     function(){ 
     baseObj.children.forEach((child) => { 
      child.position.copy(child.userData.direction).multiplyScalar(child.userData.radius * this.val); 
      }) 
     } 
    ) 
    .onComplete(// but the difference is here, it allow us to perform something when our tweening is completed 
     function() { 
     for (let i = baseObj.children - 1; i = 0; i--) { 
      baseObj.remove(baseObj.children[i]); //and here we simply delete children in reverse order 
     } 
     bases.remove(baseObj); //and then we remove the base object itself 
     } 
    ) 
    .start() 
} 

、これはそれです。アニメーションループにTWEEN.update();を入れることを忘れないでください。

jsfiddle example r86