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. <br /> Tried some experiments <a href="https://jsfiddle.net/gftruj/j2ovcmxy/" rel="nofollow">here</a>.

Anyone tried something like this ?


Actually, <a-camera> is a <a href="https://threejs.org/docs/index.html#api/cameras/PerspectiveCamera" rel="nofollow">THREE.PerspectiveCamera</a>, here is a <a href="http://irfu.cea.fr/Projets/PYMSES/_images/pymses_pespective_camera.png" rel="nofollow">diagram</a>. 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:

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


  • Magento View 'Company Name' Instead Of First/Last Name
  • Different results when casting int and const int to float
  • I get the client side middleware, but how do I secure a users resources on S3?
  • Should I declare system call functions in C?
  • how do I specify in qmake 4.5's .pro file that i want to ignore a library in msvc8 (2005)
  • TypeScript keyof returning specific type
  • Error NU1605 Detected package downgrade
  • ontimeupdate with YouTube API
  • Query was empty Nodejs Sequlize
  • How to increase font size of some part of string in android?
  • SIlverStripe - No data written onBeforeWrite
  • Crystal Report rendered differently on server and development machine
  • How to add custom action button in Django admin form and post the information
  • Check/Uncheck - ifChecked not working
  • PHP - How to access and retrieve important data from a pop3 email account?
  • Append extra row to jqueryui autocomplete (even if autocomplete doesn't have any matches)
  • SPOJ: GENERAL (Time limit exceeded)
  • UI-Router default view inside div
  • LIBSODIUM decrypt data inside mysql query like did with AES_DECRYPT
  • How to add CKEditor RTE to typo3 Backend Module with the API?
  • How to make infinite threaded comments
  • remove date from DateTimePicker for Compact Framework
  • Compiling and linking NASM and 64-bit C code together into a bootloader [duplicate]
  • Expression.Call GroupBy then Select and Count()?
  • How to sort by Lucene.Net field and ignore common stop words such as 'a' and 'the
  • No Gradle file syntax highlighting in Eclipse Mars.2
  • Can't hide status bar in AVPlayerViewController's portrait mode
  • How to display youtube video on HTML page? [closed]
  • How to put an object in the air?
  • Bison does not appear to recognize C string literals appropriately
  • Creating 2d platforms using JavaScript
  • How to write seo friendly url's using htaccess?
  • Is there a better way for handling SpatialPolygons that cross the antimeridian (date line)?
  • JavaScript Regex to Match Boundaries of Words with diacritics
  • How to handle div that is created dynamically in a table
  • Android Library Projects on Windows and Mac
  • How to check if object is null in Java?