Open bknill opened 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 },
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.