Fade-Objekt unsichtbar, nachdem die Tweening-Position beendet ist

Question

Ich möchte eine Tweening-Position für dieses Objekt ausführen, und wenn es fertig ist, fade es aus ... Momentan verstecke ich es nur, wenn es fertig ist.

this.tweenBox2.onUpdate(function() 
{ 
      that.box.position = a; 
      that.box.Show(); 
}); 
this.tweenBox2.onComplete(function() { 
      for (var i = 0; i < that.box.children.length; i++) { 
       that.box.children[i].visible = false; 
      } 
      that.box.position = new THREE.Vector3().copy(storagePos); 
}); 

ist hier, was in box.children [0]

ist

THREE.Mesh 

webglActive : wahr __webglInit : wahr _modelViewMatrix : THREE.Matrix4 _normalMatrix : DREI.Matrix3 castShado w : falsch Kinder : Array [0] eulerOrder : (...) frustumCulled : wahre Geometrie : THREE.Geometry id : Material : THREE .MeshLambertMaterial Matrix : DREI.Matrix4 MatrixAutoUpdate : wahr matrixWorld : THREE.Matrix4 matrixWorldNeedsUpdate : falsch Name : "" Mutter : Box Position : THREE.Vector3 quaternion : THREE.Quaternion receiveShadow : falsch renderDepth : null Rotation: THREE.Euler rotationAutoUpdate : wahr Skala : THREE.Vector3 bis : THREE.Vector3 useQuaternion : (...) Userdata : Objekt Uuid : "9C6DC789-20D0-4F9F-88B6-CDA9A2C372B9" sichtbar : wahr __proto : DREI.Object3D

Das Material auf diese Weise erstellt:

var box = boxModel.scene.children[3].children[0].clone(); 
box.traverse(function (child) 
{ 
    if (child instanceof THREE.Mesh) 
    { 
     child.material = child.material.clone(); 
    } 
}); 

Answer 1

Wenn Sie das Material für Ihre Box erstellen Sie die Transparenz auf true setzen müssen:

material = new THREE.MeshPhongMaterial({color: 0x00ff00, transparent: true}); 

ein PhongMaterial Ich verwende aber es ist egal.

Dann auf Ihrer onUpdate Funktion können Sie die Opazität ändern, wie Sie für ihre Position zu tun:

this.tweenBox2.onUpdate(function() 
{ 
      that.box.position = a; 
      //This will fade the opacity from 0 to 1 
      //NOTE: I'm considering "box" as a THREE.Mesh 
      that.box.material.opacity = 0; 

      that.box.Show(); 
}); 

Ich glaube nicht, Sie onComplete Funktion benötigen.

Update 1: ich eine globale Variable erstellt haben, die die Durchlässigkeitswert speichert:

var opacityVar = 1; 

Dann wird die fadeOut Funktion:

function fadeOut(){ 

    if(opacityVar >= 0){ 

     mesh.material.opacity = opacityVar; 
    } 
} 

Und in der Funktion machen ich bin Aktualisieren der Opazität var und Aufrufen der FadeOut, die Sie in OnComplete-Funktion aufrufen sollten:

function render() { 

    camera.lookAt(scene.position); 

    renderer.render(scene, camera); 

    opacityVar -= 0.01; //Update opacity var 

    fadeOut(); //Call FadeOut 

}