Three.js 在ThreeJS画布上只能看到16个网格对象中的一个？

我有一个包含16个对象的3JS场景，这些对象应该以4×4的正方形网格结束。但是，当我运行代码时，我只看到其中一个对象。我编写了一个“dump”函数来显示网格对象的位置属性的所有当前XYZ值，如下所示。这些值对我来说都很好，我相信我应该看到一个漂亮的4×4正方形网格，给出这些值的位置

我将此ThreeJS Javascript文件用于ThreeJS：

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

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

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属性，该属性包含使用makeCatCube（）函数构建的ThreeJS网格对象（即立方体）：

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
    });
}

此转储显示网格对象位置特性的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

---

我真的不知道现在该怎么调试这个问题。有谁能给我一些关于检查什么的一般提示，或者我可以编写什么诊断代码来尝试解决这个问题吗？

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

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

但是你的物体离我们有545个单位远

试一试

你似乎也让相机朝着错误的方向看

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，但您的对象列表几乎都在摄影机后面

试一试

---

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

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

但是你的物体离我们有545个单位远

试一试

你似乎也让相机朝着错误的方向看

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，但您的对象列表几乎都在摄影机后面

试一试

---

谢谢我只是尝试了一下，但是当我重新运行应用程序时，我没有看到任何不同。你的建议告诉我，我的整个场景/相机方向都搞糟了。虽然在尝试了你的建议之后，事情看起来仍然不太对劲，但我确实看到了其他的正方形，远的，远的，和一个巨大的正方形相比。所以我猜相机离可见的广场很近，离其他的广场很远。因此，我添加了OrbitControls，使用它们我可以重新调整场景方向，直到一切正常为止。我还不确定我的方法总体上做错了什么，但至少现在我知道错在哪里了。正如你所看到的，我在立方体旋转X值中添加了一个“魔术”（60）数字，以使其在相机上看起来“平坦”，因为默认情况下（在我的错误设置中），它看起来非常倾斜。我只是添加这个来确认我在相机/场景初始化中做了一些非常错误的事情。我有很多工作和阅读要做。谢谢，谢谢。我只是尝试了一下，但是当我重新运行应用程序时，我没有看到任何不同。你的建议告诉我，我的整个场景/相机方向都搞糟了。虽然在尝试了你的建议之后，事情看起来仍然不太对劲，但我确实看到了其他的正方形，远的，远的，和一个巨大的正方形相比。所以我猜相机离可见的广场很近，离其他的广场很远。因此，我添加了OrbitControls，使用它们我可以重新调整场景方向，直到一切正常为止。我还不确定我的方法总体上做错了什么，但至少现在我知道错在哪里了。正如你所看到的，我在立方体旋转X值中添加了一个“魔术”（60）数字，以使其在相机上看起来“平坦”，因为默认情况下（在我的错误设置中），它看起来非常倾斜。我只是添加这个来确认我在相机/场景初始化中做了一些非常错误的事情。我有很多工作和阅读要做。谢谢