You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
434 lines
13 KiB
434 lines
13 KiB
// 从这里开始
|
|
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();
|
|
});
|