I receive this warning i think it would be better to avoid it. I found this article in the Three.js forum https://discourse.threejs.org/t/warning-multiple-instances-of-three-js-being-imported/24191, not sure why it's happening.

Hi,

I tried this arNFT_video_example on multiple devices and the video seems to be black (or just stuck on 1st frame?). Here's a screenshot of what the video looks like:

The video work only on android chrome. On android firefox, iOS chrome, iOS safari - the video is black. I also tried using the library with other videos but same happens with other videos.

At present the plane geometry for a video has a fixed planeGeometry of [1,1,1,1] which just creates a very basic square or a 1:1 ratio video , this really isn't helpful as the vast majority of videos are 16:9. This makes any video of a video other than 16:9 display incorrectly.

I would propose that you expose these at as a argument when adding a video to a scene using ARnft, I would also expose the height and width segmentation too.

I want to display a 3d model after scanned an image marker. I tried the example one but I want to try update the model with my own code.

May I know if it is possible for me to build my own three js 3d world and hide the models. Then I use the callback from ARnft to display the object and update its position to the marker?

This toolkit is so awesome that I almost had no trouble to set things up :)

During my test, ideally we would love to cover the whole marker with media content. While under default setting, the height and width are almost identical even it is a 1024x480 or 360x720 media file.

@kalwalt Any input or code modification guidance would be appreciated. Thanks in advance!!

Also some heads up: the video is blacked out in iOS 14.6 (which never happened in previous iOS releases). I guess it is relevant with new privacy rules introduced.

Hi Guys,
is there any way to remove added model? I can only find these functions:

• add
• addmodel
• addImage
• addVideo

can someone help me please figure it out, any help will be appreciable.
Thank you

Instead of use the interpolation routine, maybe better try another algorithm: one euro filter

I'm certain I'm just missing it, but for some reason I can't seem to find (or generate) a non-minified version of the ARnftThree.js?

Does anyone know what the correct npm or yarn command would be to generate one?

webarkit/ARnft#204

I came from the above thread. I was trying to use my own camera source. So I have the following script

navigator.mediaDevices.enumerateDevices()
.then(gotDevices)
.then(function(){
    navigator.mediaDevices.getUserMedia({
          video: constraints
    })
 .then(function(stream){
      window.stream = stream;
      video.srcObject = stream;

       const entities = [
                  { name: 'game1', markerUrl: "/markers/game1" },
                  { name: 'game2', markerUrl: "/markers/game2" },
                  { name: 'game3', markerUrl: "/markers/game3" },
          ];
                   
      ARnft.ARnft.initWithEntities(640, 480, entities,  '/config.json', true)
      .then((nft) => {
      });

And I commented out navigator.mediaDevices code in ARnft.js. Then, the last console log is ARnftThreejs version: 0.2.0. It seems cannot keep loading the remaining library. Without anymore console log and error log.

    <script src="/js/three.min.js"></script>
    <script src="/js/ARnftThreejs.js"></script>
    <script src="/js/ARnft.js"></script>
    <script src="/js/main.js"></script>

I was using the above structure. ARnft ini function was wrapped inside my custom getUserMedia function in main.js. It causes the ARnftThreejs not keep load. However, there is no problem when I test in desktop and the latest Samsung phone. It has problem only in my old Android phone.

    <script src="/js/three.min.js"></script>
    <script src="/js/ARnftThreejs.js"></script>
    <script src="/js/ARnft.js"></script>
    <script src="/js/main.js"></script>
    <script>
        const entities = [
            { name: 'game1', markerUrl: "/markers/game1" },
            { name: 'game2', markerUrl: "/markers/game2" },
            { name: 'game3', markerUrl: "/markers/game3" },
        ];
  
        ARnft.ARnft.initWithEntities(640, 480, entities,  '/config.json', true)
        .then((nft) => {})

lastly, when i move the function out. it works again. i am not sure the reason

Hi, I am facing problem in loading OBJ & MTL 3D model using ARnft. Is there any example for this case?
As i know using addModel function can only apply to glTF model or glb model.

Hi guys,
I am trying to achieve an AR experience for the Restaurant menu, so multiple models involved in this project. How can I achieve toggling multiple models on a single NFT marker? Please guide me to achieve this.

My Suggestion:
ARnft is an awesome framework for image tracking compared to other frameworks like AR.js etc. The only thing lack in this project is documentation, if there is proper documentation then I think more people will choose this framework for WebAR. Kudos to the developer @kalwalt . 👍

Hello I'm add gltf model and play animation mixer, But ot not working.
I'm using GLTFLoader and Animation Mixer. then I add model by NFTaddTJS. After my tracking my models show but not play animation. Thank you

Hi , can you explain how to change video size (height and weight) and it's position related to tracked image ? I want my video cover all image.

Hello I'm add gltf model and play animation mixer, But ot not working.
I'm using GLTFLoader and Animation Mixer. then I add model by NFTaddTJS. After my tracking my models show but not play animation. Thank you

I have two markers, each with their own image, with different configuration ...

It doesn't appear that the config/scale/etc is respected for each addImage -am I doing something wrong?

		               let nftAddTJS = new ARnftThreejs.NFTaddTJS(nft.uuid);
		               nftAddTJS.oef = true;

                                // Set width, height and width and height number of segments of the PlaneGeometry.
				let imgConfig = {
		                  w: 1,
		                  h: 0.3,
		                  ws: 1,
		                  hs: 1
		               };
			       nftAddTJS.addImage('Data/newspaper2_clean_hidden_small.png', 'newspaper2_clean', 0xdddddd, 660, imgConfig, false);



		               // Set width, height and width and height number of segments of the PlaneGeometry.
		               let imgConfig2 = {
		                  w: 1,
		                  h: 1,
		                  ws: 1,
		                  hs: 1
		               };
		               nftAddTJS.addImage('Data/puzzle.png', 'puzzle_bkgrnd', 0xbbbbff, 500, imgConfig2, false);

How do turn off the visibility of an added 3d model?
I tried this code for toggling visibility, but its not doing anything.

code:
nftAddTJS.objVisibility=false;

Any help is appreciated. Thank you.

Hi,

is there a way to animate a model?

Best,
Stefan

The ratio setting https://github.com/webarkit/ARnft/blob/fd16f66908451c95174dacb4ee36c90c344304ff/examples/arNFT_example.html#L37 gives NaN. In some circumstances is very bad see for example this comment kalwalt/kalwalt-interactivity-AR#46 (comment) PR kalwalt/kalwalt-interactivity-AR#46 where the wrong setting and data may give unpredictable results. This should be fixed in all examples.

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)
      })