mate-h/macoda-mattress

macoda-mattress's Issues

Research how we could use react-spring

What happens when you click very quickly? The animation state is interruped and reversed.

https://react-spring.io/hooks/use-spring

Is a good candidate for implementing animations with react.

Seeking video customization pages

Take this video file: customization-demo-2.mp4 and skip to the appropriate times as the user skips the buttons.

customization-demo-2.mp4 has the following keyframes:

1. 00:18 (437 F)
2. 00:24(580 F)
3. 00:33 (793 F)
4. 00:49 (1177 F)

By default, the video is paused.
As user clicks the right arrow, the page is incremented, and the video is seeked to the next keyframe. If the current page is the last, wrap around (start from beginning). Same with the first page, skip to last.

Video state: playing/paused.
Animation state: current page (1-4), previous page

If click happens:

1. Is the video paused?
   1.1 if paused, then set to playing. Change animation state (increment or decrement with wrap around)
   1.2 if not paused, the skip to current page's keyframe. It's set to paused.

(Animation time could be constant between pages, let's say 1s, may not look good)

Display model with threeJS

1. Open model in Blender
2. Export the scene as GLTF
3. Write some basic import GLTF code with ThreeJS

https://threejs.org/docs/#examples/en/loaders/GLTFLoader