Create a 3D visualizer on my site using various images of the object from multiple perspectives

Question

Create a 3D visualizer on my site using various images of the object from multiple perspectives

Looking to incorporate a 3D object into my website, but the file size is too large. I'm considering taking images of the object from various angles and utilizing code to create a visual 3D effect when users interact with them.

I was inspired by a website called pixelsquid that achieved a similar result. Currently exploring ways to replicate this on my own site.

If anyone has knowledge of libraries or code that could assist in achieving this effect, it would be greatly appreciated.

While aware of libraries that support full 3D objects, the file size of mine is prohibitive for this approach.

One proposed method involves creating a large grid image composed of smaller images arranged to simulate 3D movement. If there is a way to write code that can manipulate these images' positions for a realistic 3D effect, that would be ideal.

javascript html css web 3d

Answer 1

Answer №1

If you're searching for something similar, consider this option:

Check out this jQuery product image viewer

Here's the code: View the code here

Converting the model into images can improve accessibility and loading speed compared to a 3D model.

Answer 2

If you're searching for something similar, consider this option:

Check out this jQuery product image viewer

Here's the code: View the code here

Converting the model into images can improve accessibility and loading speed compared to a 3D model.

Answer 3

Answer №2

The answer I discovered for who would like is as follows:

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 class="threeDObj">previous</p>

Instead of altering the text, I can now modify the image that I want to display based on a 3x16 array of img src's.

Special thanks to Nicholas for his assistance!

Answer 4

The answer I discovered for who would like is as follows:

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 class="threeDObj">previous</p>

Instead of altering the text, I can now modify the image that I want to display based on a 3x16 array of img src's.

Special thanks to Nicholas for his assistance!

Create a 3D visualizer on my site using various images of the object from multiple perspectives

Answer №1

Answer №2

Similar questions

Moving specified data from one interactive table to another interactive table

Ways to transfer data between Angular controller and jQuery

Trouble aligning image in the middle with bootstrap

Displaying data from a table in a modal window using getSelected in Bootstrap-table

Why is my React build's index.html coming up empty?

Troubleshooting bitrate and quality issues in AWS MediaConvert

Bootstrap Table Layout with gaps between rows, enclosed in a border with no borders inside cells

In AngularJS, the use of the '+' operator is causing concatenation instead of addition

Group a set of x elements together within a div, and then group a distinct number of elements together after every x-grouping

`Storing modified PDF containing interactive form elements using integrated Chrome viewer and transferring it to a remote server`

Utilizing Mouseover Event to Create a Loop Function in Pure Javascript

Tips on redirecting a user to a specific page after they have made a selection without doing so immediately

Combining two JSON objects into a single JSON object using Jquery/JavaScript

Achieving proper stacking of a table with other div elements

Background does not extend beyond the visible screen area

What is the best way to conceal a div when there are no visible children using AngularJS?

Is there any benefit to making the SVG elements width and height 100%?

Project in Three.js where the camera remains focused on the object while in a top-down perspective

What could be the reason for PassportJS in Node failing to clear the session upon logout?

Angular2 - Access to fetch at 'https://example.com' from