Three.js：全景立方體放大和過渡到不同的全景立方體

我是Three.js的新手。我將這個例子與6個圖像立方體一起用於全景效果，其中人們可以平移，放大和縮小立方體。Three.js：全景立方體放大和過渡到不同的全景立方體

https://threejs.org/examples/?q=panorama#webgl_panorama_equirectangular

我想弄清楚如何，在最大放大級，我可以過渡用戶到不同的全景立方體（具有不同的圖像源），映射到該特定的立方體部分。所以，我會打開下一個場景，讓用戶在旅途中更上一層樓。

這幾乎就是谷歌街景當你點擊箭頭向前走的路。

我沒有看到很多例子。我研究過，看到創建2個場景可能是可能的？任何想法如何使其功能，我將不勝感激。

來源

2017-08-11 Vad

我發現了一個沒有回答的重複：https://stackoverflow.com/questions/27566155/transitions-between-panoramas-in-three-js?rq=1 – Vad

谷歌地圖實際上有一個3D世界的代表。這不僅僅是全景圖。它使用該3D數據將全景圖的各個部分映射到簡化（低多邊形）模型，使用該3D模型滑動相機，交叉淡入淡出到新的全景。如果沒有3D數據，你將無法進行有效回收 – gman

一種方法是使用簡單的3D世界，例如gman說。在這種情況下，你可以走在任何箭頭。換句話說，如果你想要全景方法，你需要以某種方式準備好3D視頻。全景使用紋理，您需要記錄所有相機移動的位置，以便在您的應用程序中進行導航。使用兩個開關幾何（在你的情況下的立方體）一個總是當前和秒是未來（視頻紋理）。使用不透明度淡入淡出效果。在箭頭鍵盤上，只需加載當前全景視頻紋理的下一個序列。僅在運動線的開始或結束時啓用箭頭。 –

當檢測到過渡：

在給出的示例中，鼠標事件都給出。通過調整相機的fov屬性在onDocumentMouseWheel中處理縮放。「放大」縮小了fov，「縮小」增加了它。檢測fov何時達到最小/最大值，這將觸發您轉換到新場景，這將是微不足道的。

檢測符合轉型：

下一個步驟是確定成新的場景，你會轉型。你可以做一些類似熱點的事情，從相機拍攝光線，看它是否碰到某個特定的地方（例如，你有戰略定位的THREE.Sphere）。但是爲了簡單起見，我們假設你只有6個方向，並且仍然使用示例的鼠標控件。

通過更新lat和lon變量（顯示爲度數）來處理攝像機移動onDocumentMouseMove。（注：看起來lon增加無界限，所以爲了清晰起見，它可能是一個很好的給它一個復位值，所以它只能在0.0-359.99之間）你可以讓所有的數學-y檢查角落更好的，或者你可以簡單地檢查你45級的：

if(lat > 45){ 
    // you're looking up 
} 
else if(lat < -45){ 
    // you're looking down 
} 
else{ 
    // you're looking at a side, check "lon" instead 
}

你的樣子方向決定到現場，你會轉型，你應該遇到你的最大變焦。

過渡

有很多方法可以做到這一點。您可以簡單地替換構成全景的立方體上的紋理。你可以換一個完全不同的THREE.Scene。您可以重置相機 - 或不。在轉換髮生時，您可以使用調光輸出/輸入的燈光。您可以應用一些後期處理來模糊過渡效果。這部分是全部的風格，完全取決於你。

尋址@ Marquizzo的關注：

照明僅僅是一個過渡的建議。該示例不使用光源，因爲材料是MeshBasicMaterial（不需要照明）。該示例也不使用scene.background，但將紋理應用於倒置的球體。如果你不能影響紋理的「亮度」（比如CSS轉換），還可以使用其他方法。

我在示例中添加了以下代碼，使其淡入淡出，就如同一個例子。

// These are in the global scope, defined just before the call to init(); 
// I moved "mesh" to the global scope to access its material during the animation loop. 
var mesh = null, 
    colorChange = -0.01; 

// This code is inside the "update" function, just before the call to renderer.render(...); 
// It causes the color of the material to vary between white/black, giving the fading effect. 
mesh.material.color.addScalar(colorChange); 
if(mesh.material.color.r + colorChange < 0 || mesh.material.color.r + colorChange > 1){ // not going full epsilon checking for an example... 
    colorChange = -colorChange; 
}

人們甚至可能會影響材料的不透明度值，使一個球體消失，另一個球體消失。

我的主要觀點是，可以通過各種方式完成轉換，並且由@Vad決定使用哪種效果。

來源

2017-08-15 23:51:34 TheJim01

燈光調暗在將其分配給CubeTexture後，不會對scene.background屬性產生影響。我想他是問是否有辦法在一個CubeTexture與另一個CubeTexture之間進行淡入淡出過渡。 – Marquizzo

Three.js：全景立方體放大和過渡到不同的全景立方體

回答

相關問題