如何使用 angular 参数指定 aframe 对象的位置？

Question

我正在尝试使用 angular（版本 4）组件中设置的值指定 aframe 对象的位置：

<a-text value="Plane" position="{{billBoard.x}} {{billBoard.y}} {{billBoard.z}}" color="#806040" side="double"></a-text>

Angular构造函数：

  constructor() {
    this.billBoard['x'] = 1;
    this.billBoard['y'] = 3;
    this.billBoard['z'] = 6;
}

但是，它会忽略 Angular 组件中的值，只是默认为 (0,0,0)。我做错了什么？

Answer 1

你不能进行字符串插值，你将不得不使用Angular的[attr.*]数据绑定（ng- attr-* 用于 AngularJS).

示例：

import ...

@Component({
    selector: 'app-root',
    template: `
        <a-scene>
            <a-box [attr.position]="'0 ' + pos.y +' 0'" color="red"></a-box>
            <a-plane rotation="-90 0 0" width="75" height="75" color="blue"></a-plane>
            <a-sky color="#f9f9f9"></a-sky>
        </a-scene>
  `
})
export class App {

    // a-box position
    private pos = new THREE.Vector3(0, 5, 0);
}

看到这个笨蛋： Angular A-Frame - set component attribute values

如何使用 angular 参数指定 aframe 对象的位置？

How to specify position of an aframe object using angular parameters?

angularjs

aframe