How to fit a-plane to the a-canvas

问题

I'm trying to fit a <a-plane> to the a-frame canvas.

I've managed to get the necessary params:

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

I can't find a solid anwser regarding the correlation between pixels and meters, so i found a ratio of zPosition/590 which seems to work well on 720p and 1080p, but something is not linear, the distance between the window and the plane is different when the window is small, and when it's big.
Tried some experiments here.

Anyone tried something like this ?

回答1:

Actually, <a-camera> is a THREE.PerspectiveCamera, here is a diagram. I think there several important attributes, fov, near, far, aspect(canvas.width / canvas.height).

If we know the distance from the camera to the plane, we can calculate the width and height the plane should be.

You can attach the foo component to <a-plane> tags:

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

});

Need to be improved:

dynamically get camera's world position, the plane's world scale also.
when the camera isn't looking at the plane, relocate the plane(a little bit complicated).

来源：https://stackoverflow.com/questions/44974596/how-to-fit-a-plane-to-the-a-canvas

标签

javascript

aframe

webvr