Aframe создает форму из векторов - PullRequest
Новая
       4

Aframe создает форму из векторов

0 голосов
/ 10 февраля 2020

Я делаю что-то вроде этого, Как создать пользовательский квадрат в рамке , но с пользовательскими формами (т. Е. Рисование вокруг изображения, чтобы создать точку доступа, чтобы сделать часть этого изображения интерактивной)

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

    this._mesh = make('a-plane', {
        geometry:"buffer: false"
    }, this.el)
    this._mesh.addEventListener('loaded', e => {
        this._mesh.getObject3D('mesh').geometry.vertices = this._points
        this._mesh.getObject3D('mesh').geometry.computeFaceNormals()
        this._mesh.getObject3D('mesh').geometry.computeVertexNormals()
    })

Я приближаюсь, но он показывает только один треугольник, что-то вроде этого enter image description here

Как получить форму, чтобы заполнить всю область ? Я делал это раньше с помощью ConvexGeometry и Quick hull, но это кажется громоздким.

Мне пришла идея обновить вершины плоскости из вышеприведенного поста.

1 Ответ

1 голос
/ 10 февраля 2020

Если вы создаете массив с Vector2 объектами, представляющими контур вашей фигуры в порядке CCW, вы можете использовать экземпляры Shape и ShapeBufferGeometry для достижения желаемого результата. Просто передайте массив точек к центу Shape. Следующий официальный пример three.js демонстрирует этот подход:

https://threejs.org/examples/webgl_geometry_shapes

Кстати: вместо определения контура массивом точек, вы также можете использовать API Shape для определения форм. Простой треугольник будет выглядеть так: 

var triangleShape = new THREE.Shape()
    .moveTo( 80, 20 )
    .lineTo( 40, 80 )
    .lineTo( 120, 80 )
    .lineTo( 80, 20 );

var geometry = new THREE.ShapeBufferGeometry( shape );
var mesh = new THREE.Mesh( geometry, material );

three.js R113

...