#

luxiaotao1123

2021-12-22 8dddc657bca9b68b7ac5b25275303e96b583a713

#

 static/css/index.css

@@ -234,7 +234,93 @@




.menu {
    position:fixed;
    top:50%;
    right:20px;
    transform:translateY(-50%);
    z-index:20;
    display:block;
    margin:0;
    padding:0;
}
.menu > li {
    position:relative;
    width:20px;
    height:30px;
    line-height:20px;
    font-size:12px;
    color:#fff;
    text-align:center;
    transform:translateX(50px) translateY(25px);
    padding:0;
    display:block;
    margin-bottom:10px;
    cursor:pointer;
}
.menu > li > div {
    position:relative;
    width:20px;
    height:20px;
    transform:rotate(45deg);
    transition:all 300ms;
}
.menu > li:first-child {
    transition:all 200ms;
}
.menu > li:nth-child(2) {
    transition:all 500ms;
}
.menu > li:nth-child(3) {
    transition:all 800ms;
}
.menu.show > li {
    transform:translateX(0) translateY(0);
    opacity:1;
}
.menu li > div::before {
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:19px;
    height:19px;
    border-top:solid 1px #fff;
    border-left:solid 1px #fff;
    transition:all 300ms;
}
.menu li > div::after {
    content:"";
    position:absolute;
    bottom:0;
    right:0;
    width:19px;
    height:19px;
    border-bottom:solid 1px #fff;
    border-right:solid 1px #fff;
    transition:all 300ms;
}
.menu > li > div > div {
    transform:rotate(-45deg);
}
.menu li:hover > div {
    transform:rotate(0) !important;
}
.menu li:hover > div::before {
    width:5px;
    height:5px;
    border-top:solid 1px #0f0;
    border-left:solid 1px #0f0;
}
.menu li:hover > div::after {
    width:5px;
    height:5px;
    border-bottom:solid 1px #0f0;
    border-right:solid 1px #0f0;
}
.menu li:hover > div > div {
    transform:rotate(0);
}




 static/js/app.js

@@ -420,6 +420,18 @@
            this.controls.getObject().position.z = 200;
            this.controls.lock();
        }
        this.mainView = function () {
            this.camera.position.set( 1400, 400, 2000 );
            this.camera.lookAt( 1400, 500, 0 );
        }
        this.leftView = function () {
            this.camera.position.set( -3000, 300, -2000 );
            this.camera.lookAt(0, 500, -2000);
        }
        this.verticalView = function () {
            this.camera.position.set( 1400, 6000, -1800 );
            this.camera.lookAt( 1400, 0, -1800 );
        }
    },

};

 views/index.html

@@ -70,6 +70,17 @@
    </div>
    <div id="control-remind" class="remind">您现在可以自由移动视角</div>
</div>
<ul class="menu" id="menu">
    <li id="menu-w">
        <div><div>主</div></div>
    </li>
    <li id="menu-m">
        <div><div>左</div></div>
    </li>
    <li id="menu-t">
        <div><div>俯</div></div>
    </li>
</ul>


<div id="container"></div>
@@ -91,6 +102,17 @@
        document.getElementById("ship-type-ul").style.transform = 'translateY(-60px)';
    }, false);

    document.getElementById("menu-w").addEventListener('click', function () {
        player.mainView();
    }, false);

    document.getElementById("menu-m").addEventListener('click', function () {
        player.leftView();
    }, false);

    document.getElementById("menu-t").addEventListener('click', function () {
        player.verticalView();
    }, false);
</script>
<script>
    var percent = 0;
@@ -112,13 +134,15 @@

    $(document).on('click','.btn-word', function () {
        fullScreen()
        $("#mask").fadeOut(1, function () {
        $("#mask").fadeOut(3000, function () {  // 3000
            $("#menu").addClass("show");
            setTimeout(function () {
                $("#ship-type-ul").css("transform", "translateY(-40px)");
                $("#ship-info-btn .btn-word").text("体验调度世界");
                $("#ship-info-btn").data("type", 2).addClass("show");
                $("#ship-info-btn #btn-lock").css("z-index", "10");
            }, 1);
                $("#menu li").css("transition", "all 200ms !important");
            }, 3000);   // 1000
        });
        $("#title-box, #logo").addClass("show");
        $("#ship-info-btn").removeClass("show");