如何准确创建物体的 360 度外部视图？

Question

首先我正在尝试编写一个对象的 360 度视图（如 Walkaround - 仅外部），就像下面的示例一样： https://spins.spincar.com/spincarcomdemo/wp0ab2a70jl135405目前我的软件堆栈是：PHP Node.js React React Native我试图寻找实现这一点的方法，但似乎它没有出现在任何地方。我已经知道如何渲染全景照片（我的意思是 360 照片）。但我只是想一步一步地知道如何从视频中制作出来。因为示例 URL。它就像视频，但拖动功能依赖于从视频中获取并保存为图像的一些帧。如果您访问示例 URL，您就会明白。所以我很想知道这是如何做到的。谢谢阅读

Answer 1

视频由多个图像帧组成。如果您拍摄您在汽车周围行走的视频并播放它，看起来就像您显示了一个物体的 360 度视图。

以下是您的示例的示例： https: //cdn.spincar.com/swipetospin-viewers/spincarcomdemo/wp0ab2a70jl135405/20190222192724.K4BAQSBW/ec/0-0.jpg

他们有 60 个帧，从 0-0 到 0-60。我想到的算法是：将视频切成帧。他们有一个滑块来播放它们。或者实现一个拖动功能，向左拖动减少框，向右拖动增加框，记得环绕

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">