ARnft-threejs
ARnft-threejs copied to clipboard
Object is not hide by default and not visible on marker scan
Hello I'm trying to create a 3D TEXT object which will replace the red cube.
I loaded a font and create a 3D Text and add into the scene but I got 2 issues.
- Text Size is too big and only visible if I do geometry.center()
- Text is visible by default and not didn't hide or unhide.
Sample code
const fontLoader = nftAddTJS.getFontLoader();
fontLoader.load(`./fonts/${fontName}`, (font) => {
var material = new THREE.MeshStandardMaterial({ color: new THREE.Color(obj.color).convertSRGBToLinear(), side: THREE.DoubleSide })
material.transparent = true;
**// TextGeometry exported from nftAddTJS**
const geometry = nftAddTJS.createTextGeometry(obj.resource.title, {
font: font,
size: parseInt(obj.resource.size) * 0.000001, **//ISSUE: Size need to provide in decimal or else it create a large text**
height: 1,
curveSegments: 12
})
geometry.center()
var mesh = new THREE.Mesh(geometry, material);
mesh.scale.set(obj.scale.x, obj.scale.y, obj.scale.z)
mesh.rotation.set(obj.rotation.x, obj.rotation.y, obj.rotation.z)
mesh.position.set(1000, 200, 90) **// If I change the position from (x:0, y:0, z:0) text is not visible on the canvas**
nftAddTJS.add(mesh, '3dText', false)
})
Hi @Mr-Bhardwa7 welcome to @webarkit, I think you modified the ARnft-threejs code or am i wrong? At the moment i haven't an idea on what could cause theses issues, I should try the code but i have no so much time lately...
Hi @kalwalt, pleasure is mine.
Yes I added these 2 method in ARnft-threejs
and initialised the this.fontLoader = new FontLoader();
in the constructor.
and create a 3D text and try to add that text into the scene same as red cube in the example. But it not load correct and if I change the position from center it lost from camera view.

@kalwalt can you please create a simple 3D text example using fontLoader?
@Mr-Bhardwa7 i can add that method getFontLoader inside ARnft-threejs and if i have time maybe add a simple example, but no eta for this. 🙂
I will try to make a simple example based on this my little project https://github.com/kalwalt/kalwaltart.com/blob/master/interactivity/art_is_a_joke/index.html If you take a look at i used with AR.js but the Three.js version was very old, maybe the code has changed but i will see what i can do.
Hey @kalwalt, Thanks for the help.
I'm able to fix the issue which I was facing. The problem was I didn't pass the correct font size as per the loaded font, which is the reason my text is not created smoothly.
I will create an addText function and raise PR 😌
Hey @kalwalt, Thanks for the help.
I'm able to fix the issue which I was facing. The problem was I didn't pass the correct font size as per the loaded font, which is the reason my text is not created smoothly.
I will create an addText function and raise PR 😌
Ok thank you, PR is welcome! In case send it to the dev
branch. 😄