Видишь только один объект me sh из 16 на холсте Three JS? - PullRequest
Новая
       34

Видишь только один объект me sh из 16 на холсте Three JS?

0 голосов
/ 06 января 2020

У меня есть сцена Три JS с 16 объектами, которые должны оказаться в квадратной сетке 4 на 4. Однако когда я запускаю код, я вижу только один из объектов. Я написал функцию «dump», чтобы показать мне все текущие значения XYZ свойства me sh objects position , которые вы можете увидеть ниже. Все значения выглядят хорошо для меня, и я считаю, что я должен видеть красивую квадратную сетку 4 на 4 с учетом расположения этих значений.

Я использую этот файл Three JS Javascript для Three JS: 

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

Я использую этот код для создания me sh. Я sh - это куб, изначально сторона которого обращена к камере: изображение кошки: 

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

Вот основное обещание, которое строит все игровые ресурсы и показывает, куда я добавляю меня sh объекты на сцену. Глобальный массив g_aryCatCards , который содержит все созданные карты кошек, подготовлен в гораздо большем модуле в другом месте. Он содержит каждую из карточек кошек, и каждая карточка имеет свойство meshThree JS, которое содержит объект Three JS me sh (т. Е. - куб), который был построен с использованием 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
    });
}

Этот дамп показывает значения XYZ для меня sh свойство объекта position : 

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

Я действительно не знаю, что делать на этом этапе для устранения этой проблемы. Кто-нибудь может дать мне несколько общих советов о том, что проверять, или какой диагностический код c я мог бы написать, чтобы попытаться выяснить это?

1 Ответ

2 голосов
/ 06 января 2020

Ваша камера может видеть только 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);
...