278 lines
8.9 KiB
TypeScript
278 lines
8.9 KiB
TypeScript
import React, { useEffect, useRef, useState, useContext, useMemo } from "react";
|
|
import * as BABYLON from "@babylonjs/core";
|
|
import "@babylonjs/core/Debug/debugLayer";
|
|
import "@babylonjs/inspector";
|
|
import "@babylonjs/loaders/glTF";
|
|
import { GridMaterial } from "@babylonjs/materials/";
|
|
import {
|
|
Animatable,
|
|
HemisphericLight,
|
|
Mesh,
|
|
Observable,
|
|
Vector3,
|
|
} from "@babylonjs/core";
|
|
import { useAppSelector } from "../store/hooks";
|
|
import { EquStatusInterface, selectEquStatus } from "../store/EquStatusEntity";
|
|
import eqInfoIcon from "../assets/image/eqInfoIcon.png";
|
|
import axios from "axios";
|
|
|
|
const onEquObservable = new Observable();
|
|
|
|
const myStyle = {
|
|
width: "2635px",
|
|
height: "536px",
|
|
outline: "none",
|
|
};
|
|
interface EqSubListInterface {
|
|
eqName: string;
|
|
subList: string[];
|
|
}
|
|
function MybabylonJS() {
|
|
const EquStatus = useAppSelector(selectEquStatus);
|
|
const canvasRef = useRef(null);
|
|
onEquObservable.notifyObservers(EquStatus);
|
|
// const [selectedMeshName, setSelectedMeshName] = useState<string | null>(null);
|
|
const [eqSubList, setEqSubList] = useState<EqSubListInterface>();
|
|
|
|
// 使用 useRef 来存储当前加载的模型引用
|
|
const currentMeshesRef = useRef<Array<BABYLON.AbstractMesh>>([]);
|
|
useEffect(() => {
|
|
// 确保 canvas 引用存在
|
|
if (!canvasRef.current) return;
|
|
|
|
const canvas = canvasRef.current;
|
|
const engine = new BABYLON.Engine(canvas, true, {
|
|
preserveDrawingBuffer: true,
|
|
stencil: true,
|
|
});
|
|
|
|
const createScene = async function () {
|
|
// This creates a basic Babylon Scene object (non-mesh)
|
|
const scene = new BABYLON.Scene(engine);
|
|
scene.clearColor = new BABYLON.Color4(0, 0, 0, 0);
|
|
|
|
const baseLight = new HemisphericLight(
|
|
"hemiLight",
|
|
new Vector3(1, 1, 0),
|
|
scene
|
|
);
|
|
baseLight.intensity = 0.7;
|
|
// baseLight.diffuse = new BABYLON.Color3(1, 1, 1);
|
|
// baseLight.specular = new BABYLON.Color3(0.25, 0.25, 0.25);
|
|
// baseLight.groundColor = new BABYLON.Color3(0.5, 0.5, 0.5);
|
|
|
|
//add an arcRotateCamera to the scene
|
|
const camera = new BABYLON.ArcRotateCamera(
|
|
"camera",
|
|
-Math.PI / 2,
|
|
Math.PI / 2.9,
|
|
120,
|
|
new BABYLON.Vector3(0, 10, 0)
|
|
);
|
|
// console.log("camera", camera);
|
|
camera.lowerRadiusLimit = 10;
|
|
camera.upperRadiusLimit = 600;
|
|
camera.fov = 0.4;
|
|
|
|
// This attaches the camera to the canvas
|
|
camera.attachControl(canvas, true);
|
|
|
|
//创建一个材质
|
|
const newMt = new BABYLON.StandardMaterial("newMt");
|
|
newMt.diffuseColor = BABYLON.Color3.Blue();
|
|
|
|
const ground = BABYLON.MeshBuilder.CreateGround(
|
|
"ground",
|
|
{
|
|
width: 1000,
|
|
height: 1000,
|
|
subdivisions: 1,
|
|
},
|
|
scene
|
|
);
|
|
|
|
ground.scaling.x = 100;
|
|
ground.scaling.z = ground.scaling.x;
|
|
ground.isPickable = false;
|
|
|
|
let grid = new GridMaterial("grid", scene);
|
|
|
|
grid.majorUnitFrequency = 10;
|
|
grid.minorUnitVisibility = 0.3;
|
|
grid.gridRatio = 0.04;
|
|
grid.backFaceCulling = !1;
|
|
grid.mainColor = new BABYLON.Color3(1, 1, 1);
|
|
grid.lineColor = new BABYLON.Color3(1, 1, 1);
|
|
grid.opacity = 0;
|
|
grid.zOffset = 1;
|
|
// grid.opacityTexture = new BABYLON.Texture(
|
|
// "/public/png/backgroundGround.png",
|
|
// scene
|
|
// );
|
|
ground.material = grid;
|
|
|
|
let hl = new BABYLON.HighlightLayer("hl1", scene);
|
|
let hl2 = new BABYLON.HighlightLayer("hl2", scene);
|
|
|
|
// 定义一个函数来加载或重新加载模型
|
|
const loadOrReloadModel = async () => {
|
|
// 在加载新模型之前卸载已加载的模型
|
|
currentMeshesRef.current.forEach((mesh) => {
|
|
if (mesh && mesh.parent) {
|
|
scene.removeMesh(mesh, true);
|
|
}
|
|
});
|
|
currentMeshesRef.current = []; // 重置模型数组
|
|
try {
|
|
// 使用 ImportMeshAsync 加载新模型
|
|
var LOD0MESH = await BABYLON.SceneLoader.ImportMeshAsync(
|
|
"",
|
|
"/Line/",
|
|
"line.babylon",
|
|
scene
|
|
);
|
|
// 将新加载的模型添加到 currentMeshesRef 中
|
|
currentMeshesRef.current.push(...LOD0MESH.meshes);
|
|
|
|
// ...为新加载的模型设置交互逻辑
|
|
|
|
LOD0MESH.meshes.map((mesh) => {
|
|
mesh.isPickable = true;
|
|
mesh.actionManager = new BABYLON.ActionManager(scene);
|
|
//鼠标移动到物体上亮显
|
|
mesh.actionManager.registerAction(
|
|
new BABYLON.ExecuteCodeAction(
|
|
BABYLON.ActionManager.OnPointerOverTrigger,
|
|
() => {
|
|
// @ts-ignore
|
|
hl.addMesh(mesh, BABYLON.Color3.Green());
|
|
}
|
|
)
|
|
);
|
|
mesh.actionManager.registerAction(
|
|
new BABYLON.ExecuteCodeAction(
|
|
BABYLON.ActionManager.OnPointerOutTrigger,
|
|
() => {
|
|
// @ts-ignore
|
|
hl.removeMesh(mesh);
|
|
}
|
|
)
|
|
);
|
|
|
|
// mesh._scene.onPointerDown = async (event, _pickResult) => {
|
|
// const pickInfo = mesh._scene.pick(
|
|
// mesh._scene.pointerX,
|
|
// mesh._scene.pointerY
|
|
// );
|
|
|
|
// const clickedPosition = _pickResult.pickedPoint;
|
|
// //如果需要获取吗模型根节点，而不是模型中某个组件，请用一下方法
|
|
// // getRootNode(pickInfo.pickedMesh as BABYLON.Node) 如上篇文章getRootNode函数
|
|
// //判断是否是右键
|
|
// if (!(event.buttons === 1 && pickInfo.pickedMesh)) return;
|
|
// const MeshId = pickInfo.pickedMesh.metadata.tags;
|
|
// if (MeshId) {
|
|
// // setSelectedMeshName(pickInfo.pickedMesh.name);
|
|
// // axios.get("/wsconfig.json").then((r) => {
|
|
// // console.log(r.data.url)
|
|
// axios
|
|
// .post(
|
|
// "api/visual/DataCenter/equipmentSubstrateList",
|
|
// { id: MeshId }
|
|
// )
|
|
// .then((res) => {
|
|
// let obj = { eqName: "-", subList: [] };
|
|
// obj.eqName = res.data.data.eqName || "-";
|
|
// obj.subList = res.data.data.subList || [];
|
|
// setEqSubList(obj);
|
|
// });
|
|
// // });
|
|
// }
|
|
// };
|
|
});
|
|
} catch (error) {
|
|
console.error("加载模型失败:", error);
|
|
}
|
|
};
|
|
|
|
// 调用函数以加载或重新加载模型
|
|
loadOrReloadModel();
|
|
|
|
function reset() {
|
|
camera.target = new BABYLON.Vector3(0, 10, 0);
|
|
camera.alpha = -Math.PI / 2;
|
|
camera.beta = Math.PI / 2.9;
|
|
camera.radius = 120;
|
|
camera.fov = 0.4;
|
|
}
|
|
|
|
let resetCamera = setTimeout(reset, 15000);
|
|
scene.onPointerObservable.add((pointerInfo) => {
|
|
switch (pointerInfo.type) {
|
|
case BABYLON.PointerEventTypes.POINTERMOVE:
|
|
clearTimeout(resetCamera);
|
|
resetCamera = setTimeout(reset, 15000);
|
|
}
|
|
});
|
|
return scene;
|
|
};
|
|
|
|
// call the createScene function
|
|
const scene = createScene();
|
|
|
|
scene.then((scene) => {});
|
|
|
|
// run the render loop
|
|
scene.then(
|
|
(scene) => {
|
|
engine.runRenderLoop(function () {
|
|
scene.render();
|
|
});
|
|
},
|
|
(reason) => {
|
|
console.log(reason);
|
|
}
|
|
);
|
|
|
|
// Resize
|
|
window.addEventListener("resize", function () {
|
|
engine.resize();
|
|
});
|
|
|
|
// 组件卸载时的清理逻辑
|
|
return () => {
|
|
// 清理场景和引擎资源
|
|
engine.dispose();
|
|
};
|
|
}, []);
|
|
|
|
return (
|
|
<div style={myStyle}>
|
|
{/* <h1 style={{ position: "absolute", top: "140px", left: "0px" }}>
|
|
当前选中的设备是：{selectedMeshName}
|
|
</h1> */}
|
|
{/* <div className="eq_info_box">
|
|
<div>
|
|
<img src={eqInfoIcon} alt="" width={34} />
|
|
<span className="title">设备名称：{eqSubList?.eqName || "-"}</span>
|
|
</div>
|
|
<div className="content">
|
|
<span className="bg">{eqSubList?.subList[0] || "-"}</span>
|
|
<span className="bg">{eqSubList?.subList[1] || "-"}</span>
|
|
<span>{eqSubList?.subList[2] || "-"}</span>
|
|
<span>{eqSubList?.subList[3] || "-"}</span>
|
|
<span className="bg">{eqSubList?.subList[4] || "-"}</span>
|
|
<span className="bg">{eqSubList?.subList[5] || "-"}</span>
|
|
<span>{eqSubList?.subList[6] || "-"}</span>
|
|
<span>{eqSubList?.subList[7] || "-"}</span>
|
|
<span className="bg">{eqSubList?.subList[8] || "-"}</span>
|
|
<span className="bg">{eqSubList?.subList[9] || "-"}</span>
|
|
</div>
|
|
</div> */}
|
|
<canvas ref={canvasRef} style={myStyle} />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default MybabylonJS;
|