require.config({
baseUrl: cfg.path,
paths: {
babylonjs: 'https://cdn.babylonjs.com/babylon',
'babylonjs-gui': 'https://cdn.babylonjs.com/gui/babylon.gui',
'babylonjs-gui-editor': 'https://cdn.jsdelivr.net/npm/@babylonjs/gui-editor@6.38.1/dist/babylon.guiEditor.min',
'babylonjs-loaders': 'https://cdn.babylonjs.com/loaders/babylonjs.loaders',
'babylonjs-viewer': 'https://cdn.babylonjs.com/viewer/babylon.viewer',
'babylonjs-serializers': 'https://cdn.babylonjs.com/serializers/babylonjs.serializers',
'babylonjs-materials': 'https://cdn.babylonjs.com/materialsLibrary/babylonjs.materials',
'babylonjs-inspector': 'https://cdn.babylonjs.com/inspector/babylon.inspector.bundle',
pep: 'https://code.jquery.com/pep/0.4.3/pep'
},
shim: {
"babylonjs": {
deps: ['pep']
},
"babylonjs-inspector": {
deps: ['babylonjs-gui','babylonjs-materials']
},
"babylonjs-gui": {
deps: ['babylonjs'],
},
}
--------------------------------js-------------------------------------
define(["jquery", "promise", "vue", "service", "babylonjs", "babylonjs-loaders", "babylonjs-gui","babylonjs-gui-editor", "babylonjs-materials", "babylonjs-inspector"],
function ($, Promise, Vue, service, BABYLON, ) {
return root = {
module: {
el: '#content',
data: {
path: "#",
args: {
monitorId: "",
monitorName: ""
},
info: null,
editState: false,
engine: null,
scene: null,
renderer: null,
labelRenderer: null,
object: null,
camera: null,
group: null,
yData: 0,
},
mounted() {
const t = this;
t.initModel()
},
destroyed() {
},
methods: {
formatDegree: service.formatDegree,
urlArgs: service.urlArgs,
//加载
initModel() {
const t = this;
t.createScene()
t.createModel()
t.$nextTick(() => {
// 创建提示框
let advancedTexture = BABYLON.GUI.AdvancedDynamicTexture.CreateFullscreenUI("UI",1000,1000,t.scene);
let panel = new BABYLON.GUI.StackPanel();
advancedTexture.addControl(panel);
var button1 = BABYLON.GUI.Button.CreateSimpleButton("but1", "Click Me");
button1.width = 1;
button1.height = 0.4;
button1.color = "white";
button1.fontSize = 50;
button1.background = "green";
button1.onPointerUpObservable.add(function() {
alert("you did it!");
});
advancedTexture.addControl(button1);
//渲染
t.engine.runRenderLoop(function () {
t.scene.render();
});
})
},
//创建场景
createScene() {
const t = this;
// Get the canvas DOM element
let canvas = document.getElementById('renderCanvas');
t.engine = new BABYLON.Engine(canvas, true, {
preserveDrawingBuffer: true,
stencil: true
});
t.scene = new BABYLON.Scene(t.engine);
t.scene.clearColor = new BABYLON.Color4(0, 0, 0, 0.4);
BABYLON.SceneLoader.ShowLoadingScreen = false;
t.scene.receiveShadows = true;
//创建相机
t.camera = new BABYLON.ArcRotateCamera('camera', 0, 5, 0, new BABYLON.Vector3(0, 0, 120), t.scene);
t.camera.setTarget(BABYLON.Vector3.Zero());
t.camera.attachControl(canvas, true);
t.camera.lowerRadiusLimit = 10
t.camera.upperRadiusLimit = 300; // 最大半径
// 创建环境光
let ambientLight = new BABYLON.HemisphericLight("ambientLight", new BABYLON.Vector3(0, 0, 0), t.scene);
ambientLight.intensity = 1
ambientLight.shadowEnabled = true;
// 启用阴影
// 创建定向光
const directionalLight = new BABYLON.DirectionalLight("directionalLight", new BABYLON.Vector3(1, -15, 10), t.scene);
directionalLight.intensity = 6;
directionalLight.shadowEnabled = true;
// 创建聚光灯
const spotLight2 = new BABYLON.SpotLight("spotLight2", new BABYLON.Vector3(-1, 30, 50), new BABYLON.Vector3(1, -30, -25), Math.PI / 3, 10, t.scene);
spotLight2.intensity = 5000;
spotLight2.shadowEnabled = true;
// 辅助线
const axes = new BABYLON.Debug.AxesViewer(t.scene, 30)
t.scene.debugLayer.show({
embedMode: true,
});
// 鼠标事件处理
canvas.addEventListener('click', (event) => {
// 获取鼠标在画布上的位置
let pickInfo = t.scene.pick(t.scene.pointerX, t.scene.pointerY);
if (pickInfo.hit) {
console.log(pickInfo)
}
});
window.addEventListener('resize', () => {
t.engine.resize();
});
},
// 导入模型
async createModel() {
const t = this;
try {
let result = await BABYLON.SceneLoader.ImportMeshAsync(
"", // 网格名（空字符串表示加载所有网格）
cfg.path + "/img/model/", // 模型路径
"scene.glb", // 模型文件名
t.scene // 场景
);
// Access the loaded meshes
let meshes = result.meshes;
// result.meshes[0].position.y += 30
// 创建地板
let ground = BABYLON.MeshBuilder.CreateGround("ground", {width: 100, height: 100}, t.scene);
// 设置地板的位置
ground.position.y = -28; // 将地板置于模型底部下方
// 设置地板支持投影
ground.receiveShadows = true;
// 创建地板的材质
let groundMaterial = new BABYLON.StandardMaterial("groundMaterial", t.scene);
groundMaterial.diffuseColor = new BABYLON.Color3(0.5, 0.5, 0.5); // 设置地板的漫反射颜色
ground.material = groundMaterial; // 将材质应用到地板上
meshes.forEach(mesh => {
if (mesh.parent) {
}
if (mesh.material) {
mesh.material.receiveShadows = true;
}
})
} catch (error) {
console.error('Model loading failed:', error);
}
},
}
},
};
});
------------------------------------------------ Error---------------------------------------------------
Cannot read properties of undefined (reading ‘AdvancedDynamicTexture’)
Why?
Please solve it, thanks!
