webarkit / ARnft-threejs

A rendering package for https://github.com/webarkit/ARnft
GNU General Public License v3.0
23 stars 8 forks source link

Object is not hide by default and not visible on marker scan #37

Open Mr-Bhardwa7 opened 1 year ago

Mr-Bhardwa7 commented 1 year ago

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.

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)
      })
kalwalt commented 1 year ago

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...

Mr-Bhardwa7 commented 1 year ago

Hi @kalwalt, pleasure is mine.

Yes I added these 2 method in ARnft-threejs

Screenshot 2022-12-03 at 4 29 17 PM

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.

Screenshot 2022-12-03 at 4 35 10 PM

@kalwalt can you please create a simple 3D text example using fontLoader?

kalwalt commented 1 year ago

@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. 🙂

kalwalt commented 1 year ago

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.

Mr-Bhardwa7 commented 1 year ago

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 😌

kalwalt commented 1 year ago

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. 😄