for some reason I cannot make a font italic in three.js. I use below code for it which works well for setting font size or color, but italic just won't work.
var params = {
material: 0,
extrudeMaterial: 1,
bevelEnabled: false,
bevelThickness: 8,
bevelSize: 4,
font: fonts[0].font,
weight: this.weight,
style: this.style,
height:(this.type==0) ? 0 : gravurDepth,
size: this.size,
curveSegments: 4
};
var textGeo = new THREE.TextGeometry(this.txt, params);
I set this.style via below line and see the values get set in debug mode
this.style = (this.style == "normal") ? "italic" : "normal";
Is there some special font I need to load like I guess for the bold case? There do not seem to be special fonts for Italic in the example/fonts folder..
Thanks!
Tom
Related
I am trying to add a 3D text over the BoxGeometry sides for front, right, left and top.
I implmented this code as below :
loadFont = () =>{
const loader = new THREE.FontLoader();
loader.load( 'https://threejs.org/examples/fonts/helvetiker_regular.typeface.json', function ( response ) {
console.log("response "+response);
return response;
} );}
createText = () => {
let font = this.loadFont();
this.textGeo = new THREE.TextGeometry( "Hello", {
font: font,
size: 70,
height: 20,
curveSegments: 4,
bevelThickness: 2,
bevelSize: 1.5,
bevelEnabled: true
});
const materials = [
new THREE.MeshPhongMaterial( { color: 0xffffff, flatShading: true } ), // front
new THREE.MeshPhongMaterial( { color: 0xffffff } ) // side
];
this.textMesh1 = new THREE.Mesh(this.textGeo, materials );
this.textMesh1.position.y = 80;
this.textMesh1.position.z = 0;
this.textMesh1.rotation.x = 0;
this.textMesh1.rotation.y = Math.PI * 2;
this.scene.add(this.textMesh1);
this.root.add(this.textMesh1);
I am not able to receive a 3D text in my scene?
Getting Error - "THREE.TextGeometry: font parameter is not an instance of THREE.Font."
When I try using
const loader = new FontLoader();
this.textGeo = new TextGeometry( "Hello", {
font: font,
size: 70,
height: 20,
curveSegments: 4,
bevelThickness: 2,
bevelSize: 1.5,
bevelEnabled: true
});
I don't get exact place from where I am required to import these FontLoader and TextGeometry classes.
Any help, guidance or reference would be helpful. Thanks
TextGeometry and FontLoader have been moved out of the core some time ago so you have to import them from three/examples/jsm/geometries/TextGeometry.js and three/examples/jsm/loaders/FontLoader.js.
Next, the following line of code does not work since loadFont() actually works asynchronous:
let font = this.loadFont();
loadFont() will always return undefined since you return the font in the onLoad() callback function of FontLoader.load(). You have to rewrite your listing to account for the asynchronous nature of the code flow.
I want to change the color of a bitmap that should be filled in an area. The color must be variable so it is no solution to use pngs in different colors. ;-)
That's the code that did not work. The png will be used but not with the color change.
var bd = new createjs.Bitmap( "high_.png" );
bd.image.onload = function(){
bd.filters = [new createjs.ColorFilter(0, 0, 0, 1, 0, 0, 255, 0)];
bd.cache(-50, -50, 50, 50);
myclip_mc.graphics.beginBitmapFill( bd.image );
myclip_mc.graphics.moveTo(...
...
}
I also tried it by using the following code, but I found no solution to change the color of the png. :-(
var bd = new Image();
bd.src = "high_.png";
bd.image.onload = function(){
myclip_mc.graphics.beginBitmapFill( bd );
myclip_mc.graphics.moveTo(...
...
Any ideas?
I try to substract text geometry from an mesh which has been previously omported (GLB with GLTFLoader).
Unfortunatly object seems not intersect rather than when I add the text geometry in my scene for debugging I see it properly and my mesh should have removed part.
See photo below:
Image 1
But I got this result:
Image 2
I tried to lower up the size of my font, and with x100 ratio I got the result below (here the mesh has removed part but I do not know what is refering to):
Image 3
The code:
let font
function engraving() {
const loaderFont = new FontLoader()
loaderFont.load('fonts/helvetiker_regular.typeface.json', function (f) {
font = f
regenerateGeometry()
})
}
function regenerateGeometry() {
let newGeometry
newGeometry = new TextGeometry("AAAAAAAAA", {
font: font,
size: 0.003,
height: 0.003,
curveSegments: 2,
})
newGeometry.center()
//bender.bend(newGeometry, 'y', Math.PI / 16)
newGeometry.translate(0, 0, 0)
const material = new THREE.MeshStandardMaterial({
envMap: '',
metalness: 1.0,
roughness: 0.0,
color: 0xffd700,
})
const textCSG = CSG.fromGeometry(newGeometry)
var engraved = engravedCSG.subtract(textCSG)
engravedMesh.geometry.dispose()
engravedMesh.geometry = CSG.toMesh(
engraved,
new THREE.Matrix4()
).geometry
}
Looking forward for some advise
I am trying to style a line drawn over the course of the Danube in Leaflet but have been unable to. The line renders, but the color does not change. This is the code I am working with:
var mymap = L.map('mapid').setView([48, 20], 5);
var danubeData = new L.GeoJSON.AJAX("danuberiver.json");
L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
maxZoom: 18,
id: 'mapbox/light-v10',
tileSize: 512,
zoomOffset: -1
}).addTo(mymap);
var danubeLine = danubeData.setStyle({color: 'black', weight: 3}).addTo(mymap);
It simply renders as the default blue. How can I change this?
If you'd like to set style after load, you need to do it in layeradd event listener, but you can also pass style as an option to L.GeoJSON.AJAX:
var danubeData = new L.GeoJSON.AJAX("danuberiver.json", { style: {color: 'black', weight: 3} });
Here's an example: https://codepen.io/kaveh/pen/GRoagxZ
And here's a similar issue on the plugin Github page: https://github.com/calvinmetcalf/leaflet-ajax/issues/5
I created an image in TCPDF with $pdf->Image(... and set the border value to = 1.
But how do I change the width of the border?
The SetLineWidth() method will work.
http://www.tcpdf.org/doc/code/classTCPDF.html#a0ef34c0ce76bd8e4671da42b3588d9b6
I tested this by adjusting the border argument in the Image() call at line 38 of example_003.php to enable the border and then adjusted as follows and observed that the border became thicker:
$this->SetLineWidth( 1 );
$this->Image($image_file, 10, 10, 15, '', 'JPG', '', 'T', false, 300, '', false, false, 1, false, false, false);