使用JavaScript旋转3d图片 [英] rotate 3d pictures using javascript

问题描述

我开始在一个广泛使用javascript的单页网站上工作。本网站的主要目的是宣传我的客户产品。该网站将包含一个产品3d图像。当用户点击并拖动时，它应该旋转。请参阅下面的链接。我需要与以下链接中提到的完全相同的效果

点击此处对于链接

如何在不使用 magic 360 的情况下使用javascript实现此目的？请给我一些文章或教程链接，我搜索但找不到任何教程。

扔在一起。选择一个预建的库（用于浏览器兼容性等），但是当你有机会挖掘实际发生的事情时。 note 我在答案提交表单中写了这个，所以可能会有语法错误和其他错误

 < ！ - 一个空的div来保存你的图片/帧 - > 
< 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; 
 
 //设置html IMG的
 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）; 
} 
 
 //持续变量和事件
 var that = this; 
 this.rotateX = 0; 
 this.isRotating = false; 
 this.frames = viewer.getElementsByTagName（img ）; 
 this.frameIdx = 0; 
 this.pixelsPerFrame = viewer.offsetWidth /（frames.length / 2）; 
函数rotateMouseUp（）{isRotating = false;}; 
 function rotateMouseDown（event）{
 mouseX = event.pageX; 
 isRotating = true; 
}; 
函数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）; 
 
 //显示第一张图片
 this.frames [this.frameIdx] .style.display =''; 
 
}）（）; 
< / script> 
  

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.

解决方案

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>

这篇关于使用JavaScript旋转3d图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！