perform click ( tap ) listener

[antonie1993]

I have tried so many solutions like Threejs.Raycaster or some third-party libraries to detect tap listener on gltf loaded model , but no one is working , and I dont know why using raycaster , I passed these items in ThreejsRenderer to Raycaster constructor : camera , renderer.domElement but none of these available methods for listening interaction : click , mouseover, mousedown , ... triggered .

I also have tried raycaster and some other libraries in my own simple threejs project ( without AR ) and successfully could listen gltf touches . you can also see this repo https://github.com/markuslerner/THREE.Interactive , and its gltf.html example which is working fine . but again this approach not working in your framework .

would you please give me some suggestions about the above repo or Threejs.Raycaster to listen clicks on gltf models in your framework ?

[kalwalt]

Have you tried to tweak the ThreejsRenderer constructor? https://github.com/webarkit/ARnft/blob/be2944db4bf61896cdbdd1435942d60ce489b8c0/src/renderers/ThreejsRenderer.js#L5-L25 I think that you should add an event listener to listen the onInitThreejsRendering dispatch event: https://github.com/webarkit/ARnft/blob/be2944db4bf61896cdbdd1435942d60ce489b8c0/src/renderers/ThreejsRenderer.js#L54 and get the renderer and camera at this point to fill the interactionManager https://github.com/markuslerner/THREE.Interactive/blob/633cae8dde3e723317e6cbefbc4c7b64005ed4d4/src/index.js#L24 Tell me if this make a difference.

[kalwalt]

I forgot to mention that you can find an example for the onIntiThreejsRendering in this example: arNFT_gltf_brave_robot_example.html

[antonie1993]

thank you for your answering , I tried what you suggested but same result facing . I added some arguments to addModel method . I've passed interactionManager , because interactionManager.update() must be called in every frame on tick() method inside ARnft.js . and also I need the model added to root , so I passed callback(model) to addModel , as you can see below . there is no error and everything is fine in debug mode , but mouseover or mousedown or other actions not triggered . I myself am suspected to renderer.domElement which is need to interactionManager . I don't know that your framework is appending renderer.domElement to body or not . by the way , any suggestion is welcome . thank you

document.addEventListener('onInitThreejsRendering', (ev) => {
      try {
        const interactionManager = new THREE.InteractionManager(
          renderer,
          camera,
          renderer.domElement
        );
        nft.addModel('./test.glb', 150, 150, 0, 200, interactionManager, function(model) {
          interactionManager.add(model);
          console.log("model is " + model);
          model.addEventListener('mouseover', (event) => {
            console.log(" mouseOver")
          });
          model.addEventListener('mousedown', (event) => {
            console.log(" mousedown")
          });

        })
      } catch (e) {
        alert(" error " + e)
      }
})

[kalwalt]

@antonie1993 the domElement is the canvas with id="canvas" created by the static method createContainer https://github.com/webarkit/ARnft/blob/be2944db4bf61896cdbdd1435942d60ce489b8c0/src/utils/html/Container.js#L6 in the Container class.The container class is responsible to create a div with a canvas to be attached to ThreejsRenderer and a video to grab the video stream. You can change this behavior, see this example https://github.com/webarkit/ARnft/blob/master/examples/arNFT_container_example.html. Can you post your modified addModel function? i would help more, i think this would be a nice feature.

[kalwalt]

@antonie1993 have you solved?

[Khodour]

have you solved this issue ? i am facing same issue

[antonie1993]

@kalwalt @Khodour Hi there , sorry I'm late . the main issue is the mouse that should be updated and passed to Threejs.raycaster . as we have changed our size of renderer [ renderer.setSize ] , we should calculate the mouse.x and .y parameters so that raycaster can process the correct area to estimate that which object was clicked .I have tried so many methods for doing this but not working . now i'm trying to rewrite my custom raycaster class to recognize the object clicked .

[antonie1993]

for everybody to know , raycaster just get the mouse parameters ( which must be in range -1..1 ) and scene . then iterate over the children inside the scene and estimate that which object was nearest to the mouse . I think Three.js should change this process beacuse it depends on so many variables tha may affect the result like now . the type of camera , size of renderer , size of canvas , mouse params , etc effect on raycaster process

[Khodour]

@antonie1993 perfecto , can't wait to see the updates i hope you succeed with your custom raycaster . please keep us updated can't wait to hear good news

[kalwalt]

Thank you for this, if you can provide a minimal example, would be awesome. I also would let you know of up coming changes in PR #180 ARnft will be completely "agnostic" but i' m developing and external package ARnft-threejs for the rendering part. This will let the user choose his preferred rend3ing engine.

[kalwalt]

I'm working on a simple examples with the new ARnft (version 0.9.0) nd ARnft-threejs as i said in the previuos comment, there are some important changes. You can find the example here: https://github.com/kalwalt/kalwalt-interactivity-AR/blob/ARnft-examples/ARnft/arNFT_intereactive_example.html. This not works as expected, i hope to fix it soon.

