troika-3d-text
Advanced tools
Comparing version 0.27.1 to 0.28.0
@@ -6,2 +6,19 @@ # Change Log | ||
# [0.28.0](https://github.com/protectwise/troika/compare/v0.27.1...v0.28.0) (2020-06-09) | ||
### Bug Fixes | ||
* **troika-3d-text:** fix cloning of TextMesh ([13df49b](https://github.com/protectwise/troika/commit/13df49b522abbd13a258b70f340779f940d3adfe)), closes [#60](https://github.com/protectwise/troika/issues/60) | ||
* **troika-3d-text:** prevent double-derivation of text material ([ef8cffa](https://github.com/protectwise/troika/commit/ef8cffaa0eb1717ca73e8a04b8bfcf8f031d2e52)), closes [#59](https://github.com/protectwise/troika/issues/59) | ||
### Features | ||
* **troika-3d-text:** add glyphGeometryDetail parameter ([1f7a11f](https://github.com/protectwise/troika/commit/1f7a11fed98d71d040b31035822215505e1c9f4d)), closes [#52](https://github.com/protectwise/troika/issues/52) | ||
## [0.27.1](https://github.com/protectwise/troika/compare/v0.27.0...v0.27.1) (2020-06-05) | ||
@@ -8,0 +25,0 @@ |
@@ -20,3 +20,3 @@ #!/usr/bin/env node | ||
async function run() { | ||
const response = await fetch(`https://fonts.googleapis.com/css?family=${fontFamilyName}`, { | ||
const response = await fetch(`https://fonts.googleapis.com/css2?family=${fontFamilyName}&display=swap`, { | ||
"credentials": "omit", | ||
@@ -55,2 +55,2 @@ "headers": { | ||
run() | ||
run() |
{ | ||
"name": "troika-3d-text", | ||
"version": "0.27.1", | ||
"version": "0.28.0", | ||
"description": "Troika 3D Text", | ||
@@ -18,5 +18,5 @@ "author": "Jason Johnston <jason.johnston@protectwise.com>", | ||
"dependencies": { | ||
"troika-3d": "^0.27.0", | ||
"troika-three-utils": "^0.27.0", | ||
"troika-worker-utils": "^0.27.0" | ||
"troika-3d": "^0.28.0", | ||
"troika-three-utils": "^0.28.0", | ||
"troika-worker-utils": "^0.28.0" | ||
}, | ||
@@ -31,3 +31,3 @@ "devDependencies": { | ||
}, | ||
"gitHead": "163be9c1f8bf6b0976ccf75b2e94fe880d8f7ee2" | ||
"gitHead": "abfdef4be8b700cc817c34991dc7c8604ed8d75b" | ||
} |
@@ -158,2 +158,8 @@ # `troika-3d-text` | ||
#### `glyphGeometryDetail` | ||
The number of vertical/horizontal segments that make up each glyph's rectangular plane. This can be increased to provide more geometrical detail for custom vertex shader effects, for example. | ||
Default: `1` | ||
#### `letterSpacing` | ||
@@ -160,0 +166,0 @@ |
@@ -24,2 +24,3 @@ import { Object3DFacade } from 'troika-3d' | ||
'orientation', | ||
'glyphGeometryDetail', | ||
'debugSDF' | ||
@@ -26,0 +27,0 @@ ] |
@@ -10,3 +10,10 @@ import { | ||
const templateGeometry = new PlaneBufferGeometry(1, 1).translate(0.5, 0.5, 0) | ||
const templateGeometries = {} | ||
function getTemplateGeometry(detail) { | ||
let geom = templateGeometries[detail] | ||
if (!geom) { | ||
geom = templateGeometries[detail] = new PlaneBufferGeometry(1, 1, detail, detail).translate(0.5, 0.5, 0) | ||
} | ||
return geom | ||
} | ||
const tempVec3 = new Vector3() | ||
@@ -54,4 +61,3 @@ | ||
// Base per-instance attributes | ||
this.copy(templateGeometry) | ||
this.detail = 1 | ||
@@ -66,2 +72,19 @@ // Preallocate zero-radius bounding sphere | ||
set detail(detail) { | ||
if (detail !== this._detail) { | ||
this._detail = detail | ||
if (typeof detail !== 'number' || detail < 1) { | ||
detail = 1 | ||
} | ||
let tpl = getTemplateGeometry(detail) | ||
;['position', 'normal', 'uv'].forEach(attr => { | ||
this.attributes[attr] = tpl.attributes[attr] | ||
}) | ||
this.setIndex(tpl.getIndex()) | ||
} | ||
} | ||
get detail() { | ||
return this._detail | ||
} | ||
/** | ||
@@ -68,0 +91,0 @@ * Update the geometry for a new set of glyphs. |
@@ -144,10 +144,14 @@ import { createDerivedMaterial, voidMainRegExp } from 'troika-three-utils' | ||
// WebGLShadowMap reverses the side of the shadow material by default, which fails | ||
// for planes, so here we force the `shadowSide` to always match the main side. | ||
Object.defineProperty(textMaterial, 'shadowSide', { | ||
get() { | ||
return this.side | ||
}, | ||
set() { | ||
//no-op | ||
Object.defineProperties(textMaterial, { | ||
isTroikaTextMaterial: {value: true}, | ||
// WebGLShadowMap reverses the side of the shadow material by default, which fails | ||
// for planes, so here we force the `shadowSide` to always match the main side. | ||
shadowSide: { | ||
get() { | ||
return this.side | ||
}, | ||
set() { | ||
//no-op | ||
} | ||
} | ||
@@ -154,0 +158,0 @@ }) |
@@ -35,4 +35,28 @@ import { | ||
const SYNCABLE_PROPS = [ | ||
'font', | ||
'fontSize', | ||
'letterSpacing', | ||
'lineHeight', | ||
'maxWidth', | ||
'overflowWrap', | ||
'text', | ||
'textAlign', | ||
'whiteSpace', | ||
'anchorX', | ||
'anchorY', | ||
'colorRanges' | ||
] | ||
const COPYABLE_PROPS = SYNCABLE_PROPS.concat( | ||
'material', | ||
'color', | ||
'depthOffset', | ||
'clipRect', | ||
'orientation', | ||
'glyphGeometryDetail' | ||
) | ||
/** | ||
@@ -45,3 +69,3 @@ * @class TextMesh | ||
class TextMesh extends Mesh { | ||
constructor(material) { | ||
constructor() { | ||
const geometry = new GlyphsGeometry() | ||
@@ -205,2 +229,10 @@ super(geometry, null) | ||
/** | ||
* @member {number} glyphGeometryDetail | ||
* Controls number of vertical/horizontal segments that make up each glyph's rectangular | ||
* plane. Defaults to 1. This can be increased to provide more geometrical detail for custom | ||
* vertex shader effects, for example. | ||
*/ | ||
this.glyphGeometryDetail = 1 | ||
this.debugSDF = false | ||
@@ -326,5 +358,17 @@ } | ||
set material(baseMaterial) { | ||
this._baseMaterial = baseMaterial | ||
if (baseMaterial && baseMaterial.isTroikaTextMaterial) { //prevent double-derivation | ||
this._derivedMaterial = baseMaterial | ||
this._baseMaterial = baseMaterial.baseMaterial | ||
} else { | ||
this._baseMaterial = baseMaterial | ||
} | ||
} | ||
get glyphGeometryDetail() { | ||
return this.geometry.detail | ||
} | ||
set glyphGeometryDetail(detail) { | ||
this.geometry.detail = detail | ||
} | ||
// Create and update material for shadows upon request: | ||
@@ -368,3 +412,3 @@ get customDepthMaterial() { | ||
// shortcut for setting material color via facade prop: | ||
// shortcut for setting material color via `color` prop on the mesh: | ||
const color = this.color | ||
@@ -415,2 +459,13 @@ if (color != null && material.color && material.color.isColor && color !== material._troikaColor) { | ||
copy(source) { | ||
super.copy(source) | ||
COPYABLE_PROPS.forEach(prop => { | ||
this[prop] = source[prop] | ||
}) | ||
return this | ||
} | ||
clone() { | ||
return new this.constructor().copy(this) | ||
} | ||
} | ||
@@ -420,16 +475,2 @@ | ||
// Create setters for properties that affect text layout: | ||
const SYNCABLE_PROPS = [ | ||
'font', | ||
'fontSize', | ||
'letterSpacing', | ||
'lineHeight', | ||
'maxWidth', | ||
'overflowWrap', | ||
'text', | ||
'textAlign', | ||
'whiteSpace', | ||
'anchorX', | ||
'anchorY', | ||
'colorRanges' | ||
] | ||
SYNCABLE_PROPS.forEach(prop => { | ||
@@ -436,0 +477,0 @@ const privateKey = '_private_' + prop |
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is too big to display
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
2019216
35913
256
+ Addedtroika-3d@0.28.1(transitive)
+ Addedtroika-animation@0.28.0(transitive)
+ Addedtroika-core@0.28.0(transitive)
+ Addedtroika-three-utils@0.28.1(transitive)
+ Addedtroika-worker-utils@0.28.0(transitive)
- Removedtroika-3d@0.27.0(transitive)
- Removedtroika-animation@0.27.0(transitive)
- Removedtroika-core@0.27.0(transitive)
- Removedtroika-three-utils@0.27.0(transitive)
- Removedtroika-worker-utils@0.27.0(transitive)
Updatedtroika-3d@^0.28.0
Updatedtroika-three-utils@^0.28.0
Updatedtroika-worker-utils@^0.28.0