如何将 a 平面拟合到 a-canvas

Question

我正在尝试将 <a-plane> 安装到 a 型框架 canvas。

我已经成功获得必要的参数：

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

我找不到关于像素和米之间相关性的可靠答案，所以我发现 zPosition/590 的比率似乎在 720p 和 1080p 上运行良好，但有些东西不是线性的，距离window 和平面之间在 window 小和大时是不同的。
尝试了一些实验 here.

有人试过这样的东西吗？

Answer 1

其实<a-camera>是一个THREE.PerspectiveCamera, here is a 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());
}

});

需要改进：

动态获取相机的世界位置，飞机的世界比例。
当相机不在看飞机时，重新定位飞机（有点复杂）。

如何将 a 平面拟合到 a-canvas

How to fit a-plane to the a-canvas

javascript

webvr

aframe