feat: 添加天空和地面
This commit is contained in:
parent
2b98daca58
commit
ae7cf80c64
|
|
@ -1,6 +1,7 @@
|
|||
.DS_Store
|
||||
node_modules
|
||||
/dist
|
||||
.VSCodeCounter/
|
||||
|
||||
# local env files
|
||||
.env.local
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -115,8 +115,7 @@
|
|||
</div>
|
||||
<div class="dropdown">
|
||||
<div class="dropdown-item" v-for="(val, index) in sectionNames" :key="val" @click="handleSectionClick(val, index)"
|
||||
:class="{ active: activeSection === index }"
|
||||
>{{ val }}</div>
|
||||
:class="{ active: activeSection === index }">{{ val }}</div>
|
||||
</div>
|
||||
<div class="left_other animate__animated animate__backInLeft">
|
||||
<div class="panel">
|
||||
|
|
@ -153,6 +152,8 @@
|
|||
import * as echarts from "echarts";
|
||||
import * as BABYLON from "babylonjs"
|
||||
import * as BABYLON_GUI from "babylonjs-gui"
|
||||
import * as BABYLON_GRID from "@/utils/gridMaterial"
|
||||
import * as BABYLON_MATERIAL from "@/utils/babylonMaterial"
|
||||
import 'babylonjs-loaders';
|
||||
import 'animate.css';
|
||||
export default {
|
||||
|
|
@ -333,7 +334,9 @@ export default {
|
|||
left_other.style.width = '22%';
|
||||
right_other.style.position = 'absolute';
|
||||
right_other.style.width = '22%';
|
||||
model.style.height = (windowHeight - 50) + 'px';
|
||||
model.style.position = 'absolute';
|
||||
model.style.height = (windowHeight - 3) + 'px';
|
||||
model.style.top = 0
|
||||
var chartHeight = (windowHeight - 400) / 3 + 'px';
|
||||
var charts = document.getElementsByClassName('chart')
|
||||
for (var i = 0; i < charts.length; i++) {
|
||||
|
|
@ -353,6 +356,7 @@ export default {
|
|||
left_other.style.width = '100%';
|
||||
right_other.style.position = 'static';
|
||||
right_other.style.width = '100%';
|
||||
model.style.position = 'relative';
|
||||
model.style.height = chartHeight;
|
||||
var charts = document.getElementsByClassName('chart')
|
||||
for (var i = 0; i < charts.length; i++) {
|
||||
|
|
@ -405,10 +409,21 @@ export default {
|
|||
// Add your code here matching the playground format
|
||||
const createScene = function () {
|
||||
const scene = new BABYLON.Scene(engine);
|
||||
scene.clearColor = BABYLON.Color3(1, 0, 1);
|
||||
scene.clearColor = BABYLON.Color3.Black(); //BABYLON.Color3(1, 0, 1);
|
||||
const ground = BABYLON.MeshBuilder.CreateGround("ground", { width: 100, height: 100 });
|
||||
const groundMaterial = new BABYLON_GRID.GridMaterial("groundMaterial", scene);
|
||||
groundMaterial.majorUnitFrequency = 5;
|
||||
groundMaterial.minorUnitVisibility = 0.5;
|
||||
groundMaterial.gridRatio = 2;
|
||||
// groundMaterial.opacity = 0.99;
|
||||
ground.material = groundMaterial;
|
||||
ground.position.y = -0.1
|
||||
// const groundMat = new BABYLON.StandardMaterial("groundMat");
|
||||
// groundMat.diffuseTexture = new BABYLON.Texture("img/ground_big.jpg");
|
||||
// groundMat.diffuseTexture.hasAlpha = false;
|
||||
// groundMat.diffuseTexture.uScale = 15.0;//Repeat 5 times on the Vertical Axes
|
||||
// groundMat.diffuseTexture.vScale = 15.0;
|
||||
// groundMat.shadowLevel = 0.4;
|
||||
// const ground = BABYLON.MeshBuilder.CreateGround("ground", {width:40, height:40});
|
||||
// ground.material = groundMat;
|
||||
// ground.position.y = - 0.1
|
||||
|
|
@ -417,17 +432,72 @@ export default {
|
|||
// const backgroundImage = new BABYLON.Layer('', 'img/bj.png', scene, true);
|
||||
const camera = new BABYLON.ArcRotateCamera("camera", that.initialAlpha, that.initialBeta, that.initialRadius, new BABYLON.Vector3(0, 0, 1.2));
|
||||
that.initialTarget = camera.getTarget();
|
||||
camera.upperBetaLimit = Math.PI / 2.2; //无法移动到地面以下
|
||||
camera.upperBetaLimit = Math.PI / 2.3; //无法移动到地面以下
|
||||
camera.attachControl(canvas, true);
|
||||
camera.maxZ = 1000; // 调整适当的值
|
||||
// 相机限制
|
||||
camera.lowerRadiusLimit = 6;
|
||||
camera.upperRadiusLimit = 26;
|
||||
camera.upperRadiusLimit = 18;
|
||||
|
||||
// 灯光
|
||||
const light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(1, 1, 0));
|
||||
light.intensity = 1.6;
|
||||
|
||||
// skybox
|
||||
const skybox = BABYLON.MeshBuilder.CreateBox("skyBox", { size: 150 }, scene);
|
||||
var skyboxMaterial = new BABYLON_MATERIAL.SkyMaterial("skyMaterial", scene);
|
||||
skyboxMaterial.backFaceCulling = false;
|
||||
// const skyboxMaterial = new BABYLON.StandardMaterial("skyBox", scene);
|
||||
// skyboxMaterial.backFaceCulling = false;
|
||||
// skyboxMaterial.disableLighting = true;
|
||||
// skyboxMaterial.reflectionTexture = new BABYLON.CubeTexture("img/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;
|
||||
/*
|
||||
* Keys:
|
||||
* - 1: Day
|
||||
* - 2: Evening
|
||||
* - 3: Increase Luminance
|
||||
* - 4: Decrease Luminance
|
||||
* - 5: Increase Turbidity
|
||||
* - 6: Decrease Turbidity
|
||||
* - 7: Move horizon to -50
|
||||
* - 8: Restore horizon to 0
|
||||
*/
|
||||
var setSkyConfig = function (property, from, to) {
|
||||
var keys = [
|
||||
{ frame: 0, value: from },
|
||||
{ frame: 100, value: to }
|
||||
];
|
||||
|
||||
var animation = new BABYLON.Animation("animation", property, 100, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT);
|
||||
animation.setKeys(keys);
|
||||
|
||||
scene.stopAnimation(skybox);
|
||||
scene.beginDirectAnimation(skybox, [animation], 0, 100, false, 1);
|
||||
};
|
||||
|
||||
window.addEventListener("keydown", function (evt) {
|
||||
switch (evt.keyCode) {
|
||||
case 49: setSkyConfig("material.inclination", skyboxMaterial.inclination, 0); break; // 1
|
||||
case 50: setSkyConfig("material.inclination", skyboxMaterial.inclination, -0.5); break; // 2
|
||||
|
||||
case 51: setSkyConfig("material.luminance", skyboxMaterial.luminance, 0.1); break; // 3
|
||||
case 52: setSkyConfig("material.luminance", skyboxMaterial.luminance, 1.0); break; // 4
|
||||
|
||||
case 53: setSkyConfig("material.turbidity", skyboxMaterial.turbidity, 40); break; // 5
|
||||
case 54: setSkyConfig("material.turbidity", skyboxMaterial.turbidity, 5); break; // 6
|
||||
|
||||
case 55: setSkyConfig("material.cameraOffset.y", skyboxMaterial.cameraOffset.y, 50); break; // 7
|
||||
case 56: setSkyConfig("material.cameraOffset.y", skyboxMaterial.cameraOffset.y, 0); break; // 8
|
||||
default: break;
|
||||
}
|
||||
});
|
||||
|
||||
// Set to Day
|
||||
setSkyConfig("material.inclination", skyboxMaterial.inclination, 0);
|
||||
|
||||
// 全屏GUI
|
||||
const advancedTexture = BABYLON_GUI.AdvancedDynamicTexture.CreateFullscreenUI("myUI");
|
||||
|
|
@ -462,12 +532,12 @@ export default {
|
|||
}
|
||||
})
|
||||
|
||||
// 高亮显示mesh名区
|
||||
// 高亮显示mesh名
|
||||
const mesh_rect = new BABYLON_GUI.Rectangle('mesh_rect');
|
||||
mesh_rect.width = "80px";
|
||||
mesh_rect.height = "20px";
|
||||
mesh_rect.backgroundColor = 'black'
|
||||
mesh_rect.alpha = 0.8
|
||||
mesh_rect.background = 'orange'
|
||||
mesh_rect.alpha = 0.6
|
||||
mesh_rect.isVisible = false;
|
||||
advancedTexture.addControl(mesh_rect);
|
||||
|
||||
|
|
@ -502,6 +572,7 @@ export default {
|
|||
|
||||
rect1.linkWithMesh(mesh);
|
||||
rect1.linkOffsetY = -30;
|
||||
console.log(rect1)
|
||||
rect1.onPointerDownObservable.add(() => {
|
||||
var mesh = rect1.linkedMesh;
|
||||
if (camera.target != mesh.position) {
|
||||
|
|
@ -520,33 +591,32 @@ export default {
|
|||
}
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
// 创建一个数据展示层
|
||||
// 创建一个StackPanel，用于容纳多个文本控件
|
||||
// const data_view = new BABYLON_GUI.StackPanel(value + '_data_view');
|
||||
// data_view.width = '100px'; // StackPanel的宽度
|
||||
// data_view.bottom = rect1.bottom + 50 + 'px';
|
||||
// data_view.background = 'darkblue'
|
||||
// data_view.cornerRadius = 4;
|
||||
// // 创建多个文本控件，每个控件表示一行文本
|
||||
// const textLines = ["电耗: 123", "产量: 123"];
|
||||
const data_view = new BABYLON_GUI.StackPanel(value + '_data_view');
|
||||
data_view.width = '100px'; // StackPanel的宽度
|
||||
data_view.bottom = rect1.bottom + 50 + 'px';
|
||||
data_view.background = 'darkblue'
|
||||
data_view.cornerRadius = 4;
|
||||
// 创建多个文本控件，每个控件表示一行文本
|
||||
const textLines = ["电耗: 123", "产量: 123"];
|
||||
|
||||
// for (let i = 0; i < textLines.length; i++) {
|
||||
// let textLine = textLines[i];
|
||||
// const textA = new BABYLON_GUI.TextBlock();
|
||||
// textA.height = "20px"
|
||||
// textA.color = "white"
|
||||
// textA.text = textLine;
|
||||
// // text.fontSize = textLines[i].fontSize;
|
||||
for (let i = 0; i < textLines.length; i++) {
|
||||
let textLine = textLines[i];
|
||||
const textA = new BABYLON_GUI.TextBlock();
|
||||
textA.height = "20px"
|
||||
textA.color = "white"
|
||||
textA.text = textLine;
|
||||
// text.fontSize = textLines[i].fontSize;
|
||||
|
||||
// data_view.addControl(textA);
|
||||
// }
|
||||
data_view.addControl(textA);
|
||||
}
|
||||
|
||||
// // 将StackPanel添加到GUI系统中
|
||||
// advancedTexture.addControl(data_view);
|
||||
// data_view.linkWithMesh(mesh);
|
||||
// data_view.linkOffsetY = -80;
|
||||
// 将StackPanel添加到GUI系统中
|
||||
advancedTexture.addControl(data_view);
|
||||
data_view.linkWithMesh(mesh);
|
||||
data_view.linkOffsetY = -80;
|
||||
}
|
||||
}
|
||||
|
||||
engine.hideLoadingUI()
|
||||
|
|
@ -657,6 +727,8 @@ export default {
|
|||
}
|
||||
|
||||
header {
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
height: 50px;
|
||||
/* 调整头部高度 */
|
||||
background-image: url('/public/img/header.png');
|
||||
|
|
@ -667,9 +739,11 @@ header {
|
|||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.title_left {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.title {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
|
|
@ -677,6 +751,7 @@ header {
|
|||
font-size: 24px;
|
||||
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.title_right {
|
||||
flex: 1;
|
||||
font-size: 20px;
|
||||
|
|
@ -685,6 +760,7 @@ header {
|
|||
}
|
||||
|
||||
.model {
|
||||
top: 0;
|
||||
width: 100%;
|
||||
background-image: url('/public/img/bj.png');
|
||||
background-size: cover;
|
||||
|
|
@ -708,6 +784,7 @@ header {
|
|||
|
||||
.left_main,
|
||||
.right_main {
|
||||
z-index: 10;
|
||||
position: absolute;
|
||||
top: 40px;
|
||||
width: 20%;
|
||||
|
|
@ -780,6 +857,7 @@ header {
|
|||
width: 100%;
|
||||
height: 220px;
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
/* top: 20%;
|
||||
font-size: 18px;
|
||||
|
|
@ -817,7 +895,8 @@ header {
|
|||
margin: 0 0.1vw 0.1vw 0.1vw;
|
||||
}
|
||||
|
||||
.dropdown-item:hover, .dropdown-item.active{
|
||||
.dropdown-item:hover,
|
||||
.dropdown-item.active {
|
||||
/* background-color: #ddd; */
|
||||
width: 8.2vw;
|
||||
height: 3.5vw;
|
||||
|
|
@ -830,5 +909,4 @@ header {
|
|||
text-align: center;
|
||||
background: url(./../../../public/img/menu_active.png) no-repeat;
|
||||
background-size: 100%;
|
||||
}
|
||||
</style>
|
||||
}</style>
|
||||
Loading…
Reference in New Issue