如何利用js写一个旋转的3D模型

以下是js代码部分

function animate(obj,json , fn) {
        clearInterval(obj.timer);
        obj.timer = setInterval(function () {
            var flag = true;
            for (var k in json) {
                if (k === "opacity") {
                    var leader = getStyle(obj, k) * 100;
                    var target = json[k] * 100;
                    var step = (target - leader) / 10;
                    step = step > 0 ? Math.ceil(step) : Math.floor(step);
                    leader = leader + step;
                    obj.style[k] = leader / 100;
                } else if (k === "zIndex") {
                    obj.style.zIndex = json[k];
                } else {
                    var leader = parseInt(getStyle(obj, k)) || 0;
                    var target = json[k];
                    var step = (target - leader) / 10;
                    step = step > 0 ? Math.ceil(step) : Math.floor(step);
                    leader = leader + step;
                    obj.style[k] = leader + "px";
                }
                if (leader != target) {
                    flag = false;
                }
            }
            if (flag) {
                clearInterval(obj.timer);
                if (fn) {
                    fn();
                }
            }
        }, 15);
    }
    function getStyle(obj, attr) {
        if (window.getComputedStyle) {
            return window.getComputedStyle(obj, null)[attr];
        } else {
            return obj.currentStyle[attr];
        }
    }

CSS代码部分如下:

   * {
            margin: 0;
            padding: 0
        }

        img {
            position: absolute;
            top: 0;
            left: 0;
        }

HTML部分:

<img src="img.jpg" width="277" height="207" id="pic" alt=""/>
<script src="animate.js"></script>

以上就是js书写3D模型的全部代码,本人第一次发布,请关注我,日后有更多的资源发布,一次比一一次好,谢谢大家!!!

发布了10 篇原创文章 · 获赞 13 · 访问量 351

猜你喜欢

转载自blog.csdn.net/weixin_46483221/article/details/104699600