Continuing with my idea for an AR bookshelf.
I started looking into what it would take to use AR with three.js. There are some good example here.
For today, I started with just setting up the 3D scene using svelthree and making a cube look like a book by painting it with an image texture.
Code
https://svelthree.dev/repl/2d0433e175bd43b4bd1b1ecb248e0854?version=3.38.2
Demo
Notes
- The texture should have an image for each of the 6 sides of the book. Front, back, side, etc..
- Highlight the book(s) you are searching for.
- If there are many books (ie some are offscreen), show arrows to pan.
- Integrate with AR using fiducial markers. The fiducials will go on the shelf corners.