yxk-storeroom-system/public/web/js/index.js

function IsPC() {
    var userAgentInfo = navigator.userAgent;
    var Agents = ["Android", "iPhone",
        "SymbianOS", "Windows Phone",
        "iPad", "iPod"];
    var flag = true;
    for (var v = 0; v < Agents.length; v++) {
        if (userAgentInfo.indexOf(Agents[v]) > 0) {
            flag = false;
            break;
        }
    }
    return flag;
    }

    if(IsPC()==true){
    //    if(false){
     //   alert("我是PC");
    }else{
        // alert("我是手机");
        let mains=document.getElementsByClassName("mains")[0];
        let contint=document.getElementsByClassName("contint")[0];
        
        mains.setAttribute("class","main2")
        contint.setAttribute("class","contint2")
        // renderCanvas.setAttribute("class","renderCanvas2")
        document.getElementById("renderCanvas").style.width="980px";

        document.getElementById("renderCanvas").style.height="960px";
        // console.log(document.getElementById("renderCanvas").style.with);
        //console.log(document.getElementsByClassName("mains").style.flexDirection);
        document.getElementsByClassName("title")[0].style.display = "none";
    }


//     const width = document.documentElement.clientWidth;
//     const height = document.documentElement.clientHeight;
//     if (width < height) {
//     console.log(width + " " + height);
//     const contentDOM = document.getElementById('divTransform');
//     contentDOM.style.width = height + 'px';
//     contentDOM.style.height = width + 'px';
//     contentDOM.style.top = (height - width) / 2 + 'px';
//     contentDOM.style.left = 0 - (height - width) / 2 + 'px';
//     //contentDOM.style.transform = 'rotate(90deg)';
//     }
//     const evt = "onorientationchange" in window ? "orientationchange" : "resize";
//   window.addEventListener(evt, function () {
//     const width = document.documentElement.clientWidth;
//     const height = document.documentElement.clientHeight;
//     const contentDOM = document.getElementById('content');
//     //alert('width: ' + width + ' height: ' + height)
//     if (width > height) { // 横屏
//       contentDOM.style.width = width + 'px';
//       contentDOM.style.height = height + 'px';
//       contentDOM.style.top = '0px';
//       contentDOM.style.left = '0px';
//       contentDOM.style.transform = 'none';
//     }
//     else { // 竖屏，这里微信应该由bug，我切换为竖屏的时候，width:375, height: 323, 导致不能旋转角度。 在safari、chrome上是正确的。
//       alert('change to portrait')
//       contentDOM.style.width = height + 'px';
//       contentDOM.style.height = width + 'px';
//       contentDOM.style.top = (height - width) / 2 + 'px';
//       contentDOM.style.left = 0 - (height - width) / 2 + 'px';
//       //contentDOM.style.transform = 'rotate(90deg)';
//     }

