ratio shows error in a-frame v0.5.0
jason90929 opened this issue · 6 comments
jason90929 commented
<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)
jason90929 commented
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
derhuebiii commented
@jason90929 Why are you dividing by 4? The ratio works when I do this hardcode change, but the object is getting too large...:)
derhuebiii commented
@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');
jason90929 commented
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.
derhuebiii commented
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;
jason90929 commented
yeah, it worked correctly!