How can exactly create a view of the exterior in 360o of an object?

first off all

i am trying to code a 360 view of an object (like a Walkaround – only exterior), just like the example below: https://spins.spincar.com/spincarcomdemo/wp0ab2a70jl135405

Currently my software stack is:

PHP Node.js React React Native 

And i have tried to search ways to make that, but it seems that it does not appear anywhere.

I already know how to render panoramic photos (i mean 360 photos).

But i just wanna know Step by Step how can that be make from a video.

because the example URL. it is like a video, but the dragging feature relies on some frames took from the video and saved as an image.

If you visit the example URL, you will understand.

so exactly i would love to know how can that be made.

Thanks for reading

Add Comment
1 Answer(s)

Video consist of multiple image frame. If your take a video of you walking around the car and play it back it look like you show 360 view of an object.

Here is sample from your example: https://cdn.spincar.com/swipetospin-viewers/spincarcomdemo/wp0ab2a70jl135405/20190222192724.K4BAQSBW/ec/0-0.jpg

They have 60 frame like that from 0-0 to 0-60. The algorithm I think of is: having a video you cut into frames. them have a slider to play them back. Or implement a drag feature, drag left decrease frame, drag right increase frame, remember to wrap around

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

Answered on August 31, 2020.
Add Comment

Your Answer

By posting your answer, you agree to the privacy policy and terms of service.