//   }, false);

    

    window.addEventListener('DOMContentLoaded', function(){

        BABYLON.DefaultLoadingScreen.prototype.displayLoadingUI = function () {
if (document.getElementById("customLoadingScreenDiv")) {
    // Do not add a loading screen if there is already one
    document.getElementById("customLoadingScreenDiv").style.display = "initial";
    return;
}
this._loadingDiv = document.createElement("div");
this._loadingDiv.id = "customLoadingScreenDiv";
//this._loadingDiv.innerHTML = "模型正在加载....";
this._loadingDiv.innerHTML = "<image src='./loading.gif' />";
var customLoadingScreenCss = document.createElement('style');
customLoadingScreenCss.type = 'text/css';
customLoadingScreenCss.innerHTML = `
#customLoadingScreenDiv{
    background-color: #3D4456cc;
    color: white;
    font-size:50px;
    text-align:center;
}
`;
document.getElementsByTagName('head')[0].appendChild(customLoadingScreenCss);
this._resizeLoadingUI();
window.addEventListener("resize", this._resizeLoadingUI);
document.body.appendChild(this._loadingDiv);
};

BABYLON.DefaultLoadingScreen.prototype.hideLoadingUI = function(){
document.getElementById("customLoadingScreenDiv").style.display = "none";
console.log("scene is now loaded");
}
function sleep(beginTime,endTime) {

var exitTime = beginTime + 3000;
while (true) {
    now = new Date();
    if (now.getTime() > exitTime)
        return;
}
}


        // get the canvas DOM element
        var canvas = document.getElementById('renderCanvas');

         
        var d = new Date();
        var n_Begin= d.getTime();
        console.log("n_Begin:"+n_Begin);

        // load the 3D engine
        var engine = new BABYLON.Engine(canvas, true);

        // createScene function that creates and return the scene
        var createScene = function(){

            engine.displayLoadingUI();
            // create a basic BJS Scene object
            var scene = new BABYLON.Scene(engine);

            //scene.debugLayer.show();
           
           
           
            
            var camera = new BABYLON.ArcRotateCamera("Camera", 0, 0, 5, new BABYLON.Vector3(0, 0, 0), scene);
            console.log(camera);
           // camera.transforms.alpha = 85;
            //camea.transforms.beta=95;
            // target the camera to scene origin
           camera.setTarget(BABYLON.Vector3.Zero());
            //camera.setPosition(new BABYLON.Vector3(20, 200, 400));
            // attach the camera to the canvas
            camera.attachControl(canvas, true);


          
            camera.lowerRadiusLimit = 2.5 ;// 这里是最大的位置，值越大，物体越小 
            camera.upperRadiusLimit = 20 ;
            camera.Radius = 2.5;
            camera.alpha = 1.5;
            camera.beta = 1;
            camera.inertia=0.1; // 缩放的快慢
            //scene.VRHelper = scene.createDefaultVRExperience({createDeviceOrientationCamera: false});
            //var VRHelper = scene.createDefaultVRExperience();
            //console.log(VRHelper);
            //VRHelper.onExitingVR.add(()=>{
            //    scene.setActiveCameraByName("Camera");
            //   console.log("abc");
               //console.log(scene);
            //})


            //scene.setActiveCameraByName("Camera");
            //console.log(VRHelper);
           
            // create a basic light, aiming 0,1,0 - meaning, to the sky
            var light = new BABYLON.HemisphericLight('light1', new BABYLON.Vector3(0,1,0), scene);


            // Skybox
            var skybox = BABYLON.MeshBuilder.CreateBox("skyBox", {size:1000.0}, scene);
            var skyboxMaterial = new BABYLON.StandardMaterial("skyBox", scene);
            skyboxMaterial.backFaceCulling = false;
            skyboxMaterial.reflectionTexture = new BABYLON.CubeTexture("textures/skybox", scene);
            skyboxMaterial.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE;
            skyboxMaterial.diffuseColor = new BABYLON.Color3(0, 0, 0);
            skyboxMaterial.specularColor = new BABYLON.Color3(0, 0, 0);
            skybox.material = skyboxMaterial;


           var myColor = BABYLON.Color3.Blue();
           var line03_position = BABYLON.Vector3(0,0,0);
           var line01_position = BABYLON.Vector3(0,0,0);
           var line17_position = BABYLON.Vector3(0,0,0);
           var line26_position = BABYLON.Vector3(0,0,0);

           
           console.log("position:"+line03_position);
           // Initialize GizmoManager
            var gizmoManager = new BABYLON.GizmoManager(scene)
            BABYLON.SceneLoader.Append("./asset/", "abc2.gltf", scene, function (scene) {
            
                //坐场
                line03 = scene.getMeshByName("Line03");
                line03_position = line03.position;
               
                Line03Mat = new BABYLON.StandardMaterial("ground", scene);
                Line03Mat.diffuseColor = new BABYLON.Color3(0.4, 0.4,0.4);
                Line03Mat.specularColor = new BABYLON.Color3(0.4, 0.4, 0.4);
                Line03Mat.emissiveColor = BABYLON.Color3.Blue();
                
                line03.material = Line03Mat;

                //左护版
                line01 = scene.getMeshByName("Line01");
                line01_position = line01.position;
                Line01Mat = new BABYLON.StandardMaterial("ground", scene);
                Line01Mat.diffuseColor = new BABYLON.Color3(0.4, 0.4, 0.4);
                Line01Mat.specularColor = new BABYLON.Color3(0.4, 0.4, 0.4);
                Line01Mat.emissiveColor = BABYLON.Color3.Blue();
                line01.material = Line01Mat;

                //左护版
                //line05 = scene.getMeshByName("Line05");
               
               //Line05Mat = new BABYLON.StandardMaterial("ground", scene);
               //Line05Mat.diffuseColor = new BABYLON.Color3(0.4, 0.4, 0.4);
               //Line05Mat.specularColor = new BABYLON.Color3(0.4, 0.4, 0.4);
               //Line05Mat.emissiveColor = BABYLON.Color3.Blue();
               //line05.material = Line05Mat;


               //右腿
               line17 = scene.getMeshByName("Line17");
               line17_position = line17.position;
               Line17Mat = new BABYLON.StandardMaterial("ground", scene);
               Line17Mat.diffuseColor = new BABYLON.Color3(0.4, 0.4, 0.4);
               Line17Mat.specularColor = new BABYLON.Color3(0.4, 0.4, 0.4);
               Line17Mat.emissiveColor = BABYLON.Color3.Blue();
               line17.material = Line17Mat;

               //line17.position.x =1;

                //右腿
                line26 = scene.getMeshByName("Cylinder56");
                line26_position = line26.position;
                Line26Mat = new BABYLON.StandardMaterial("ground", scene);
                Line26Mat.diffuseColor = new BABYLON.Color3(0.4, 0.4, 0.4);
                Line26Mat.specularColor = new BABYLON.Color3(0.4, 0.4, 0.4);
                Line26Mat.emissiveColor = BABYLON.Color3.Blue();
                line26.material = Line26Mat;
                
                //枪
                tube15 = scene.getMeshByName("Tube15");
                tube15_position = tube15.position;
                Tube15Mat = new BABYLON.StandardMaterial("ground", scene);
                Tube15Mat.diffuseColor = new BABYLON.Color3(0.4, 0.4, 0.4);
                Tube15Mat.specularColor = new BABYLON.Color3(0.4, 0.4, 0.4);
                Tube15Mat.emissiveColor = BABYLON.Color3.Blue();
                tube15.material = Tube15Mat;

                root = scene.getMeshByName("__root__");
               
                //console.log("abccc");
                //console.log(scene);
                //root.addRotation(0.01, 0, 0);

                

              

//gizmoManager.boundingBoxGizmoEnabled=true
// Restrict gizmos to only spheres
gizmoManager.attachableMeshes =[line03,line01,tube15,line26,line17];
// Toggle gizmos with keyboard buttons
document.onkeydown = (e)=>{
    if(e.key == 'w'){
        gizmoManager.positionGizmoEnabled = !gizmoManager.positionGizmoEnabled
    }
    if(e.key == 'e'){
        gizmoManager.rotationGizmoEnabled = !gizmoManager.rotationGizmoEnabled
    }
    if(e.key == 'r'){
        gizmoManager.scaleGizmoEnabled = !gizmoManager.scaleGizmoEnabled
    }
    if(e.key == 'q'){
        gizmoManager.boundingBoxGizmoEnabled = !gizmoManager.boundingBoxGizmoEnabled
    }
}
var oldMeth = null;
                // On pick interpolations
var prepareButton = function (mesh, color,strss) {
    //var goToColorAction = new BABYLON.InterpolateValueAction(BABYLON.ActionManager.OnPickTrigger, light, "diffuse", color, 1000, null, true);
   
    mesh.actionManager = new BABYLON.ActionManager(scene);
   
    // mesh.actionManager.registerAction(new BABYLON.SetValueAction(BABYLON.ActionManager.OnPointerOutTrigger, mesh.material, "emissiveColor", mesh.material.emissiveColor));
    mesh.actionManager.registerAction(new BABYLON.SetValueAction(BABYLON.ActionManager.OnPickTrigger, mesh.material, "emissiveColor", BABYLON.Color3.Red()));
   // mesh.actionManager.registerAction(new BABYLON.SetValueAction(BABYLON.ActionManager.OnPickTrigger, mesh.material, "emissiveColor", BABYLON.Color3.Yellow()));
   mesh.actionManager.registerAction(new BABYLON.InterpolateValueAction(BABYLON.ActionManager.OnPointerOutTrigger, mesh, "scaling", new BABYLON.Vector3(0.38, 0.38, 0.38), 100));
mesh.actionManager.registerAction(new BABYLON.InterpolateValueAction(BABYLON.ActionManager.OnPointerOverTrigger, mesh, "scaling", new BABYLON.Vector3(0.4, 0.4, 0.4), 100));
//mesh.actionManager.registerAction(new BABYLON.SetValueAction(BABYLON.ActionManager.OnPickTrigger, mesh.material, "wireframe", true))
mesh.actionManager.registerAction(
    new BABYLON.ExecuteCodeAction(
        {
            trigger:BABYLON.ActionManager.OnPickTrigger,
            parameter:""
        },
        function(){ 
            document.getElementById("show").innerHTML=strss;
            console.log(oldMeth);
            console.log(mesh);
            if(oldMeth != null && oldMeth.id != mesh.id){
                oldMeth.material.emissiveColor=  myColor;
            }
            oldMeth = mesh;
           // mesh.material.emissiveColor= BABYLON.Color3.Red()
            //mesh.material.emissiveColor = myColor;
            //console.log(mesh.material.emissiveColor);
            //mesh.material = BABYLON.Color3.Yellow()
            //a.innerHTML ="这里是坐长的位置,可以坐人的." 
            }
    )
);   
}
var prepareButton2 = function (mesh, color,strss) {
    //var goToColorAction = new BABYLON.InterpolateValueAction(BABYLON.ActionManager.OnPickTrigger, light, "diffuse", color, 1000, null, true);

    mesh.actionManager = new BABYLON.ActionManager(scene);
   
     mesh.actionManager.registerAction(new BABYLON.SetValueAction(BABYLON.ActionManager.OnPointerOutTrigger, mesh.material, "emissiveColor", mesh.material.emissiveColor));
    mesh.actionManager.registerAction(new BABYLON.SetValueAction(BABYLON.ActionManager.OnPointerOverTrigger, mesh.material, "emissiveColor", BABYLON.Color3.Red()));
   mesh.actionManager.registerAction(new BABYLON.InterpolateValueAction(BABYLON.ActionManager.OnPointerOutTrigger, mesh, "scaling", new BABYLON.Vector3(1,1, 1), 100));
mesh.actionManager.registerAction(new BABYLON.InterpolateValueAction(BABYLON.ActionManager.OnPointerOverTrigger, mesh, "scaling", new BABYLON.Vector3(1, 1, 1), 100));

mesh.actionManager.registerAction(
    new BABYLON.ExecuteCodeAction(
        {
            trigger:BABYLON.ActionManager.OnPickTrigger,
            parameter:""
        },
        function(){ 
            document.getElementById("show").innerHTML=strss;
            //a.innerHTML ="这里是坐长的位置,可以坐人的." 
            }
    )
);   
}

prepareButton(line03, BABYLON.Color3.Blue(),`<font size="20">坐舱：</font></br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;又叫驾驶舱（Cockpit）是操作员控制机器人的座舱，通常位于前端。除了早期的，如今大部分机器人的驾驶舱采用密闭式的设计。机器人驾驶舱内一般安装有各类控制系统。 驾驶舱是机器人的首脑元件，为太空船里下令及控制的中心。它是设计用来尽量让驾驶员感到操控舒适，并包含所有先进导航及各项操控的系统，就如同其他提供居住人员所有必需品的组件是一样重要的。</h2>`);
prepareButton(line01, BABYLON.Color3.Blue(),`<font size="20">铠甲:</font><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;机械外骨骼或称动力外骨骼（Powered exoskeleton），是一种由钢铁的框架构成并且可让人穿上的机器装置，这个装备可以提供额外能量来供四肢运动。别称：强化服、动力服（Power Suit）、动力装甲（Power armor或Powered armor）、Exoframe、Hardsuit或Exosuit等。凭借这套“服装”，人类就可以成为所谓的“铁人”。
<br/><br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;动力外骨骼更倾向于军用，除了能够增强人体能力的这一基本功能外，还要具有良好的防护性、对复杂环境的适应性以及辅助火力、通信、侦查支持等军用功能。
<br/><br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;动力服是设计成用来保护穿戴者的，例如为了保护士兵或建筑工而设计，或设计用来进行救援身处险境的人员上。广泛一些的用途则是用来做为义肢与帮助老弱者行动。其它的用途则是用来进行救援行动，就像在一栋要倒塌的建筑物里，这个装置可以提供给工人很大的力量来举起重物，同时保护它不被落下的碎石砸伤。在日本，有银行为需常搬运沉重钞票及硬币的员工配备外骨骼，以降低身体负担。`);
//prepareButton(line05, BABYLON.Color3.Blue(),"右护版");
prepareButton(line17, BABYLON.Color3.Blue(),`<font size="20">左脚:</font>
<br><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;用激光器作为辐射源的雷达。激光雷达是激光技术与雷达技术相结合的产物 。由发射机 、天线 、接收机 、跟踪架及信息处理等部分组成。发射机是各种形式的激光器，如二氧化碳激光器、掺钕钇铝石榴石激光器、半导体激光器及波长可调谐的固体激光器等；天线是光学望远镜；接收机采用各种形式的光电探测器，如光电倍增管、半导体光电二极管、雪崩光电二极管、红外和可见光多元探测器件等。激光雷达采用脉冲或连续波2种工作方式，探测方法分直接探测与外差探测。
<br><img src='./img/2.jpg' height='400'>`);
prepareButton(line26, BABYLON.Color3.Blue(),`<font size="20">机器关节:</font><br/><br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;机器人关节驱动器是一种集电液伺服阀及摆动缸于一体的液压或气动装置。关节机器人常见的有协作机器人（六轴、七轴）、外骨骼机器人、四足、双足、手术机器人等，里面用的东西基本都包含力矩电机、编码器、减速器、驱动器等，有的可能会用到抱闸、力矩传感器。但是每个应用匹配的方案不一样，用的产品也是多种多样。<br/><img src='./img/4.jpg'>`);
prepareButton(tube15, BABYLON.Color3.Blue(),`<p class='p13'><font size="20">机枪:</font><br/><br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;机枪（Machine gun） 一种带有枪架或枪座，能实现连发射击的自动枪械。世界第一挺机枪是个叫伐商的比利时工程师（曾是拿破伦手下的上尉）于1851年设计的。该枪曾在1870、1871年的普法战争中用过。而普遍观点认为，现代机枪的鼻祖是加特林多管式机枪。1862年，由美国人理查德·杰丹·加特林发明，这种枪有几个枪筒，可以轮转。1883年，美国人海尔曼·S·马克沁进行革新，机枪变为单枪筒，利用后坐力，使上膛、射击和退弹能同时完成，枪身用枪筒上的水套降温，每分钟可射击650次，名为马克沁机枪.<br/></p><video src='a.mp4' controls='controls'></video> `);

var d1 =  new Date();
var n_end= d1.getTime();
console.log("n_end:"+n_end);
console.log(n_end - n_Begin);

sleep(n_Begin,n_end);

engine.hideLoadingUI();
          
            });
            
           

            //GUI

            // Another GUI on the right
            var advancedTexture = BABYLON.GUI.AdvancedDynamicTexture.CreateFullscreenUI("UI");
                advancedTexture.layer.layerMask = 2;

                var panel3 = new BABYLON.GUI.StackPanel();
                panel3.width = "800px";
                panel3.fontSize = "30px";
                panel3.horizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_RIGHT;
                panel3.verticalAlignment = BABYLON.GUI.Control.VERTICAL_ALIGNMENT_TOP;
                advancedTexture.addControl(panel3);


            var button1 = BABYLON.GUI.Button.CreateSimpleButton("but1", "旋 转");
            button1.width = 0.2;
            button1.height = "80px";
            button1.color = "white";
            button1.cornerRadius = 20;
            button1.background = "green";
            button1.horizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_RIGHT;
            //button1.verticalAlignment = BABYLON.GUI.Control.VERTICAL_ALIGNMENT_TOP;
            
            //button1.centerY=5;
            //console.log(button1);
            //button1.position.x = 300;
            //button1.position.y = 5;
            

            var aaab = false;
            button1.onPointerUpObservable.add(function() {
           // circle.scaleX += 0.1;
                if(aaab== false){
                    scene.registerBeforeRender(function(){
                    root.addRotation(0.00, 0.008, 0);
                    button1.textBlock.text = "停 止";
                    aaab = true;
                    button1.background = "red";
                    });
                }else{
                    scene.registerBeforeRender(function(){
                    root.addRotation(0.00, -0.008, 0);
                    button1.textBlock.text = "旋 转";
                    aaab = false;
                    button1.background = "green";
                    });
                }
            });

           

            var button3 = BABYLON.GUI.Button.CreateSimpleButton("but2", "展 开");
            button3.width = 0.2;
            button3.height = "80px";
            button3.color = "white";
            button3.cornerRadius = 20;
            button3.background = "green";
            var bob = false;
            button3.horizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_RIGHT;
            button3.verticalAlignment = BABYLON.GUI.Control.VERTICAL_ALIGNMENT_TOP;
            


                    button3.onPointerUpObservable.add(function() {
           // circle.scaleX += 0.1;
                //gizmoManager.positionGizmoEnabled = !gizmoManager.positionGizmoEnabled
                if(bob== false){
                    bob = true;
                    button3.textBlock.text = "合 体";

                    button3.background = "red";
                    
                    var animationBox = new BABYLON.Animation("tutoAnimation", "position", 30, BABYLON.Animation.ANIMATIONTYPE_VECTOR3,
                                                                BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT);
                                                                // Animation keys
                    var keys = [];
                    
                    keys.push({
                        frame: 0,
                        value: line03_position
                    });

                    keys.push({
                        frame: 20,
                        value: new BABYLON.Vector3(line03_position.x+60,line03_position.y,line03_position.z) 
                    });

                    animationBox.setKeys(keys);

                    line03.animations.push(animationBox); //中间坐舱
                    //scene.beginAnimation(line03, 0, 100, false);

                    //左护版
                    var animationBox2 = new BABYLON.Animation("Animation2", "position", 30, BABYLON.Animation.ANIMATIONTYPE_VECTOR3,
                                                                BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT);
                                                                // Animation keys
                    var keys1 = [];

                    keys1.push({
                        frame: 0,
                        value: line01_position
                    });

                    keys1.push({
                        frame: 20,
                        value: new BABYLON.Vector3(line01_position.x-40,line01_position.y,line01_position.z) 
                    });

                    animationBox2.setKeys(keys1);

                    line01.animations.push(animationBox2); //中间坐舱
                    //scene.beginAnimation(line01, 0, 100, true);


                    //左脚
                    var animationBox3 = new BABYLON.Animation("animationBox3", "position", 30, BABYLON.Animation.ANIMATIONTYPE_VECTOR3,
                                                                BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT);
                                                                // Animation keys
                    var keys2 = [];

                    keys2.push({
                        frame: 0,
                        value: line17_position
                    });

                    keys2.push({
                        frame: 20,
                        value:  new BABYLON.Vector3(line17_position.x-50,line17_position.y,line17_position.z) 
                    });

                    animationBox3.setKeys(keys2);

                    line17.animations.push(animationBox3); //中间坐舱
                    //scene.beginAnimation(line17, 0, 100, true);

                    //右脚
                    var animationBox4 = new BABYLON.Animation("animationBox4", "position", 30, BABYLON.Animation.ANIMATIONTYPE_VECTOR3,
                                                                BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT);
                                                                // Animation keys
                    var keys4 = [];

                    keys4.push({
                        frame: 0,
                        value: line26_position
                    });

                    keys4.push({
                        frame: 20,
                        value:  new BABYLON.Vector3(line26_position.x+50,line26_position.y,line26_position.z) 
                    });

                    animationBox4.setKeys(keys4);

                    line26.animations.push(animationBox4); //中间坐舱
                    //scene.beginAnimation(line26, 0, 100, true);


                    //枪
                    var animationBox5 = new BABYLON.Animation("animationBox5", "position", 30, BABYLON.Animation.ANIMATIONTYPE_VECTOR3,
                                                                BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT);
                                                                // Animation keys
                    var keys5 = [];

                    keys5.push({
                        frame: 0,
                        value: new BABYLON.Vector3(-23,0,-47.5)
                    });

                    keys5.push({
                        frame: 20,
                        value:new BABYLON.Vector3(-2,0,-90)
                    });

                    animationBox5.setKeys(keys5);

                    tube15.animations.push(animationBox5); //中间坐舱
                    //scene.beginAnimation(tube15, 0, 100, true);



                    setTimeout(async () => {
                    var anim1 = scene.beginAnimation(line01, 0, 100, false);
                    var anim2 = scene.beginAnimation(line03, 0, 100, false);
                    var anim3 = scene.beginAnimation(line17, 0, 100, false);
                    var anim4 = scene.beginAnimation(line26, 0, 100, false);
                    var anim5 = scene.beginAnimation(tube15, 0, 100, false);
                        console.log("ddd");
                    //await anim1.waitAsync();
                    //await anim2.waitAsync();
                    //await anim3.waitAsync();
                    //await anim4.waitAsync();
                    await anim5.waitAsync();
                    console.log("dd33d");
                    scene.stopAnimation(line01);
                    scene.stopAnimation(line03);
                    scene.stopAnimation(line17);
                    scene.stopAnimation(line26);
                    scene.stopAnimation(tube15);
                    });


                }else{
                    bob = false;
                    button3.background = "green";
                    var animationBox = new BABYLON.Animation("tutoAnimation", "position", 30, BABYLON.Animation.ANIMATIONTYPE_VECTOR3,
                                                                BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT);
                                                                // Animation keys
                    var keys = [];

                    keys.push({
                        frame: 0,
                        value: new BABYLON.Vector3(line03_position.x-60,line03_position.y,line03_position.z) 
                    });

                    keys.push({
                        frame: 20,
                        value: line03_position 
                    });

                    animationBox.setKeys(keys);

                    line03.animations.push(animationBox); //中间坐舱
                    //scene.beginAnimation(line03, 0, 100, true);
                    
                    //左护版
                    var animationBox2 = new BABYLON.Animation("Animation2", "position", 30, BABYLON.Animation.ANIMATIONTYPE_VECTOR3,
                                                                BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT);
                                                                // Animation keys
                    var keys1 = [];

                    keys1.push({
                        frame: 0,
                        value: new BABYLON.Vector3(line01_position.x+40,line01_position.y,line01_position.z) 
                    });

                    keys1.push({
                        frame: 20,
                        value:line01_position
                    });

                    animationBox2.setKeys(keys1);

                    line01.animations.push(animationBox2); //中间坐舱
                    //scene.beginAnimation(line01, 0, 100, true);


                    //左脚
                    var animationBox3 = new BABYLON.Animation("animationBox3", "position", 30, BABYLON.Animation.ANIMATIONTYPE_VECTOR3,
                                                                BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT);
                                                                // Animation keys
                    var keys2 = [];

                    keys2.push({
                        frame: 0,
                        value: new BABYLON.Vector3(line17_position.x+50,line17_position.y,line17_position.z) 
                    });

                    keys2.push({
                        frame: 20,
                        value:line17_position
                    });

                    animationBox3.setKeys(keys2);

                    line17.animations.push(animationBox3); //中间坐舱
                   // scene.beginAnimation(line17, 0, 100, true);

                    //右脚
                    var animationBox4 = new BABYLON.Animation("animationBox4", "position", 30, BABYLON.Animation.ANIMATIONTYPE_VECTOR3,
                                                                BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT);
                                                                // Animation keys
                    var keys4 = [];

                    keys4.push({
                        frame: 0,
                        value: new BABYLON.Vector3(line26_position.x-50,line26_position.y,line26_position.z) 
                    });

                    keys4.push({
                        frame: 20,
                        value: line26_position
                    });

                    animationBox4.setKeys(keys4);

                    line26.animations.push(animationBox4); //中间坐舱
                    //scene.beginAnimation(line26, 0, 100, true);

                    //枪
                    var animationBox5 = new BABYLON.Animation("animationBox5", "position", 30, BABYLON.Animation.ANIMATIONTYPE_VECTOR3,
                                                                BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT);
                                                                // Animation keys
                    var keys5 = [];

                    keys5.push({
                        frame: 0,
                        value:new BABYLON.Vector3(-2,0,-90)
                        
                    });

                    keys5.push({
                        frame: 20,
                        value: new BABYLON.Vector3(-23,0,-47.5)
                    });

                    animationBox5.setKeys(keys5);

                    tube15.animations.push(animationBox5); //中间坐舱
                   
                    button3.textBlock.text = "展 开";

                    setTimeout(async () => {
                    var anim1 = scene.beginAnimation(line01, 0, 100, false);
                    var anim2 = scene.beginAnimation(line03, 0, 100, false);
                    var anim3 = scene.beginAnimation(line17, 0, 100, false);
                    var anim4 = scene.beginAnimation(line26, 0, 100, false);
                    var anim5 = scene.beginAnimation(tube15, 0, 100, false);
                        console.log("ddd");
                    await anim1.waitAsync();
                    await anim2.waitAsync();
                    await anim3.waitAsync();
                    await anim4.waitAsync();
                    await anim5.waitAsync();
                    console.log("dd33d");
                    scene.stopAnimation(line01);
                    scene.stopAnimation(line03);
                    scene.stopAnimation(line17);
                    scene.stopAnimation(line26);
                    scene.stopAnimation(tube15);
                    });

                    
                }
            });

            var button2 = BABYLON.GUI.Button.CreateSimpleButton("but2", "拆 解");
            button2.width =0.2;
            button2.height = "80px";
            button2.color = "white";
            button2.cornerRadius = 20;
            button2.background = "green";
           
            button2.horizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_RIGHT;
            button2.verticalAlignment = BABYLON.GUI.Control.VERTICAL_ALIGNMENT_TOP;

            var selectOne = false;

            button2.onPointerUpObservable.add(function() {
           // circle.scaleX += 0.1;
                gizmoManager.positionGizmoEnabled = !gizmoManager.positionGizmoEnabled
                if(selectOne== false){
                    //scene.stopAnimation(line01);
                    //scene.stopAnimation(line03);
                    //scene.stopAnimation(line17);
                    //scene.stopAnimation(line26);
                    //scene.stopAnimation(tube15);

                    selectOne = true;
                    button2.background = "red";
                    button2.textBlock.text = "取 消";
                }else{
                    //window.location.reload(true);

                    selectOne = false;
                    button2.background = "green";
                    button2.textBlock.text = "拆 解";
                }
            });

            var button4 = BABYLON.GUI.Button.CreateSimpleButton("but4", "还 原");
            //button4.fontSize = "26px";
            button4.width = 0.2;
            button4.height = "80px";
            button4.color = "white";
            button4.cornerRadius = 20;
            button4.background = "green";
            button4.horizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_RIGHT;
            button4.verticalAlignment = BABYLON.GUI.Control.VERTICAL_ALIGNMENT_TOP;
            button4.onPointerUpObservable.add(function() {
                window.location.reload(true);
            });
           
           
            panel3.addControl(button1);
            
            panel3.addControl(button3);
            panel3.addControl(button2);
            panel3.addControl(button4);
            return scene;
        }

        // call the createScene function
        var scene = createScene();
        //var a = scene.getElementById("__root");
        // run the render loop
        
       



/**/

        engine.runRenderLoop(function(){
            scene.render();
        });
        var abc1 = scene.getMeshByName("plane");
       
        window.addEventListener('resize', function(){
            engine.resize();
        });
    });