Question

我正在尝试使用Java脚本开发具有旋转和缩放功能的交互式3d查看器。我成功开发了一个脚本来查看仅在一个轴（X轴）上旋转的产品，但是需要脚本示例来查看在X，Y和Z轴上获取的产品。我已附上一张显示相机放置位置的图像。

图-1显示了在单轴上拍摄图像的相机位置，这已实现，下面是代码。

      <html>
<head>
    <style type="text/css">
        table img {
            height: 250px;
            width: 250px;
        }
    </style>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            var arr = new Array();
            var xCurrent = 0;
            var currentImgPos = 0;
            $("#dvImages img").each(function () {
                arr.push($(this).attr("src"));
            });

            $("#product").attr("src", arr[0]);
            $("#product").mouseleave(function () { xCurrent = 0; });

            $("#product").mousemove(function (e) {
                var parentOffset = $(this).parent().offset();
                var relX = e.pageX - parentOffset.left;
                var relY = e.pageY - parentOffset.top;

                if (xCurrent > relX) {
                    if (relX - xCurrent <= -5) {
                        if (currentImgPos >= 25) {
                            currentImgPos = 0;
                            $("#product").attr("src", arr[currentImgPos]);
                        }
                        else {
                            currentImgPos = currentImgPos + 1;
                            $("#product").attr("src", arr[currentImgPos]);
                        }
                        xCurrent = relX;
                    }
                }
                else {
                    if (relX - xCurrent >= 5) {
                        if (currentImgPos <= 0) {
                            currentImgPos = 25;
                            $("#product").attr("src", arr[currentImgPos]);
                        }
                        else {
                            currentImgPos = currentImgPos - 1;
                            $("#product").attr("src", arr[currentImgPos]);
                        }
                        xCurrent = relX;
                    }
                }
            });
        });
    </script>
</head>
<body>
    <table border="0" cellpadding="0" cellspacing="0">
        <tr>
            <td>
                <img alt="" src="" id="product" />
            </td>
        </tr>
    </table>
    <div id="dvImages" style="display: none">
        <img alt="" src="http://www.mathieusavard.info/threesixty/1.jpg" />
        <img alt="" src="http://www.mathieusavard.info/threesixty/5.jpg" />
        <img alt="" src="http://www.mathieusavard.info/threesixty/9.jpg" />
        <img alt="" src="http://www.mathieusavard.info/threesixty/13.jpg" />
        <img alt="" src="http://www.mathieusavard.info/threesixty/17.jpg" />
        <img alt="" src="http://www.mathieusavard.info/threesixty/21.jpg" />
        <img alt="" src="http://www.mathieusavard.info/threesixty/25.jpg" />
    </div>
</body>
</html>

Fig-2 New Camera placement

图-2显示在X，Y和Z轴上拍摄图像的相机位置。这部分需要示例代码

JavaScript 3d Viewer使用具有旋转和缩放功能的图像

0 个答案: