rotate 3d pictures using javascript

Question

I am starting working on a one page website which uses javascript extensively. The main purpose of this site is to promote my customers products. This website will include one product 3d image. When user clicks and drag then it should rotate according. Please see the link below. I need exactly the same kind of effect which is mentioned in following link

click here for link

How can I achieve this using javascript without using magic 360? Please give me some article or tutorial links as I searched but could not find any tutorials for this.

Answer 1

Here's some javascript I just threw together. Pick one of the pre-built libraries (for browser compatibility etc etc) but when you get a chance dig into what is actually happening. note I wrote this in the answer submit form so there may be syntax and other errors

<!-- an empty div to hold your images / frames -->
<div id="view3d"></div>
...
<script>
    (function() {

    // setup
    var viewer = document.getElementById("view3d");
    var name = "3d Boat";
    var frameUri = "/images/demo3d.#.jpg";
    var frameStart = 1;
    var frameEnd = 100;

    // setup the html IMG's
    for(var i=frameStart; i<=frameEnd; i++) {
        var img = document.createElement("img");
        img.src = frameUri.replace("#", i);
        img.alt = name;
        img.style.display = "none";
        viewer.appendChild(img);
    }

    // persisted variables and events
    var that = this;
    this.rotateX = 0;
    this.isRotating = false;
    this.frames = viewer.getElementsByTagName("img");
    this.frameIdx = 0;
    this.pixelsPerFrame = viewer.offsetWidth / (frames.length / 2);
    function rotateMouseUp() { isRotating = false; };
    function rotateMouseDown(event) { 
        mouseX = event.pageX;
        isRotating = true; 
    };
    function rotateMouseMove(event) {
        if(!this.isRotating) 
            return;
        var x = event.pageX;
        var delta = this.rotateX - x;
        if(delta >= this.pixelsPerFrame) {
            this.rotateX = x;
            this.frames[this.frameIdx].style.display = 'none';
            this.frameIdx = (this.frameIdx + parseInt(delta / pixelsPerFrame)) % this.frames.length;
            this.frames[this.frameIdx].style.display = '';
        }
    }
    viewer.onmousedown = rotateMouseDown.bind(that);
    viewer.onmouseup = rotateMouseUp.bind(that);
    viewer.onmousemove = rotateMouseMove.bind(that);

    // show the first image
    this.frames[this.frameIdx].style.display = '';

    })();
</script>