etiennepinchon / aframe-rounded

An A-Frame component to create rectangles with smooth edges.
MIT License
32 stars 10 forks source link

Added an image texture for images with rounded corners. #6

Open bknill opened 4 years ago

bknill commented 4 years ago

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 
    },