Skip to content

Commit

Permalink
Merge branch 'master' of https://github.com/antoniohof/aframe-text-te…
Browse files Browse the repository at this point in the history 
…xture-component

* 'master' of https://github.com/antoniohof/aframe-text-texture-component:
  Update README.md
  fix example
  bump fix version
  update read me
  fix example by using old version of three text texture
  fix example ?
  build new version
  bump up version
  use mesh with texture instead of sprite material
  • Loading branch information
@antoniohof
antoniohof committed Jul 1, 2020
2 parents e49c03c + af2acc8 commit 7ed5552
Show file tree
Hide file tree
Showing 6 changed files with 92 additions and 81 deletions.
7 changes: 5 additions & 2 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,10 @@
## aframe-text-texture-component

A text component for [A-Frame](https://aframe.io) that wraps
A light text component for [A-Frame](https://aframe.io) that wraps
[THREE.TextTexture](https://github.com/SeregPie/THREE.TextTexture).
Attention: Only compatible with THREE.TextTexture version 18.8.6

```https://unpkg.com/[email protected]/THREE.TextTexture.js```

* supports unicode
* supports outline
Expand All @@ -18,7 +21,7 @@ A text component for [A-Frame](https://aframe.io) that wraps
<head>
<title>My A-Frame Scene</title>
<script src="https://aframe.io/releases/0.8.2/aframe.min.js"></script>
<script src="https://seregpie.github.io/THREE.TextTexture/THREE.TextTexture.js"></script>
<script src="https://unpkg.com/[email protected]/THREE.TextTexture.js"></script>
<script src="https://antoniohof.github.io/aframe-text-texture-component/dist/aframe-text-texture-component.min.js"></script>
</head>

Expand Down
76 changes: 40 additions & 36 deletions dist/aframe-text-texture-component.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,13 +59,13 @@
oneOf: ["center", "left", "right"],
type: "string"
},
textLineHeight: { default: 1 },
textLineHeight: { default: 1.2 },
fontFamily: {
default: 'Open Sans',
type: "string"
},
fontSize: {
default: 60,
default: 40,
min: 1,
max: 128,
type: "int"
Expand All @@ -86,41 +86,41 @@
type: "string"
},
padding: {
default: 0.25,
default: 0.15,
min: 0,
max: 1,
type: "number"
},
fillStyle: {
default: "#fff",
default: "#fffff",
type: "color"
},
lineWidth: {
default: 0,
default: 0.0,
min: 0,
max: 0.5,
type: "number"
},
strokeStyle: {
default: "#fff",
default: "#fffff",
type: "color"
},
opacity: {
default: "1",
default: 1.0,
min: 0,
max: 1,
type: "number"
},
scale: {
default: 1,
default: 1.0,
type: "number"
}
},

init: function() {
this.textTexture = new THREE.TextTexture({
autoRedraw: this.data.autoRedraw,
text: decodeURI(this.data.text),
text: unescape(this.data.text),
fontFamily: this.data.fontFamily,
fontSize: this.data.fontSize,
fontStyle: this.data.fontStyle,
Expand All @@ -133,48 +133,52 @@
strokeStyle: this.data.strokeStyle,
padding: this.data.padding
});

this.material = new THREE.SpriteMaterial({
this.material = new THREE.MeshBasicMaterial({
map: this.textTexture,
color: this.data.fillStyle,
transparent: true
transparent: true,
side: window.THREE.DoubleSide,
flatShading: true
});
this.material.opacity = this.data.opacity
this.sprite = new THREE.Sprite(this.material);
this.sprite.scale.setX(this.textTexture.imageAspect).multiplyScalar(this.data.scale);
this.el.setObject3D("mesh", this.sprite);
this.geometry = new THREE.PlaneGeometry(1, 1, 1);
this.mesh = new THREE.Mesh(this.geometry, this.material);
this.el.setObject3D("mesh", this.mesh);
},
play: function() {},
update: function(oldData) {
this.material.opacity = this.data.opacity
this.textTexture.text = decodeURI(this.data.text)
this.textTexture.fontFamily = this.data.fontFamily
this.textTexture.autoRedraw = this.data.autoRedraw
this.textTexture.fontStyle = this.data.fontStyle
this.textTexture.textAlign = this.data.textAlign
this.textTexture.textLineHeight = this.data.textLineHeight
this.textTexture.fontWeight = this.data.fontWeight
this.textTexture.fontVariant = this.data.fontVariant
this.textTexture.fillStyle = this.data.fillStyle
this.textTexture.lineWidth = this.data.lineWidth
this.textTexture.strokeStyle = this.data.strokeStyle
this.textTexture.padding = this.data.padding
this.sprite.scale.setX(this.textTexture.imageAspect).multiplyScalar(this.data.scale);
this.sprite.scale.setY(this.data.scale)
this.material.opacity = this.data.opacity;
if (oldData.text !== this.data.text) {
this.textTexture.text = unescape(this.data.text);
this.textTexture.fontFamily = this.data.fontFamily;
this.textTexture.autoRedraw = this.data.autoRedraw;
this.textTexture.fontStyle = this.data.fontStyle;
this.textTexture.textAlign = this.data.textAlign;
this.textTexture.textLineHeight = this.data.textLineHeight;
this.textTexture.fontWeight = this.data.fontWeight;
this.textTexture.fontVariant = this.data.fontVariant;
this.textTexture.fillStyle = this.data.fillStyle;
this.textTexture.lineWidth = this.data.lineWidth;
this.textTexture.strokeStyle = this.data.strokeStyle;
this.textTexture.padding = this.data.padding;
var numberOfLines = (unescape(this.data.text).match(/\n/g)||[]).length + 1;
this.mesh.scale.set(this.textTexture.imageAspect * this.data.scale * numberOfLines, this.data.scale * numberOfLines, 1 );
}
},
tick: function () {
},
getTextLines: function () {
return this.textTexture.textLines;
return this.textTexture ? this.textTexture.textLines : '';
},
getFontProperties: function () {
return this.textTexture.font;
return this.textTexture ? this.textTexture.font : '';
},
getImageAspect: function () {
return this.textTexture.imageAspect;
return this.textTexture ? this.textTexture.imageAspect : 0;
},
getSize: function () {
return this.sprite.scale;
return this.geometry ? new THREE.Vector2(this.geometry.parameters.width * this.mesh.scale.x, this.geometry.parameters.height * this.mesh.scale.y) : new THREE.Vector2(0, 0);
}
});


/***/ })
/******/ ]);
2 changes: 1 addition & 1 deletion dist/aframe-text-texture-component.min.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

