I want to add to my website a 3d object but the object is in gigabytes so i got the idea of taking images of the 3d object from different angles and doing some code on them to let them look like a 3d object when the user drag over them. I got the idea from a website called pixelsquid which made the same thing i'm searching how to do it.

please if some one have a library name that could help me or a code to make this work that would be perfect.

I know there are libraries that accept full 3d object but the size of my obj is huge.

Thanks!

one approach was to make a huge image and filled with a grid of the images placed in a way that each image is in the right place of the other one as a 3d. if i could make a code that can change the position of the image and make the feel of the 3d movement this approach will work but i had no idea how to do it.

CodePudding user response：

Something like this should be what you are looking for:

https://www.jqueryscript.net/demo/Super-Tiny-jQuery-360-Degrees-Product-Image-Viewer/

Code: https://www.jqueryscript.net/rotator/Super-Tiny-jQuery-360-Degrees-Product-Image-Viewer.html

By converting the model into images, it will not only be more accessible, but will load much quicker than a 3d model.

CodePudding user response：

The answer i found for who'd like is the following

const threeDObj = document.querySelector(".threeDObj");
let mouseMoveListenerActive = false;

        function mouseDownListener() {
            if (!mouseMoveListenerActive) {
                threeDObj.addEventListener("mousemove", mouseMoveListener);
                mouseMoveListenerActive = true;
            }
            console.log("Mouse down");
            threeDObj.innerHTML = "Mouse down";
        }

        function mouseMoveListener(event) {
            console.log("Mouse position: "   event.clientX   ", "   event.clientY);
            threeDObj.innerHTML = "Mouse position: "   event.clientX   ", "   event.clientY;
        }

        function mouseUpListener() {
            if (mouseMoveListenerActive) {
                threeDObj.removeEventListener("mousemove", mouseMoveListener);
                mouseMoveListenerActive = false;
            }
            console.log("Mouse up");
            threeDObj.innerHTML = "Mouse up";
        }

        threeDObj.addEventListener("mousedown", mouseDownListener);
        threeDObj.addEventListener("mouseup", mouseUpListener);

.threeDObj {
            user-select: none;
            -webkit-user-drag: none;
            -moz-user-select: none;
            -webkit-user-select: none;
            width: 1000px;
            height: 1000px;
        }

    <p >previous</p>

now instead of changing the text i can change the image that i want it to appear based on 3x16 array of img src's

Thanks nicholas for helping me!