TypeScript
React
Three.js
react-three-fiber
Zustand
Mantine
Vite
Electron

Putar - 360° Video/Image viewer

Simple web app to play 360° video/image.

Information

Background

Back then Facebook has support for 360 image and you can view it direcly, because of that I really like render 360 image (mostly just meme) from Blender and upload it on Facebook, and then YouTube also support 360 video, but I don't like to upload just to view 360 video/image, 360 viewer aplication was limited out there.

Stack

react-three-fiber

react-three-fiber is Three.js wrapper for React, component based for scene and fit nice for multiple projections.

Zustand

Zustand is a easy and straight forward state manager, really like it.

Mantine

Mantine is a beautiful React components library.

Vite

Vite is fast code bundler with hot reload, make it easy to develop front-end stuff.

Electron

Open file larger than 600MB it might make time to load, this is why using Electron to load local file using file:// protocol was the right choice.