使用 A-Frame 进行数据绑定

Question

我正在使用 AR.js（A 帧）和 Angular 构建 WebAR。我们有一组数据，想要当显示具有特定 id 的标记时显示数据。因此我们需要设置一个A场景带有 a-marker 并且进一步我们想要呈现一个 a-entity。

{
  "id": 6,
  "name": "Hammer",
  "lWartung": "2019-11-30T00:00:00.000Z",
  "nWartung": "2019-11-30T00:00:00.000Z"
}

我尝试将 a-marker 的值属性设置为 maschine.id，但没有成功。这对实体也不起作用。

<a-scene id='scene1' embedded arjs='sourceType: webcam; debugUIEnabled: true; detectionMode: mono_and_matrix; matrixCodeType: 3x3;'>
                <ng-container *ngIf="maschinen.length > 0">
                   <ng-container *ngFor="let maschine of maschinen" > 
                                <pre>
                                   {{maschine | json}}
                                </pre>
                        <a-marker [id] =  "'M'+ maschine.id" type='barcode' >
                                <a-entity [id] = "'E'+ maschine.id"
                                geometry="primitive: plane; width: auto; height: auto"
                                material="color: #213d4a"
                                 >
                            </a-entity>
                        </a-marker>
                    </ng-container>
                </ng-container>

我也不能将多属性组件的属性设置为文本。

entity.setAttribute('text',{value: '...'})

Answer 1

任何感兴趣的人。我发现 aframe-typescript-toolkit。让我设置所有属性。

Answer 2

需要考虑的几点：

数据绑定和帧读取 id 之间存在延迟。 A-Frame 将尝试在数据绑定发生之前从 id 中读取。另一个选项是id没有绑定。

尝试以下操作：

<a-marker
  id="placeholder_id"
  [attr.id]="my_id"
</a-marker>

您可能只需要 attr.id 进行绑定，但如果 id 是标签的必需属性，那么它必须在 DOM 在运行时。所以在那里放一个占位符并在通过 attr.id 数据绑定后替换它。占位符 ID 将被覆盖。

使用 A-Frame 进行数据绑定

Databinding with A-Frame

aframe

angular

ar.js