mayognaise/aframe-html-shader

ratio shows error in a-frame v0.5.0

jason90929 opened this issue · 6 comments

<a-entity
        geometry="primitive:plane;width:45;height:17;"
        look-at="[camera]"
        position="0 0 0"
        material="shader:html;target:#hide-info;transparent:true;ratio:width;opacity:1;">
      </a-entity>

If I set ratio in material, it shows me an error:

aframe-html-shader.js?2520:432 Uncaught (in promise) TypeError: Cannot read property 'width' of undefined
    at NewShader.__draw (eval at <anonymous> (app.js:1729), <anonymous>:432:41)
    at eval (eval at <anonymous> (app.js:1729), <anonymous>:566:18)

I made it work! But I think I'm just using hard code to do what I want
add these code into line 433 in dist/aframe-html-shader.js

 - var _el$getObject3D$geome = this.el.getObject3D('mesh').geometry.parameters;
 - var width = _el$getObject3D$geome.width;
 - var height = _el$getObject3D$geome.height;
 + const material = this.el.getAttribute('material')
 + const target = document.querySelector(material.target)
 + if (!target) return
 + const width = target.clientWidth / 4
 + const height = target.clientHeight / 4

@jason90929 Why are you dividing by 4? The ratio works when I do this hardcode change, but the object is getting too large...:)

@jason90929
I think what you do is taking the size of the 2d object. What the code needs is the size of the 3d object. My hardcode looks as follows and works fine for me:

 - var _el$getObject3D$geome = this.el.getObject3D('mesh').geometry.parameters;
 - var width = _el$getObject3D$geome.width;
 - var height = _el$getObject3D$geome.height;
+ var width = AFRAME.utils.entity.getComponentProperty(this.el, 'geometry.width');
+ var height = AFRAME.utils.entity.getComponentProperty(this.el, 'geometry.height');

I forked the plugin and did it by hardcore way to make it worked in my project, I'm not sure where are width and height from.

Actually it's even easier than I proposed, just replace the following:

 - var _el$getObject3D$geome = this.el.getObject3D('mesh').geometry.parameters;
+ var _el$getObject3D$geome = this.el.getObject3D('mesh').geometry.metadata.parameters;

yeah, it worked correctly!