Какой самый простой способ визуализации 2D-фигуры в сцене A-Frame? - PullRequest
Новая
       12

Какой самый простой способ визуализации 2D-фигуры в сцене A-Frame?

1 голос
/ 07 мая 2019

Скажем, форма человеческого контура.

В идеале его можно преобразовать в 3d путем выдавливания, но даже если у него нет глубины, это хорошо для моего варианта использования.

1 Ответ

2 голосов
/ 07 мая 2019

Я думаю, что самым простым способом было бы взять прозрачное png изображение (человеческий контур) и использовать его в качестве источника для a-plane

<a-plane material="src: img.png; transparent: true"></a-plane>

глюк здесь .

.... но если вы хотите создать геометрию с пользовательской формой, которая будет полезна для выдавливания, то проверьте это:

Создание простой формы с базовым THREE.js

Для начала вам нужен массив 2D точек: 

let points = [];
points.push(new THREE.Vector2(0, 0));
// and so on for as many as you want

Создать THREE.Shape объект, вершины которого будут созданы из массива 

var shape = new THREE.Shape(points);

Создайте сетку с геометрией фигуры и любым материалом и добавьте ее к сцене или объекту 

var geometry = new THREE.ShapeGeometry(shape);
var material = new THREE.MeshBasicMaterial({
    color: 0x00ff00
});

var mesh = new THREE.Mesh(geometry, material);
entity.object3D.add(mesh);

Подробнее о:
1) ТРИ. Форма
2) ТРИ. Форма геометрии
3) ТРИ. Меш

Экструзия

Вместо ShapeGeometry вы можете использовать объект ExtrudeGeometry: 

var extrudedGeometry = new THREE.ExtrudeGeometry(shape, {amount: 5, bevelEnabled: false});

Где сумма в основном "толщина". Подробнее о Three.ExtrudeGeometry здесь .

Использование с рамкой

Я бы рекомендовал создать пользовательский компонент AFRAME:

JS 

AFRAME.registerComponent('foo', {
    init: function() {
       // mesh creation
       this.el.object3D.add(mesh);
    }
})

HTML 

<a-entity foo></a-entity>

2D форма здесь .
Экструдированная 2D форма здесь .
Примеры Three.js здесь . Они намного сложнее, чем мои полигоны:)

...