在 ThreeJS 画布上只看到 16 个网格对象中的一个?

Question

我有一个 ThreeJS 场景，其中包含 16 个对象，这些对象应该最终形成一个 4 x 4 的正方形网格。 但是，当我运行代码时，我只看到其中一个对象。 我编写了一个"转储"函数来向我显示网格对象位置属性的所有当前 XYZ 值，您可以在下面看到。 这些值对我来说都很好，我相信我应该看到一个漂亮的 4 x 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 属性，其中包含使用上面显示的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

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

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

看

你似乎也让相机看错了方向。

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