This is my code:-
const windowText = async (scene, text, color, x, y, z) => {
return new Promise((resolve, reject) => {
// Load a built-in font
const loader = new FontLoader();
loader.load(
"three/examples/fonts/helvetiker_regular.typeface.json",
function (font) {
// Create a text geometry
const textGeometry = new TextGeometry(text, {
font: font, // Load your font data here or use a built-in font
size: 5, // Size of the text
depth: 0.1, // Thickness of the text
curveSegments: 12, // Number of segments for curves
bevelEnabled: false, // Whether to enable beveling
});
const textMaterial = new THREE.MeshBasicMaterial({ color }); // Material for the text
const textMesh = new THREE.Mesh(textGeometry, textMaterial); // Create a mesh with the text geometry
textMesh.position.set(x, y, z);
scene.add(textMesh); // Add the text mesh to the scene
textMesh.visible = true;
textMesh.name = "textMesh";
// Center the text
textGeometry.computeBoundingBox();
const boundingBox = textGeometry.boundingBox;
const textWidth = boundingBox.max.x - boundingBox.min.x;
const textHeight = boundingBox.max.y - boundingBox.min.y;
console.log(boundingBox);
textMesh.position.x = -textWidth / 10;
textMesh.position.y = -textHeight / 10;
resolve(textMesh); // Resolve the Promise with the textMesh
},
// onProgress callback
function (xhr) {
console.log((xhr.loaded / xhr.total) * 100 + "% loaded");
},
// onError callback
function (err) {
console.log("An error happened");
}
);
});
};
I get this error in console.
package.json
{
"name": "portfolio",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "parcel index.html"
},
"devDependencies": {
"parcel": "^2.0.0"
},
"author": "Dinank Soni",
"license": "ISC",
"dependencies": {
"three": "^0.165.0"
}
}`Preformatted text`
I was participating in similar topic, maybe this will solve your (popular) issue:
1 Like
This is not an actual, real path - with exception of bundlers and import maps this path means nothing for webserver / filesystem.
You have a few options:
1 - Open node_modules/three/examples/fonts/helvetiker_regular.typeface.json in your system and copy it next to ./index.html. Then pass just ./helvetiker_regular.typeface.json to the loader.load (since it now becomes a real path residing next to the index file.)
2 - Based on your package.json - I assume youâre going with parcel, therefore just follow this guide. Since parcel does include JSONAsset by default, you should be able to do the following:
import helvetikerRegular from 'three/examples/fonts/helvetiker_regular.typeface.json'; // NOTE Here you can use that path, since it'll be resolved during the build-time by bundler, not during runtime by the environment
loader.parse(helvetikerRegular, /* ... */); // NOTE Use .parse instead of .load here, since parcel automatically resolves the import as a valid JSON, so it doesn't have to be loaded by the loader
Small note regarding the second option - importing the file this way will include the JSON in its entirety in the built bundle, possible increasing its size and loading times significantly (whether or not your app actually will use or display the font, since parcel builds the entire project into a single file.)
3 - Unless you have a strong reason behind going with JSONs, Iâd recommend not going for JSON fonts and just use TTFs using TTFLoader. They are considerably lighter and way more robust than JSONified fonts (example.)
2 Likes
you canât share assets easily on npm because imports would require a specific loader, which is dependent on its bundler. you would need url-loader in this case, the import syntax differs from one bundler to another. it would include the asset and give you a url back which you can then pass to the FontLoader.
use this instead GitHub - pmndrs/assets: đŚ Importable base64 encoded CC0 assets
npm install @pmndrs/assets
const interJson = await import('@pmndrs/assets/fonts/inter_regular.json')
const geometry = new TextGeometry('hello', { font: new FontLoader().parse(interJson.default) })
1 Like
Thanks @Lukasz_D_Mastalerz, I will try it.
3rd one is a good option. thanks @mjurczyk
const windowText = async (text) => {
return new Promise((resolve, reject) => {
// Load a built-in font
const loader = new TTFLoader();
loader.load(
"https://cdn.wtlstudio.com/sample.wtlstudio.com/cc4af402-7002-4b64-9743-25e8e047fc7a.ttf",
function (json) {
const font = new THREE.Font(json);
// Create a text geometry
const textGeometry = new TextGeometry(text.text, {
font: font, // Load your font data here or use a built-in font
size: text.size, // Size of the text
depth: 0.1, // Thickness of the text
curveSegments: 12, // Number of segments for curves
bevelEnabled: false, // Whether to enable beveling
});
const textMaterial = new THREE.MeshBasicMaterial({ color: text.color }); // Material for the text
const textMesh = new THREE.Mesh(textGeometry, textMaterial); // Create a mesh with the text geometry
// Compute the bounding box
textGeometry.computeBoundingBox();
const boundingBox = textGeometry.boundingBox;
// Calculate the offsets
const textWidth = boundingBox.max.x - boundingBox.min.x;
const textHeight = boundingBox.max.y - boundingBox.min.y;
const textDepth = boundingBox.max.z - boundingBox.min.z;
// Adjust the position to center the text
textMesh.position.set(
text.x - textWidth / 2,
text.y - textHeight / 2,
text.z - textDepth / 2
);
text.scene.add(textMesh); // Add the text mesh to the scene
textMesh.visible = true;
textMesh.name = "textMesh";
resolve(textMesh); // Resolve the Promise with the textMesh
},
// onProgress callback
function (xhr) {
console.log((xhr.loaded / xhr.total) * 100 + "% loaded");
},
// onError callback
function (err) {
console.log(err);
console.log("An error happened");
}
);
});
};
@mjurczyk, there is the error:
how can I solve it? I try to find the font but not found. I think three.font is not available in my three version. my three version is 0.165.0 or there location is change in three js.
See this example (code in the bottom right.)
Font is not part of the three.js core, it has to be imported from the same file as FontLoader (related.)