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

Question

我正在尝试将 <a-plane> 放入框架画布。

我已经设法获得了必要的参数：

   scene = document.querySelector('a-scene');
   width = scene.canvas.width;
   height = scene.canvas.height;

我找不到关于像素和米之间相关性的可靠答案，所以我找到了zPosition/590 的比率，这似乎在 720p 和 1080p 上运行良好，但有些东西不是线性的，窗口之间的距离和窗户小和大的时候飞机是不一样的。
尝试了一些实验here。

有人试过这样的吗？

Answer 1

其实<a-camera>是THREE.PerspectiveCamera，这里是diagram。 我认为有几个重要的属性，fov、near、far、aspect(canvas.width / canvas.height)。

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

您可以将foo 组件附加到<a-plane> 标签：

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());
}

});

需要改进：

1. 动态获取相机的世界位置，以及平面的世界比例。
2. 当相机不看飞机时，重新定位飞机（有点复杂）。