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

Question

首先

我正在尝试编写一个对象的 360 度视图（如 Walkaround - 仅外部），就像下面的示例一样： https://spins.spincar.com/spincarcomdemo/wp0ab2a70jl135405

目前我的软件堆栈是：

PHP
Node.js
React
React Native

我试图寻找实现这一点的方法，但似乎它没有出现在任何地方。

我已经知道如何渲染全景照片（我的意思是 360 照片）。

但我只是想一步一步地知道如何从视频中制作出来。

因为示例 URL。它就像视频，但拖动功能依赖于从视频中获取并保存为图像的一些帧。

如果您访问示例 URL，您就会明白。

所以我很想知道这是如何做到的。

谢谢阅读

Answer 1

视频由多个图像帧组成。如果您拍摄您在汽车周围行走的视频并播放它，看起来就像您显示了一个物体的 360 度视图。以下是您的示例的示例： https:&nbsp;//cdn.spincar.com/swipetospin-viewers/spincarcomdemo/wp0ab2a70jl135405/20190222192724.K4BAQSBW/ec/0-0.jpg他们有 60 个帧，从 0-0 到 0-60。我想到的算法是：将视频切成帧。他们有一个滑块来播放它们。或者实现一个拖动功能，向左拖动减少框，向右拖动增加框，记得环绕currentFrame&nbsp;=&nbsp;(currentFrame&nbsp;+&nbsp;dragDirection)&nbsp;%&nbsp;totalFrameconst $slider = document.getElementById('frame');const $img = document.getElementById('img');$slider.addEventListener('change', (e) => {&nbsp; $img.src = `https://cdn.spincar.com/swipetospin-viewers/spincarcomdemo/wp0ab2a70jl135405/20190222192724.K4BAQSBW/ec/0-${e.target.value}.jpg`;});// Preload your imgsfor (let i = 0; i <= 63; i ++) {&nbsp; const img = new Image();&nbsp; 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">