8 changes: 4 additions & 4 deletions example/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,17 +5,17 @@
<title>Example</title>
<meta name="description" content="Text Texture Example — A-Frame">
<script src="https://aframe.io/releases/0.8.2/aframe.min.js"></script>
<script src="https://seregpie.github.io/THREE.TextTexture/THREE.TextTexture.js"></script>
<script src="../src/index.js"></script>
<script src="https://unpkg.com/[email protected]/THREE.TextTexture.js"></script>
<script src="https://antoniohof.github.io/aframe-text-texture-component/src/index.js"></script>
</head>
<body>
<a-scene>
<a-scene antialias="true">
<a-assets>
<img id="lake" src="lake.jpg">
</a-assets>

<a-sky src="#lake"></a-sky>
<a-entity text-texture="text: Texture Based Text with accented characters (á, ã, â...); scale: 1.5" position="0 0 -10"> </a-entity>
<a-entity text-texture="text: Texture Based Text with accented characters (á, ã, â...); scale: 1.0; fillStyle: White" position="0 0 -10"> </a-entity>
</a-scene>
</body>
</html>
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "aframe-text-texture-component",
"version": "0.0.1",
"version": "0.0.3",
"description": "Texture-based text for A-Frame",
"main": "src/index.js",
"scripts": {
Expand Down
78 changes: 41 additions & 37 deletions src/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,13 +13,13 @@ AFRAME.registerComponent("text-texture", {
oneOf: ["center", "left", "right"],
type: "string"
},
textLineHeight: { default: 1 },
textLineHeight: { default: 1.2 },
fontFamily: {
default: 'Open Sans',
type: "string"
},
fontSize: {
default: 60,
default: 40,
min: 1,
max: 128,
type: "int"
Expand All @@ -40,41 +40,41 @@ AFRAME.registerComponent("text-texture", {
type: "string"
},
padding: {
default: 0.25,
default: 0.15,
min: 0,
max: 1,
type: "number"
},
fillStyle: {
default: "#fff",
default: "#fef9ff",
type: "color"
},
lineWidth: {
default: 0,
default: 0.0,
min: 0,
max: 0.5,
type: "number"
},
strokeStyle: {
default: "#fff",
default: "#fef9ff",
type: "color"
},
opacity: {
default: "1",
default: 1.0,
min: 0,
max: 1,
type: "number"
},
scale: {
default: 1,
default: 1.0,
type: "number"
}
},

init: function() {
this.textTexture = new THREE.TextTexture({
autoRedraw: this.data.autoRedraw,
text: decodeURI(this.data.text),
text: unescape(this.data.text),
fontFamily: this.data.fontFamily,
fontSize: this.data.fontSize,
fontStyle: this.data.fontStyle,
Expand All @@ -87,45 +87,49 @@ AFRAME.registerComponent("text-texture", {
strokeStyle: this.data.strokeStyle,
padding: this.data.padding
});

this.material = new THREE.SpriteMaterial({
this.material = new THREE.MeshBasicMaterial({
map: this.textTexture,
color: this.data.fillStyle,
transparent: true
transparent: true,
side: window.THREE.DoubleSide,
flatShading: true
});
this.material.opacity = this.data.opacity
this.sprite = new THREE.Sprite(this.material);
this.sprite.scale.setX(this.textTexture.imageAspect).multiplyScalar(this.data.scale);
this.el.setObject3D("mesh", this.sprite);
this.geometry = new THREE.PlaneGeometry(1, 1, 1);
this.mesh = new THREE.Mesh(this.geometry, this.material);
this.el.setObject3D("mesh", this.mesh);
this.textTexture.fillStyle = this.data.fillStyle;
},
play: function() {},
update: function(oldData) {
this.material.opacity = this.data.opacity
this.textTexture.text = decodeURI(this.data.text)
this.textTexture.fontFamily = this.data.fontFamily
this.textTexture.autoRedraw = this.data.autoRedraw
this.textTexture.fontStyle = this.data.fontStyle
this.textTexture.textAlign = this.data.textAlign
this.textTexture.textLineHeight = this.data.textLineHeight
this.textTexture.fontWeight = this.data.fontWeight
this.textTexture.fontVariant = this.data.fontVariant
this.textTexture.fillStyle = this.data.fillStyle
this.textTexture.lineWidth = this.data.lineWidth
this.textTexture.strokeStyle = this.data.strokeStyle
this.textTexture.padding = this.data.padding
this.sprite.scale.setX(this.textTexture.imageAspect).multiplyScalar(this.data.scale);
this.sprite.scale.setY(this.data.scale)
this.material.opacity = this.data.opacity;
if (oldData.text !== this.data.text) {
this.textTexture.text = unescape(this.data.text);
this.textTexture.fontFamily = this.data.fontFamily;
this.textTexture.autoRedraw = this.data.autoRedraw;
this.textTexture.fontStyle = this.data.fontStyle;
this.textTexture.textAlign = this.data.textAlign;
this.textTexture.textLineHeight = this.data.textLineHeight;
this.textTexture.fontWeight = this.data.fontWeight;
this.textTexture.fontVariant = this.data.fontVariant;
this.textTexture.fillStyle = this.data.fillStyle;
this.textTexture.lineWidth = this.data.lineWidth;
this.textTexture.strokeStyle = this.data.strokeStyle;
this.textTexture.padding = this.data.padding;
var numberOfLines = (unescape(this.data.text).match(/\n/g)||[]).length + 1;
this.mesh.scale.set(this.textTexture.imageAspect * this.data.scale * numberOfLines, this.data.scale * numberOfLines, 1 );
}
},
tick: function () {
},
getTextLines: function () {
return this.textTexture.textLines;
return this.textTexture ? this.textTexture.textLines : '';
},
getFontProperties: function () {
return this.textTexture.font;
return this.textTexture ? this.textTexture.font : '';
},
getImageAspect: function () {
return this.textTexture.imageAspect;
return this.textTexture ? this.textTexture.imageAspect : 0;
},
getSize: function () {
return this.sprite.scale;
return this.geometry ? new THREE.Vector2(this.geometry.parameters.width * this.mesh.scale.x, this.geometry.parameters.height * this.mesh.scale.y) : new THREE.Vector2(0, 0);
}
});
});

0 comments on commit 7ed5552

Please sign in to comment.