Javascript 如何将a-plane安装到a-canvas

我正在试着装一个

有人试过这样的东西吗？
实际上，
，这里有一个。
我认为有几个重要的属性，
fov
，
near
，
far
，
方面（canvas.width/canvas.height）

如果我们知道相机到平面的距离，我们可以计算出平面的宽度和高度

您可以将
foo
组件附加到
标记：

AFRAME.registerComponent('foo',{
schema : {},
dependencies :["position" , "rotation"],
init:function(){
    this.camera = this.el.sceneEl.camera;
    /*get the absolute distance from the camera to the plane,
    the reason why I use Vector3 instead of this.camera.getWorldPosition() is the camera position had not initlized when this component initialized. 
    */
    this.distance = this.el.object3D.getWorldPosition().distanceTo(new THREE.Vector3(0,1.6,0));
    var height = 2 * this.distance * Math.tan(this.camera.fov / 2 / 180 * Math.PI);
    var width = height * this.camera.aspect;
    //get the plane's absolute height and width
    height = height / this.el.object3D.children[0].getWorldScale().y;
    width = width / this.el.object3D.children[0].getWorldScale().x;
    this.el.setAttribute("width",width);
    this.el.setAttribute("height",height);
    this.el.object3D.children[0].lookAt(this.camera.getWorldPosition());
}

}))

需要改进：

动态获取相机的世界位置，飞机的世界比例也
当相机不看平面时，重新定位平面（有点复杂）
我明白了这个想法，但我似乎无法让它在@Piotradamilewski工作。我计划编写一个完整的JSFIDLE示例，但失败了，我无法配置原因，也无法对其进行调试。它在外部工作。若要使其工作，我无法编辑您的anwser，唯一的“错误”是lookAt（），相机应该查看平面，而不是相机上的平面：尽管如此，我还是做了一些变通，gj和aspect/fov ideaThas真是太棒了！
AFRAME.registerComponent('foo',{
schema : {},
dependencies :["position" , "rotation"],
init:function(){
    this.camera = this.el.sceneEl.camera;
    /*get the absolute distance from the camera to the plane,
    the reason why I use Vector3 instead of this.camera.getWorldPosition() is the camera position had not initlized when this component initialized. 
    */
    this.distance = this.el.object3D.getWorldPosition().distanceTo(new THREE.Vector3(0,1.6,0));
    var height = 2 * this.distance * Math.tan(this.camera.fov / 2 / 180 * Math.PI);
    var width = height * this.camera.aspect;
    //get the plane's absolute height and width
    height = height / this.el.object3D.children[0].getWorldScale().y;
    width = width / this.el.object3D.children[0].getWorldScale().x;
    this.el.setAttribute("width",width);
    this.el.setAttribute("height",height);
    this.el.object3D.children[0].lookAt(this.camera.getWorldPosition());
}