第一次提交
This commit is contained in:
277
src/babylonjs/MybabylonJS.tsx
Normal file
277
src/babylonjs/MybabylonJS.tsx
Normal file
@@ -0,0 +1,277 @@
|
||||
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;
|
||||
Viittaa uudesa ongelmassa
Block a user