Question

目前，我正在尝试使用Babylon.js，因为到目前为止我只使用Threejs，并且多次向我推荐Babylon.js。

我开发了基于回合的策略游戏，其中玩家的游戏场由材料不同的各个场（白色，黑色，棕色）组成。

使用Threejs，我将具有相同材质的不同字段合并到一个对象中，以将绘图调用减少到3。我在Babylon.js文档中了解到，使用实例非常简单。这就是为什么我以这种方式实施游戏场的原因：

使用gltf / glb格式的用Blender导出的现场网格的负载。克隆3次以应用3种不同的材料

import { SceneLoader, StandardMaterial, Color3, Vector3 } from 'babylonjs';
import 'babylonjs-loaders';

...

SceneLoader.ImportMesh('', 'models/', 'field.glb, scene, group => {
    group.forEach((mesh, i) => {
        if (mesh.name !== '__root__') {
            let brown = mesh.clone('FIELD_BROWN');
            let brownMaterial = new StandardMaterial("brownField", scene);
            brownMaterial.diffuseColor = new Color3.FromHexString("#824529");
            brown.material = brownMaterial;
            brown.isVisible = false;

            let black = mesh.clone('FIELD_BLACK');
            let blackMaterial = new StandardMaterial("blackField", scene);
            blackMaterial.diffuseColor = new Color3.FromHexString("#3E211B");
            black.material = blackMaterial;
            black.isVisible = false;

            mesh.name = 'FIELD_WHITE';
            let whiteMaterial = new StandardMaterial("whiteField", scene);
            whiteMaterial.diffuseColor = new Color3.FromHexString("#F8DBAF");
            mesh.material = whiteMaterial;
            mesh.isVisible = false;
        } else {
            mesh.isVisible = false;
        }
    });
});

在另一个功能中构建游戏场

import { Vector3, Color3 } from 'babylonjs';

...

playerField.grid.forEach((cell, i) => {
    let pivot;            

    if (cell.type === BoardCellTypes.BROWN) {
        pivot = this.scene.getMeshByName('FIELD_BROWN');
    } else if (cell.type === BoardCellTypes.BLACK) {
        pivot = this.scene.getMeshByName('FIELD_BLACK');
    } else {
        pivot = this.scene.getMeshByName('FIELD_WHITE');
    }

    let field = pivot.createInstance(cell.row + ':' + cell.col);
    field.position = fieldPosition.add(new Vector3(cell.row * this.fieldSize, 3, cell.col * this.fieldSize));
});

生成的场景如下：

当我调整窗口大小时，所有棕色和黑色字段都消失了。

我也在控制台中看到此警告（256次）：

[。WebGL-0x7fe20b9b3400] GL错误：GL_INVALID_OPERATION：glDrawElementsInstancedANGLE：尝试访问属性4中超出范围的顶点

我使用错误的概念还是使用Babylon.js进行工作的错误思维模型？我认为这可能是渲染难度的问题，但是我对警告和消失的字段感到非常困惑。感谢您的任何帮助！

Answer 1

我通过删除clone方法并多次导入网格来解决了这个问题：

SceneLoader.ImportMesh('', 'models/', 'field.glb, scene, group => {
    group.forEach((mesh, i) => {
        if (mesh.name !== '__root__') {
            mesh.name = 'FIELD_BROWN';
            let brownMaterial = new StandardMaterial("brownField", scene);
            brownMaterial.diffuseColor = new Color3.FromHexString("#824529");
            mesh.material = brownMaterial;
            mesh.isVisible = false;
        }
});

SceneLoader.ImportMesh('', 'models/', 'field.glb, scene, group => {
    group.forEach((mesh, i) => {
        if (mesh.name !== '__root__') {
            mesh.name = 'FIELD_BLACK';
            let blackMaterial = new StandardMaterial("blackField", scene);
            blackMaterial.diffuseColor = new Color3.FromHexString("#3E211B");
            mesh.material = blackMaterial;
            mesh.isVisible = false;
        }
});

...

这对我有用，它消除了警告和奇怪的行为。但是我不明白为什么。因此，我将接受答案，该答案向我解释了使用Babylon.js进行克隆的副作用。

Answer 2

事实是，调整大小后，只有最后一个网格可见。似乎需要在克隆的网格物体上调用makeGeometryUnique。此方法将为网格创建几何的非共享特定出现。

相似的问题-https://forum.babylonjs.com/t/creating-instances-of-clones-of-a-mesh/536

游乐场链接-https://playground.babylonjs.com/#QXZ4KH#3

Babylon.js：实例的渲染顺序

2 个答案: