仅在ThreeJS画布上看到16个网格对象？

Question

我有一个ThreeJS场景，其中有16个对象应该以4 x 4正方形网格结尾。但是，当我运行代码时，我只能看到其中一个对象。我编写了一个“转储”函数，以显示网格对象的position属性的所有当前XYZ值，您可以在下面看到。这些值对我来说看起来都不错，我相信我应该看到一个不错的4×4正方形对象网格，考虑到这些值的位置。

我正在将ThreeJS Javascript文件用于ThreeJS：

https://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.min.js

我正在使用此代码创建网格。网格是一个立方体，最初面向相机的一侧是猫的图像：

function makeCatCube(catImageUrl, textureBackSide, locX, locY, locZ) {
    let errPrefix = '(makeCatCube) ';

    // TODO: Should we use BoxBufferGeometry here for greater speed?
    let cubeGeometry = new THREE.BoxGeometry(2, 0.1, 2);
    let loader = new THREE.TextureLoader();

    let materialArray = [
        new THREE.MeshBasicMaterial( { map: loader.load('/images/cards/white-square-400x400.png') } ),
        new THREE.MeshBasicMaterial( { map: loader.load('/images/cards/white-square-400x400.png') } ),
        // Card face.
        new THREE.MeshBasicMaterial( { map: loader.load(catImageUrl) } ),
        // Card back side.
        new THREE.MeshBasicMaterial(
            {
                map: textureBackSide
            }
        ),
        new THREE.MeshBasicMaterial( { map: loader.load('/images/cards/white-square-400x400.png') } ),
        new THREE.MeshBasicMaterial( { map: loader.load('/images/cards/white-square-400x400.png') } ),
    ];

    cube = new THREE.Mesh( cubeGeometry, materialArray );

    if (g_ShowGraphicsDebugInfo) {
        console.log(errPrefix + `Setting cube position to - X: ${locX}, Y: ${locY}, Z: ${locZ}`);
    }

    cube.position.set(locX, locZ, locY);
    // TODO: Magic number to set the cube's X rotation so it looks flat facing the viewer.
    cube.rotation.x = THREE.Math.radToDeg(60);
    return cube;
}

这里是构建所有游戏资源并显示将网格对象添加到场景的主要承诺。包含所有已构建的Cat卡的全局g_aryCatCards数组是在其他地方的更大模块中准备的。它包含每张Cat卡，每张卡具有meshThreeJS属性，该属性包含ThreeJS网格对象（即-多维数据集），该对象是使用上述[[makeCatCube（）函数构建的：

function initializeGameAssets_promise(gameAreaDomElementID, threeJSCanvasAreaDomElementID, catCardWidth, catCardHeight) {
    let errPrefix = '(initializeGameAssets_promise) ';

    return new Promise(function(resolve, reject) {
        try {
            buildAllCatCards_promise(gameAreaDomElementID, threeJSCanvasAreaDomElementID, 1, catCardWidth, catCardHeight)
            .then(result => {
                g_Scene = new THREE.Scene();
                g_Scene.background = new THREE.Color('yellow');

                initCamera();
                initRenderer();

                for (let cardLabelKey in g_aryCatCards) {
                    let catCard = g_aryCatCards[cardLabelKey];
                    g_Scene.add(catCard.meshThreeJS);
                }

                let threeJSCanvasAreaDOMElement = document.getElementById(threeJSCanvasAreaDomElementID);
                if (!threeJSCanvasAreaDOMElement)
                    throw new Error(errPrefix + `Unable to find the DOM element for the cat cards underlay table using ID: ${threeJSCanvasAreaDomElementID}`);

                threeJSCanvasAreaDOMElement.appendChild(g_Renderer.domElement);

                let catCardsTableElementOffset = getElementOffsetById(ELEMENT_ID_CAT_CARDS_TABLE);
                threeJSCanvasAreaDOMElement.left = catCardsTableElementOffset.left;
                threeJSCanvasAreaDOMElement.top = catCardsTableElementOffset.top;

                // Start the rendering process.
                render();

                resolve(true);
            })
            .catch(err => {
                reject(err);
            });
        }
        catch(err) {
            reject(err);
        }
    });
}

这里是我用来初始化相机和渲染器的功能：
function initCamera() {
    g_Camera = new THREE.PerspectiveCamera(70, WIDTH / HEIGHT, 1, 10);
    g_Camera.position.set(0, 3.5, 5);
    g_Camera.lookAt(g_Scene.position);
}

function initRenderer() {
    g_Renderer = new THREE.WebGLRenderer(
    {
        antialias: true
    });
}

此转储显示网格对象的
position

属性的XYZ值：

------------- DUMPING MESH POSITIONS -------------
[label: A1] - X: 2, Y: 0, Z: 2
[label: A2] - X: 176, Y: 0, Z: 2
[label: A3] - X: 350, Y: 0, Z: 2
[label: A4] - X: 525, Y: 0, Z: 2
[label: E1] - X: 2, Y: 0, Z: 364
[label: E2] - X: 176, Y: 0, Z: 364
[label: E3] - X: 350, Y: 0, Z: 364
[label: E4] - X: 525, Y: 0, Z: 364
[label: L1] - X: 2, Y: 0, Z: 183
[label: L2] - X: 176, Y: 0, Z: 183
[label: L3] - X: 350, Y: 0, Z: 183
[label: L4] - X: 525, Y: 0, Z: 183
[label: X1] - X: 2, Y: 0, Z: 545
[label: X2] - X: 176, Y: 0, Z: 545
[label: X3] - X: 350, Y: 0, Z: 545
[label: X4] - X: 525, Y: 0, Z: 545

我现在真的不知道该如何调试此问题。谁能给我一些有关检查的一般提示，或者我可以写出哪些诊断代码来尝试解决这个问题？

Answer 1

您的相机只能看到9个单位的深度

new THREE.PerspectiveCamera(70, WIDTH / HEIGHT, 1, 10);

但是您的物体最多可以到达545个单位
尝试
const near = 1;
const far = 1000;
new THREE.PerspectiveCamera(70, WIDTH / HEIGHT, near, far);

see
您似乎也使相机朝错误的方向看。
g_Camera.position.set(0, 3.5, 5);
g_Camera.lookAt(g_Scene.position);

AFAIK g_scene.position为0、0、0，这意味着相机在z = 5处朝Z = 0，但是您的对象列表几乎都在相机后面。
尝试
g_Camera.position.set(0, 3.5, -50);
g_Camera.lookAt(g_Scene.position);