vue.js - 如何使用Babylon.js的GUI组件在场景中创建面板并在面板上绘制列表？

Question

在项目中加载了gltf文件。现在想在左边提供一个面板，面板中列出所有设备名称，点击可以定位到右边对应的设备上，并在设备上方弹出信息。

用到的组件
import * as BABYLON from "@babylonjs/core"
import '@babylonjs/loaders';
import * as GUI from '@babylonjs/gui';

//省略部分代码
BABYLON.SceneLoader.Append(fileUrl, "",this.scene,function (scene){
        var meshes = scene.meshes;
        var advancedTexture = GUI.AdvancedDynamicTexture.CreateFullscreenUI("UI",true,_this.scene);
        var advancedTexture.renderScale = 1;
        //创建面板
        var panel = new GUI.StackPanel();
        panel.left = "-630px";
        panel.width = "350px";
        panel.height = "650px";
        panel.background = "rgba(0, 0, 0, 0.5)";
        advancedTexture.addControl(panel);
        //创建列表
        
    })

我目前是在左边加载了StackPanel堆栈面板，但是不知道怎么在面板中 做出一个列表的效果。

Answer 1

在Babylon.js中使用GUI组件来创建面板并在其中绘制列表，你可以通过GUI.List控件来实现。下面是如何在你的代码中实现这一功能的步骤：

1. 创建List控件：首先，你需要在你的StackPanel中创建一个List控件。这个List控件将用来显示你的设备名称列表。
2. 设置List的属性：你可以设置List的fontSize、fontFamily等属性来确保列表项的可读性。
3. 添加List项：通过遍历你的设备数据（假设你已经有了设备名称的数组），使用List.addItems方法或循环调用List.addItem来添加每个设备名称到列表中。
4. 处理点击事件：为每个List项添加点击事件监听器，以便在点击时执行定位到对应设备的操作。

下面是根据你的代码示例，添加这些步骤的示例代码：

BABYLON.SceneLoader.Append(fileUrl, "", this.scene, function (scene) {
    var meshes = scene.meshes;
    var advancedTexture = GUI.AdvancedDynamicTexture.CreateFullscreenUI("UI", true, _this.scene);
    advancedTexture.renderScale = 1;

    // 创建面板
    var panel = new GUI.StackPanel();
    panel.left = "-630px";
    panel.width = "350px";
    panel.height = "650px";
    panel.background = "rgba(0, 0, 0, 0.5)";
    advancedTexture.addControl(panel);

    // 创建列表
    var list = new GUI.List();
    list.fontSize = 24;
    list.fontFamily = "Arial";
    list.height = "100%"; // 或根据需要调整
    list.width = "100%"; // 列表宽度占满面板

    // 假设 devices 是一个包含设备名称的数组
    var devices = ["设备1", "设备2", "设备3"]; // 示例数据
    devices.forEach(function(device) {
        list.addItem(device);

        // 为每个列表项添加点击事件
        list.getChildren()[list.getChildren().length - 1].onPointerDownObservable.add(function(evt) {
            // 在这里添加定位到设备的逻辑
            console.log("点击了设备: " + device);
            // 示例：假设你有一个函数来定位到设备
            // _this.navigateToDevice(device);
        });
    });

    panel.addControl(list);
});

请注意，上述代码中的devices数组需要你根据实际情况进行替换或填充。此外，_this.navigateToDevice(device);是一个假设的函数，你需要根据你的项目逻辑来实现这个函数，以便在点击列表项时能够定位到相应的设备。

此外，请确保在添加List项时，每个List项都被正确地添加到List的children数组中，并且为它们设置了适当的事件监听器。由于List的addItem方法会自动处理这些，所以在这个例子中我们不需要手动管理这些。但是，如果你需要更复杂的交互或样式，你可能需要直接操作这些子控件。