etiennepinchon / aframe-rounded Goto Github PK

Nice component - the curved corners do indeed look smooth, however I need my 'a-rounded' to have some depth as well. Is this possible? Adding depth="x" to the element doesn't work

Hi,

I am trying to add a text to the entity with "rounded" component. Here is what I am trying -

<a-entity rounded="width: 3; height: 1; color: #ff00ed; opacity: 0.4" text="align: left; baseline: top; anchor: left; wrapCount: 35; value: Animating color Animating color Animating color Animating color Animating color; width: 2.5" position="2 1 -3">

However, the text always appears either outside the mesh or always at the bottom.

I am not sure what could be the issue here as I have tried different combinations of align. baseline and other parameters.

I updated this to add an image texture to allow for rounded corners on images. You have to make changes to the UVs to centre it.

    updateImage: function(){

      this.image = document.getElementById(this.data.imageId) as HTMLImageElement
      if(this.image.complete)
        this.updateTexture()
      else 
        this.image.onload = this.updateTexture.bind(this)  

    },
    updateTexture: function(){
      this.texture = new THREE.Texture(this.image)
      this.rounded.material = new THREE.MeshBasicMaterial( { map: this.texture, side: THREE.DoubleSide } ) 
      const vec3 = new THREE.Vector3()
      const attPos = this.rounded.geometry.attributes.position;
      const attUv = this.rounded.geometry.attributes.uv;
        for (let i = 0; i < attPos.count; i++){
          vec3.fromBufferAttribute(attPos, i);
          attUv.setXY(i,
          (vec3.x - (-this.data.width/2)) / this.data.width,
          (vec3.y - (-this.data.height/2)) / this.data.height
        );
      }
       attUv.needsUpdate = true
       this.texture.needsUpdate = true 
    },

This is great, but the center of the plane seems to be in the corner, not the center.
So if I want to keep positioning consistent with other entities, I have to shift position by ½ of the width/height.
Any way to get the center in the center automatically?
Thanks!

would this be possible to add?

https://github.com/aframevr/aframe/blob/master/src/extras/primitives/primitives/a-curvedimage.js

A-rounded is positioned, aligned differently than eg. an a-entity.

I changed line https://github.com/etiennepinchon/aframe-rounded/blob/master/dist/aframe-rounded-component.js#L117 : instead of x=0 and y=0 I used x = -this.data.width/2 and y = -this.data.height/2 and it was alright and aligned like other a-entities.

Otherwise, great component!

Tried via direct src="my-image.png" and through assets and neither work at the moment