首先我正在嘗試編寫一個對象的 360 度視圖（如 Walkaround - 僅外部），就像下面的示例一樣： https://spins.spincar.com/spincarcomdemo/wp0ab2a70jl135405目前我的軟件堆棧是：PHP
Node.js
React
React Native我試圖尋找實現這一點的方法，但似乎它沒有出現在任何地方。我已經知道如何渲染全景照片（我的意思是 360 照片）。但我只是想一步一步地知道如何從視頻中制作出來。因為示例 URL。它就像視頻，但拖動功能依賴于從視頻中獲取并保存為圖像的一些幀。如果您訪問示例 URL，您就會明白。所以我很想知道這是如何做到的。謝謝閱讀
1 回答
楊魅力
TA貢獻1811條經驗 獲得超6個贊
視頻由多個圖像幀組成。如果您拍攝您在汽車周圍行走的視頻并播放它，看起來就像您顯示了一個物體的 360 度視圖。
以下是您的示例的示例： https: //cdn.spincar.com/swipetospin-viewers/spincarcomdemo/wp0ab2a70jl135405/20190222192724.K4BAQSBW/ec/0-0.jpg
他們有 60 個幀，從 0-0 到 0-60。我想到的算法是：將視頻切成幀。他們有一個滑塊來播放它們?；蛘邔崿F一個拖動功能，向左拖動減少框，向右拖動增加框，記得環繞
currentFrame = (currentFrame + dragDirection) % totalFrame
const $slider = document.getElementById('frame');
const $img = document.getElementById('img');
$slider.addEventListener('change', (e) => {
$img.src = `https://cdn.spincar.com/swipetospin-viewers/spincarcomdemo/wp0ab2a70jl135405/20190222192724.K4BAQSBW/ec/0-${e.target.value}.jpg`;
});
// Preload your imgs
for (let i = 0; i <= 63; i ++) {
const img = new Image();
img.src = `https://cdn.spincar.com/swipetospin-viewers/spincarcomdemo/wp0ab2a70jl135405/20190222192724.K4BAQSBW/ec/0-${i}.jpg`
}
<img src="https://cdn.spincar.com/swipetospin-viewers/spincarcomdemo/wp0ab2a70jl135405/20190222192724.K4BAQSBW/ec/0-0.jpg" alt="Car" id="img" />
<input type="range" id="frame" name="frame" min="0" max="63" value="0">
- 1 回答
- 0 關注
- 167 瀏覽
添加回答
舉報
0/150
提交
取消