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

// 从这里开始
var h1 = null;
var oldtransformNodex = null;
var drag = null;
var notmoveGroup = null;
var movedGroup = null;

var movesingle = false;

BABYLON.DefaultLoadingScreen.prototype.displayLoadingUI = function() {
  if (document.getElementById("customLoadingScreenDiv")) {
    document.getElementById("customLoadingScreenDiv").style.display = "initial";

    return;
  }
  this._loadingDiv = document.createElement("div");
  //this._loadingDiv.style.height = '1750px';
  this._loadingDiv.id = "customLoadingScreenDiv";

  thecss = "lohingifpc";
  thecss2 = "zcpc";

  this._loadingDiv.innerHTML =
    "<div class='oka'><div class='" +
    thecss +
    "'><image src='./logok.gif' class='jiazaiimg'/></div><div class='" +
    thecss2 +
    "'>由 <image class='feitimg' src='./img/yxlogo.png'/> 阅行客 提供技术支持!</div></div>";

  this._resizeLoadingUI();
  window.addEventListener("resize", this._resizeLoadingUI);
  document.body.appendChild(this._loadingDiv);
};

var movebyName = function(nodeName) {
  var x = scene.getTransformNodeByName(nodeName);
  moveTrans(x);
};

var moveTrans = function(move_transformNode) {
  console.log("选中")
  console.log(move_transformNode.name);

  if (movesingle == false) {
    movesingle = true;
    var tempstr = move_transformNode.name.replace("档案柜", "");
    var tempNum = parseInt(tempstr);
    if (move_transformNode.movex == "false") {
      for (var MoveNum = tempNum - 1; MoveNum >= 0; MoveNum--) {
        var tempNode = notmoveGroup[MoveNum];
        
        if (tempNode.movex == "false") {
          // console.log(tempNode.name);
          // console.log(tempNode.movex);
          const frameRate = 10;

          const xSlide = new BABYLON.Animation(
            "xSlide",
            "position.y",
            frameRate,
            BABYLON.Animation.ANIMATIONTYPE_FLOAT,
            BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT
          );

          const keyFrames = [];

          keyFrames.push({
            frame: 0,
            value: tempNode.position.y
          });

          keyFrames.push({
            frame: frameRate,
            value: tempNode.position.y - 653
          });

          xSlide.setKeys(keyFrames);

          tempNode.animations.push(xSlide);

          scene.beginAnimation(tempNode, 0, frameRate, false);
          tempNode.movex = "true";
        }
      }
    } else {
      for (var MoveNum = tempNum - 1; MoveNum <= 9; MoveNum++) {
        var tempNode = notmoveGroup[MoveNum];
        
        if (tempNode.movex == "true") {
          // console.log(tempNode.name);
          // console.log(tempNode.movex);

          const frameRate = 10;

          const xSlide = new BABYLON.Animation(
            "xSlide",
            "position.y",
            frameRate,
            BABYLON.Animation.ANIMATIONTYPE_FLOAT,
            BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT
          );

          const keyFrames = [];

          keyFrames.push({
            frame: 0,
            value: tempNode.position.y
          });

          keyFrames.push({
            frame: frameRate,
            value: tempNode.position.y + 653
          });

          xSlide.setKeys(keyFrames);

          tempNode.animations.push(xSlide);

          scene.beginAnimation(tempNode, 0, frameRate, false);
          tempNode.movex = "false";
        }
      }
    }

    setTimeout(function() {
      movesingle = false;
    }, 2000);
  }
};

