Question

我正在尝试将<a-plane>放到a-frame画布上。

我设法得到了必要的参数：

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

}）;

需要改进：

动态获取相机的世界位置，也是飞机的世界尺度。
当相机没有看到飞机时，重新安置飞机（有点复杂）。

如何将a-plane适合a-canvas

1 个答案: