Morphing THREE.Points對象在一段時間內

Question

我有一個THREE.Points對象，我試圖變身爲另一種形狀。如果我簡單地將對象的幾何設置爲新幾何，頂點將自動更新到其新位置：

object.geometry = new THREE.SphereGeometry（）;

但是，我希望頂點「移動」到他們的新位置，而不是立即出現在那裏。我考慮使用Tweenjs爲每個頂點創建一個新的補間。這似乎工作，但真的laggy，當你有成千上萬的頂點操縱：

function morph(){ 
    var newGeom = new THREE.SphereGeometry(2.5, 64, 64); 
    var curGeom = box.mesh.geometry; 

    var targetVertices = newGeom.vertices; 
    var curVertices = curGeom.vertices; 
    var less = targetVertices.length < curVertices.length ?targetVertices : curVertices; 

    var tween; 
    var cur, target; 
    for (var i=0; i<curVertices.length; i++){ 
     cur = curVertices[i]; 
     target = targetVertices[i]; 

     tween = new TWEEN.Tween(cur).to(target, 1000); 
     tween.start(); 
     box.mesh.geometry.verticesNeedUpdate = true; 
    } 
} 

有沒有人有更好的解決方案？我也嘗試使用變形目標，但我不認爲THREE.Points支持它們。

Answer 1

您遇到滯後現象，因爲每秒更新數千個頂點的位置每秒60次會變得非常沉重。你需要做的是將所有這些計算推遲到GPU，因爲你的圖形卡是，使得能夠處理每幀的大量計算。

我建議你看看this example，因爲它執行與你試圖達到的功能類似的功能，沒有滯後（除了改變每個點的大小，你將改變它們的位置）。 Here is the source code you should read carefully。

一旦你有這個例子做什麼正確的認識，我建議你改變你的場景如下：

1. 採取BufferGeometry並分配position屬性，你想爲出發點的任何位置。
2. 將新的自定義屬性customPosition添加到BufferGeometry中，該屬性將具有所有結束位置。
3. 在ShaderMaterial中聲明一個uniform，範圍從0到1，這將是一個「滑塊」，用於控制開始位置和結束位置之間的動畫。

一旦你的幾何特性及Shader制服已經成立，你可以去標記id="vertexshader"的部分，你可以用position和customPosition屬性上（記得要加attribute vec3 customPosition;頂端，否則它不會明白什麼customPosition的意思！）。

就像那樣，你將在GLSL中編寫自己的自定義頂點着色器！ GLSL是WebGL用來與您的GPU進行通信的語言。

我強烈建議您閱讀http://thebookofshaders.com/以獲得對着色器更深入的瞭解。