Three. js CyclinderGeometry - изменение вершин в одном, воздействие на другое - PullRequest
Новая
       24

Three. js CyclinderGeometry - изменение вершин в одном, воздействие на другое

1 голос
/ 27 января 2020

У меня есть игра с плитками и туманом войны поверх этих плиток. Я использую CylinderGeometry для создания шестигранных плиток. Затем я создаю еще одну CylinderGeometry и помещаю ее над гексной плиткой, эта новая плитка действует как туман войны. Для тумана я хотел немного рандомизировать верты, чтобы он выглядел менее равномерно. Но при этом я столкнулся с проблемой, когда моя оригинальная плитка также была рандомизирована. Я не очень понимаю, как это происходит. Я тоже сначала пытался создать плитку тумана, но все же наземная плитка тоже рандомизирована.

Вот мой код: 

class Tile extends THREE.Object3D 
{
    constructor ( radius, gridX, gridY, fogMaterial ) 
    {
        super();

        this.gridX = gridX;
        this.gridY = gridY;

        this.gameEntityType = 'Tile';

        let height = .25;
        let geometry = new THREE.CylinderGeometry(radius * .8, radius * .8, height, 6);
        let tileColor = this.randomColor();

        let material = new THREE.MeshToonMaterial( { color: tileColor, shininess: 10 } );
        material.flatShading = true;
        let mesh = new THREE.Mesh(geometry, material);
        this.add( mesh );

        const fogGeometry = new THREE.CylinderGeometry(radius * .8, radius * .8, height * 10, 7);
        const per = 0.25;
        const perY = 2.5;
        fogGeometry.vertices.forEach(v => 
        {
            if ( (v.x - radius) < 0.3 && (v.z - radius) < 0.3 )
            {
                v.x += map1(Math.random(), 0, 1, -per, per);
                v.y += map1(Math.random(), 0, 1, 0, perY);
                v.z += map1(Math.random(), 0, 1, -per, per);
            }
        });
        const fogMesh = new THREE.Mesh( fogGeometry, fogMaterial );
        this.add( fogMesh );

        fogMesh.position.y = 3;

        return this;
    }
}

Есть какие-нибудь подсказки, почему это может произойти? ТРИ кеширует некоторые вещи внизу?

Вот это JSFiddle

Редактировать: я сбросил позиции вершин тайла до и после генерации тумана, и они совпадают. Я читал, что геометрия в какой-то момент преобразуется в BufferGeometry, может ли это вызвать это?

1 Ответ

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

Хорошо, проблемный бит c в вашем коде - это строка: 

let box = new THREE.Box3().setFromObject(hex);

Смещение вершин приводит к увеличению AABB. Поскольку вы используете AABB для позиционирования своих плиток, кажется, что весь объект смещен неправильно.

three.js R112

...