如何在three.js中設置動畫的可見性？

我想在Three.js中導入的對象顯示得很慢。我已經尋找答案，但我仍然不知道。如何在three.js中設置動畫的可見性？

顯示和隱藏與此代碼運行良好：

function spielfunktion_01_einblenden() { 
    Objekt_Spielfunktion_02 = scene.getObjectByName("Neo02_02"); 
    Objekt_Spielfunktion_01.traverse(function (child) { 
     child.visible = true; 
    }); 
}

好：我怎樣才能得到一個過渡效果，使對象可見？

在此先感謝！ :)

來源

2017-04-06 cyra

您可以使用Tween.js來處理對象材質的「不透明度」。 – prisoner849

例如，您在場景中有一個立方體（這是我們希望將我們轉移到我們的抽象對象）：

var cube = new THREE.Mesh(new THREE.BoxGeometry(2, 2, 2), new THREE.MeshBasicMaterial({ 
    color: "red", 
    transparent: true, 
    opacity: 0 
}));

和兩個按鈕用的onclick事件使我們的立方體可見或不透明度的過渡不可見（其ID是showOn和showOff）：

showOn.addEventListener("click", function(event) { 
    cube.visible = true; 
    var tweenon = new TWEEN.Tween(cube.material).to({ 
    opacity: 1 
    }, 2000). 
    onComplete(function(){ 
    cube.material.transparent = false; 
    }); 
    tweenon.start(); 
}); 

showOff.addEventListener("click", function(event) { 
    cube.material.transparent = true; 
    var tweenoff = new TWEEN.Tween(cube.material).to({ 
    opacity: 0 
    }, 2000). 
    onComplete(function(){ 
    cube.visible = false; 
    }); 
    tweenoff.start(); 
});

jsfiddle例子。

來源

2017-04-07 11:04:28 prisoner849

@cyra如果解決了您的問題，請將答案標記爲已接受。 – prisoner849

你的意思是像一個透明度？嘗試使用網格上的不透明屬性並將其添加到你的場景中。

var cube = new THREE.Mesh(geometry, new THREE.MeshBasicMaterial({ color: Math.random() * 0xffffff, opacity: 1.0 })); 
scene.add(cube);

來源

2017-04-06 17:43:08 yokata

如何在three.js中設置動畫的可見性？

回答

相關問題