[Khodour]

awesome , i think this version is more friendly with threejs methods and updates , great job my friend

On Wed, May 26, 2021 at 1:03 AM Walter Perdan @.***> wrote:

I'm working on a simple examples with the new ARnft (version 0.9.0) nd ARnft-threejs as i said in the previuos comment, there are some important changes. You can find the example here: https://github.com/kalwalt/kalwalt-interactivity-AR/blob/ARnft-examples/ARnft/arNFT_intereactive_example.html. This not works as expected, i hope to fix it soon.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/webarkit/ARnft/issues/174#issuecomment-848300267, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABWHGS63J3JMUHV2E5XMFL3TPQNE5ANCNFSM44C64XPA .

[kalwalt]

awesome , i think this version is more friendly with threejs methods and updates , great job my friend

On Wed, May 26, 2021 at 1:03 AM Walter Perdan @.***> wrote:

I'm working on a simple examples with the new ARnft (version 0.9.0) nd ARnft-threejs as i said in the previuos comment, there are some important changes. You can find the example here: https://github.com/kalwalt/kalwalt-interactivity-AR/blob/ARnft-examples/ARnft/arNFT_intereactive_example.html. This not works as expected, i hope to fix it soon.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/webarkit/ARnft/issues/174#issuecomment-848300267, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABWHGS63J3JMUHV2E5XMFL3TPQNE5ANCNFSM44C64XPA .

Yes i agree with you. Typescript support Is on the way see PR #184

[Khodour]

Hello my friend

i am still waiting for the final version if its done so i can use ur library in my project , the last issue was i couldn't use click event on the objects .

is there a release date ?

On Fri, May 28, 2021 at 3:36 PM Walter Perdan @.***> wrote:

awesome , i think this version is more friendly with threejs methods and updates , great job my friend

On Wed, May 26, 2021 at 1:03 AM Walter Perdan @.***> wrote:

I'm working on a simple examples with the new ARnft (version 0.9.0) nd ARnft-threejs as i said in the previuos comment, there are some important changes. You can find the example here:

https://github.com/kalwalt/kalwalt-interactivity-AR/blob/ARnft-examples/ARnft/arNFT_intereactive_example.html . This not works as expected, i hope to fix it soon.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub

174 (comment)

https://github.com/webarkit/ARnft/issues/174#issuecomment-848300267, or unsubscribe

https://github.com/notifications/unsubscribe-auth/ABWHGS63J3JMUHV2E5XMFL3TPQNE5ANCNFSM44C64XPA .

Yes i agree with you. Typescript support Is on the way see PR # 181

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/webarkit/ARnft/issues/174#issuecomment-850387833, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABWHGS2PH62AYEHKPFAOB4LTP6E4XANCNFSM44C64XPA .

[kalwalt]

@antonie1993 have you solved the issue?

[kalwalt]

Hi @Khodour @antonie1993 i think i have fixed that example https://github.com/kalwalt/kalwalt-interactivity-AR/blob/ARnft-examples/ARnft/arNFT_intereactive_example.html see PR https://github.com/kalwalt/kalwalt-interactivity-AR/pull/46. Actually all the events works. The cube became red when the mouse is over it and became black when is out, if you click on it became blue and you got an additional event message in the console. It's not clear why it doesn't worked before, I used the PerspectiveCamera but i had to make this hack https://github.com/kalwalt/kalwalt-interactivity-AR/blob/d453240f87359ce391ee40c9e187ed267425ec52/ARnft/arNFT_intereactive_example.html#L61-L76 in detail this code is important:

const camera = sceneThreejs.getCamera();
console.log(camera);
var cam = new THREE.PerspectiveCamera( 45, 640 / 480, 1, 1000 );
sceneThreejs.setCamera(cam);

note that i have already enabled the PerspectiveCamera (instead of Camera) in the initialization of the SceneRendererTJS instance (the true boolean is for that) let sceneThreejs = new ARnftThreejs.SceneRendererTJS(config, canvas, nft.uuid, true); see in the code https://github.com/kalwalt/kalwalt-interactivity-AR/blob/d453240f87359ce391ee40c9e187ed267425ec52/ARnft/arNFT_intereactive_example.html#L61 but probably is the setting of the PerspectiveCamera the key.

[kalwalt]

The problem was in the ratio (aspect) of the camera see this comment https://github.com/kalwalt/kalwalt-interactivity-AR/pull/46#discussion_r792991149 I will merge soon this in the https://github.com/kalwalt/kalwalt-interactivity-AR master branch.

[kalwalt]

Please test the live example https://kalwalt.github.io/kalwalt-interactivity-AR/ARnft/arNFT_intereactive_example.html

[kalwalt]

Closing this as i provided an example and a fix. Feel free to open one other issue if you encounter other problems.