如何准确地创建一个对象的 360 度外部视图？

Posted 2023-03-07

【中文标题】如何准确地创建一个对象的 360 度外部视图？

【英文标题】：How can exactly create a view of the exterior in 360o of an object?

【发布时间】：2020-12-17 10:30:26

【问题描述】：

首先

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

目前我的软件堆栈是：

php
Node.js
React
React Native

我已经尝试过寻找方法来实现它，但它似乎没有出现在任何地方。

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

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

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

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

所以我很想知道如何制作。

感谢阅读

【问题讨论】：

like that?

【参考方案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"  id="img" />

<input type="range" id="frame" name="frame" min="0" max="63" value="0">

【讨论】：

我不能感谢你，伙计！对我有很大帮助，谢谢！

逆向工程师是你的朋友：D