Управление масштабированием пользовательских геометрий в Three.js - PullRequest
Новая
       101

Управление масштабированием пользовательских геометрий в Three.js

0 голосов
/ 18 февраля 2019

У меня есть пользовательский объект, который является вычитанием двух сеток.Это вычитание создает подобный рамке объект. 

createFrame (x, y, z) {
    const frameMesh = new THREE.Mesh(new THREE.BoxGeometry(1,1,1));
    frameMesh.scale.set(x, y, z);
    const smallerFrameMesh = frameMesh.clone()
    smallerFrameMesh.scale.set(x - 4, y - 4, z);

    // subtraction
    const frameGeometry = fromCSG(toCSG(frameGeometry).subtract(toCSG(smallerFrameMesh)));

    const frame = new THREE.Mesh(frameGeometry, new THREE.MeshStandardMaterial(0xffffff));
    frame.geometry.computeVertexNormals();
    frame.userData.isFrame = true;

    return frame;
}

Теперь я динамически масштабирую этот кадр всякий раз, когда изменяется размер.Проблема в том, что при использовании .scale мой объект растягивается только тогда, когда я хочу, чтобы сохранял ширину кадра (в данном случае это 4).

Можно ли указать способ масштабирования объекта (например, написать собственную реализацию функции масштабирования) или есть свойство / метод, который можно использовать для сохранения "пустого пространства" и "часть объектаЗаранее спасибо.

1 Ответ

0 голосов
/ 18 февраля 2019

Метод scale() преобразует каждую вершину в равной степени путем умножения их позиций.Таким образом, если у вас внутренний край кадра на x=6, а внешний край на x=10, то его масштабирование на 2 даст вам внутренний: x=12, внешний: x=20, что сделает кадр шириной 8 единиц.

Чтобы облегчить это, вы можете разделить вашу рамку на 4 разных поля: сверху, снизу, слева и справа.Если вы хотите масштабировать его по оси X, вы можете растянуть верх и низ и просто переместить левый и правый края.Таким образом, вы сохраняете толщину 4:

image

Обратное можно сделать, если вы хотите масштабировать по оси Y.Вы растягиваете левый и правый боксы, затем перемещаете верх и низ, чтобы они совпали.

...