Primero que todo

Estoy intentando codificar una vista de 360 ​​° de un objeto (como un paseo, solo exterior) , como en el siguiente ejemplo: https://spins.spincar.com/spincarcomdemo/wp0ab2a70jl135405

Actualmente mi pila de software es:

PHP
Node.js
React
React Native

Y he intentado buscar formas de hacer eso, pero parece que no aparece en ninguna parte.

Ya sé cómo renderizar fotos panorámicas (me refiero a fotos 360).

Pero solo quiero saber paso a paso cómo se puede hacer eso a partir de un video.

Porque la URL de ejemplo. es como un video, pero la función de arrastre se basa en algunos fotogramas tomados del video y guardados como una imagen.

Si visita la URL de ejemplo, lo comprenderá.

Tan exactamente me encantaría saber cómo se puede hacer eso.

Gracias por leer

0
Jouhn code 28 ago. 2020 a las 16:22

1 respuesta

La mejor respuesta

El vídeo consta de varios fotogramas de imagen. Si toma un video de usted caminando alrededor del automóvil y lo reproduce, parecerá que muestra una vista de 360 ​​grados de un objeto.

Aquí hay una muestra de su ejemplo: https: //cdn.spincar. com / swipetospin-viewers / spincarcomdemo / wp0ab2a70jl135405 / 20190222192724.K4BAQSBW / ec / 0-0.jpg

Tienen 60 cuadros como ese de 0-0 a 0-60. El algoritmo en el que pienso es: tener un video cortado en cuadros. tienen un control deslizante para reproducirlos. O implemente una función de arrastre, arrastre el marco de disminución izquierdo, arrastre el marco de aumento derecho, recuerde ajustar

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
Trinh Hoang Nhu 29 ago. 2020 a las 04:28