BABYLON.DefaultLoadingScreen.prototype.hideLoadingUI = function() {
  document.getElementById("customLoadingScreenDiv").style.display = "none";
  document.getElementById("customLoadingScreenDiv_first").style.display =
    "none";
  document.title = "密集架";

  scene.getMaterialByName("材质.001").alpha = 0.4;
  //地面
  scene.getMeshByName("地面").material.bumpTexture = null;
  scene.getMeshByName("地面").material.metallic = 0;
  scene.getMeshByName("地面").material.roughness = 1;

  //箱体去掉反光
  scene.getMaterialByName("材质.004").metallic = 0;
  scene.getMaterialByName("材质.004").roughness = 1;

  notmoveGroup = [
    scene.getTransformNodeByName("档案柜01"),
    scene.getTransformNodeByName("档案柜02"),
    scene.getTransformNodeByName("档案柜03"),
    scene.getTransformNodeByName("档案柜04"),
    scene.getTransformNodeByName("档案柜05"),
    scene.getTransformNodeByName("档案柜06"),
    scene.getTransformNodeByName("档案柜07"),
    scene.getTransformNodeByName("档案柜08"),
    scene.getTransformNodeByName("档案柜09"),
    scene.getTransformNodeByName("档案柜10")
  ];

  notmoveGroup.forEach(function(item, index, arr) {
    if (item.name == "档案柜10") {
      item.movex = "NotMove"; //设置movex
    } else {
      item.movex = "false"; //设置movex
    }
  });

  h1 = new BABYLON.HighlightLayer("hl1", scene);
  var prepareGroupButton = function(transformNodex, color) {
    var mesheses = null;
    if (transformNodex.getClassName() == "TransformNode") {
      mesheses = transformNodex.getChildMeshes(false);
    } else {
      mesheses = [];
      mesheses.push(transformNodex);
    }

    for (var i = 0; i < mesheses.length; i++) {
      mesheses[i].actionManager = new BABYLON.ActionManager(scene);
      var theScaling = mesheses[i].scaling;
      if (true) {
        try {
          mesheses[i].actionManager.registerAction(
            new BABYLON.InterpolateValueAction(
              BABYLON.ActionManager.OnPointerOutTrigger,
              mesheses[i],
              "scaling",
              new BABYLON.Vector3(theScaling.x, theScaling.y, theScaling.z),
              100
            )
          );
          mesheses[i].actionManager.registerAction(
            new BABYLON.InterpolateValueAction(
              BABYLON.ActionManager.OnPointerOverTrigger,
              mesheses[i],
              "scaling",
              new BABYLON.Vector3(
                theScaling.x * 1.01,
                theScaling.y * 1.01,
                theScaling.z * 1.01
              ),
              100
            )
          );
        } catch (error) {
          //alert(error)
        }
      }

      mesheses[i].actionManager.registerAction(
        new BABYLON.ExecuteCodeAction(
          {
            trigger: BABYLON.ActionManager.OnPickTrigger,
            parameter: ""
          },
          function() {
            if (oldtransformNodex != null) {
              if (transformNodex.name == oldtransformNodex.name) {
                //移动：
                moveTrans(transformNodex);
                console.log('transformNodex')
                console.log(transformNodex.movex)
                console.log(transformNodex.name)
                console.log("移动")
                console.log(oldtransformNodex.name);
              }
            }
            if (true) {
              try {
                if (oldtransformNodex != null) {
                  oldtransformNodex.removeBehavior(drag);
                  var mesheses2 = null;
                  if (oldtransformNodex.getClassName() == "TransformNode") {
                    mesheses2 = oldtransformNodex.getChildMeshes(false);
                  } else {
                    mesheses2 = [];
                    mesheses2.push(oldtransformNodex);
                  }
                  for (var i = 0; i < mesheses2.length; i++) {
                    try {
                      h1.removeMesh(mesheses2[i]);
                    } catch (error) {
                      // alert(error)
                    }
                  }
                }

                oldtransformNodex = transformNodex;
                //transformNodex.addBehavior(drag);
                var mesheses3 = null;
                if (transformNodex.getClassName() == "TransformNode") {
                  mesheses3 = transformNodex.getChildMeshes(false);
                } else {
                  mesheses3 = [];
                  mesheses3.push(transformNodex);
                }
                for (var i = 0; i < mesheses3.length; i++) {
                  try {
                    h1.addMesh(mesheses3[i], BABYLON.Color3.White());
                  } catch (error) {
                    // alert(error)
                  }
                }
              } catch (error) {
                // alert(error)
              }
            }
          }
        )
      );
    }
  };

  var dag1 = scene.getTransformNodeByName("档案柜01");
  var dag2 = scene.getTransformNodeByName("档案柜02");
  var dag3 = scene.getTransformNodeByName("档案柜03");
  var dag4 = scene.getTransformNodeByName("档案柜04");
  var dag5 = scene.getTransformNodeByName("档案柜05");
  var dag6 = scene.getTransformNodeByName("档案柜06");
  var dag7 = scene.getTransformNodeByName("档案柜07");
  var dag8 = scene.getTransformNodeByName("档案柜08");
  var dag9 = scene.getTransformNodeByName("档案柜09");
  var dag10 = scene.getTransformNodeByName("档案柜10");

  prepareGroupButton(dag1, BABYLON.Color3(1, 0, 0));
  prepareGroupButton(dag2, BABYLON.Color3(1, 0, 0));
  prepareGroupButton(dag3, BABYLON.Color3(1, 0, 0));
  prepareGroupButton(dag4, BABYLON.Color3(1, 0, 0));
  prepareGroupButton(dag5, BABYLON.Color3(1, 0, 0));
  prepareGroupButton(dag6, BABYLON.Color3(1, 0, 0));
  prepareGroupButton(dag7, BABYLON.Color3(1, 0, 0));
  prepareGroupButton(dag8, BABYLON.Color3(1, 0, 0));
  prepareGroupButton(dag9, BABYLON.Color3(1, 0, 0));
  prepareGroupButton(dag10, BABYLON.Color3(1, 0, 0));
};
// createScene function that creates and return the scene
var createScene = function() {
  engine.displayLoadingUI();
  // 创建一个场景并返回
  var scene = new BABYLON.Scene(engine);
  //scene.debugLayer.show();
  // 创建一个弧形旋转摄像机
  var camera = new BABYLON.ArcRotateCamera(
    "Camera",
    0,
    0,
    5,
    new BABYLON.Vector3(0, -1, 0),
    scene
  );
  camera.setTarget(new BABYLON.Vector3(2, 4, 1));
  // 让摄像机控制画布.
  camera.attachControl(canvas, true);
  camera.lowerRadiusLimit = 2.0; // 这里是最大的位置，值越大，物体越小
  camera.upperRadiusLimit = 14;
  camera.radius = 16;
  camera.alpha = (Math.PI * -211.4) / 180;
  camera.beta = (Math.PI * 66) / 180;
  camera.inertia = 0.1; // 缩放的快慢
  camera.useAutoRotationBehavior = true; // 自动旋转

  camera.panningDistanceLimit = 2; //平移半径
  camera.panningInertia = 0;
  camera.autoTransitionRange = 1;
  camera.pinchToPanMaxDistance = 0.1;
  camera.pinchDeltaPercentage = 0.001;
  camera.useAutoRotationBehavior = false;

  scene.activeCamera = camera;
  scene.activeCamera.useInputToRestoreState = true;
  var camera1_status = scene.activeCamera.storeState();

  var assetsManager = new BABYLON.AssetsManager(scene);
  var meshTask = assetsManager.addMeshTask(
    "skull task",
    "",
    "asset/",
    "mjj.glb"
  );

  meshTask.onSuccess = function(task) {
    task.loadedMeshes[0].scaling = new BABYLON.Vector3(0.2, 0.2, -0.2);
    task.loadedMeshes[0].position = new BABYLON.Vector3(0.0, 3.952, 2.129);
  };
  meshTask.onError = function(task, message, exception) {
    console.log(message, exception);
  };

  var hdrTexture = new BABYLON.CubeTexture.CreateFromPrefilteredData(
    "textures/environmentSpecular.env",
    scene
  );
  scene.environmentTexture = hdrTexture;
  // 改变场景背景颜色 - 背景颜色opacity值设为0，达到透明背景的效果
  scene.clearColor = new BABYLON.Color4(0, 0, 0, 0);

  // renderCanvas.style.backgroundImage = 'url("./textures/' + "4" + '.jpg")';
  // renderCanvas.style.backgroundColor = 'yellow';

  assetsManager.load();

  drag = new BABYLON.PointerDragBehavior({
    dragPlaneNormal: new BABYLON.Vector3(0, 0, 1)
  });
  //drag.useObjectOrienationForDragging = false;

  drag.validateDrag = targetPosition => {
    console.log(targetPosition);
    if (targetPosition.x > 10.5 || targetPosition.x < -10.5) {
      return false;
    }
    if (targetPosition.z > 10.5 || targetPosition.z < -10.5) {
      return false;
    }
    if (oldtransformNodex != null) {
      return true;
    }
  };
  drag.onDragEndObservable.add(event => {
    console.log("dragEnd");
    //console.log(event);
    //console.log(line03_position)
  });

  //GUI
  h1 = new BABYLON.HighlightLayer("hl1", scene);
  var step = 0.1;
  var currentx = 1;
  scene.registerAfterRender(() => {
    h1.blurHorizontalSize = h1.blurVerticalSize + currentx;
    var a = scene.getMaterialByName("carpaint_baseRed");

    if (a != null) {
      if (a.albedoColor == b) {
        b = new BABYLON.Color3(0, 1, 0);
        a.albedoColor = b;
      }
    }

    if (currentx > 0.3) {
      step *= -1;
    }
    if (currentx < 0) {
      step *= -1;
    }
    currentx += step;
  });

  return scene;
};

// 创建画布
var canvas = document.getElementById("renderCanvas");
canvas.textAlign = "center"
canvas.textBaseline = "middle"
// 创建渲染引擎
var engine = new BABYLON.Engine(canvas, true, {
  stencil: true
});

// call the createScene function
var scene = createScene();
scene.autoClear = true;
scene.imageProcessingConfiguration.exposure = 1.0;
scene.imageProcessingConfiguration.contrast = 1;
scene.environmentIntensity = 1;
// 不停的渲染场景. runRenderLoop 是一个渲染循环
engine.runRenderLoop(function() {
  scene.render();
});

window.addEventListener("resize", function() {
  engine.resize();
});