问Babylon.js:实例的呈现顺序
EN

Stack Overflow用户

提问于 2019-06-14 00:14:19

回答 2查看 1.1K关注 0票数 1

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

我开发了一个基于转弯的策略游戏，在这个游戏中，玩家的游戏场是由不同材质(白色、黑色、棕色)的个体组成的。

使用Threejs，我将不同字段与相同的材料合并到一个对象中，以将绘制调用减少到3。我在Babylon.js文档中看到，使用实例非常简单。这就是为什么我以这种方式实现gamefield的原因：

用glb/glb格式的搅拌器输出的现场网格的负载。克隆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-0x7fe20b9b3400GL错误:GL_INVALID_OPERATION : glDrawElementsInstancedANGLE:尝试访问属性4中的范围外顶点

我是使用了错误的概念，还是使用了错误的Babylon.js思维模式？我认为这可能是渲染程序的一个问题，但我对警告和消失的字段感到非常困惑。谢谢你的任何帮助！

babylonjs

gltf

javascript

回答 2

Stack Overflow用户

发布于 2019-06-14 22:23:44

通过删除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;
        }
});

...